Simple Reactjs app without using npm and server? [duplicate] - javascript

This question already has answers here:
React - component in seperate script does not work
(3 answers)
Closed 6 years ago.
I want to create a simple Reactjs app without using npm and server.py, server.js etc. I just want to run my index.html in a browser. Currently what I am getting is nothing will get rendered and browser shows blank white screen, there are no errors in console as well. I have included the following scripts.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.3284-6/12350972_1539644969670605_801198237_n.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12056978_1723186904561917_1347349243_n.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="app.js">
</script>
</body>
</html>
Here app.js is my js which renders certain components into DOM.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
This is my app.js
Update
Now I am getting this error message
Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https, chrome-extension-resource.

Maybe this instructions and starter kit might be useful for you: https://facebook.github.io/react/docs/getting-started.html

The problem is the react jsx which isn't being processed with babel on the fly. Removing the JSX works fine:
https://jsfiddle.net/zevndLog/
var MyComponent = React.createClass({
displayName: 'MyComponent',
render: function render() {
return React.createElement(
'div',
null,
'Hello'
);
}
});
ReactDOM.render(React.createElement(MyComponent, null), document.getElementById('container'));
Can't remember off the top of my mind if / how you tell babel to compile jsx on the fly

Related

Can I run index.html with React without npm start and npx create-react-app?

I am self-learning react and I am just confused about a lot of things.
I thought that if I add React to my index.html via a script like the below:-
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bill Details</title>
</head>
<body>
<div id="billTable"></div>
<script src="BillTable.js" type="text/javascript"></script> ------------- Problem Line 1
</script>
</body>
</html>
and this is my js file where I am trying to return react component
//BillTable.js
import React from "react";
import ReactDOM from "react-dom";
function BillTable() {
return <h1>HELLO TABLE</h1>;
}
ReactDOM.render(<BillTable/>, document.getElementById("billTable"));
when I try to open index.html directly in firefox or through express server I get the below error in console:-
Uncaught SyntaxError: import declarations may only appear at top level of a module.
I then got rid of this error by changing the script type in problem line 1 in index.html to
<script src="BillTable.js" type="text/babel"></script>
but then also my webpage is completely blank and even console is not showing any errors.
Please suggest how to solve this issue. I am right now trying to learn React with functional approach only, so if any changes are required to be done on the react side, please make them in the functional approach.
I don't think you have included the correct packages to handle React components and JSX yet. These packages react, react-dom, etc. are usually in a package.json and are required to tell the browser what tools will be used to run the code. These packages handle the "script" or components you create and places the elements constructed in your components to the DOM. You can solve this by loading react with additional script tags before your component's script tag. This will let the browser know how and what to use to run your react component. Also, in your function, it does not know that it is a React Component. Check out an explanation for why you would have to use React.createElement I have attached an example of using only an index.html page here:
example of using an index.html page
Your Component file:
"use strict";
function BillTable() {
return React.createElement("h1", "", "HELLO TABLE");
}
const domContainer = document.querySelector("#billTable");
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(BillTable));
and your index.html:
<body>
<div id="billTable"></div>
<!-- Load your React packages -->
<script
src="https://unpkg.com/react#18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"
crossorigin
></script>
<!-- Load your React component. -->
<script src="BillTable.js"></script>
</body>

React with Babel without Node

I'm creating a React application without having to use npm or yarn, just want it to work by opening page.html file.
I have this code in both files, cockpit.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="https://raw.githubusercontent.com/cockpit-project/cockpit/master/src/base1/cockpit.css" type="text/plain" rel="stylesheet">
<script src="https://raw.githubusercontent.com/cockpit-project/cockpit/master/src/base1/cockpit.js" type="text/plain"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js" type="text/plain" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" type="text/plain" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js" type="text/jsx"></script>
<title>Cockpit Test</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="cockpitTest.jsx"></script>
</body>
</html>
and cockpitTest.jsx:
"use strict";
const rootElement = document.getElementById('root')
class CockpitTest extends React.Component {
componentDidMount() {
console.log("asd")
}
render() {
return (
<div>
<h1>test</h1>
</div>
);
}
}
function App(){
return(
<div>
<CockpitTest name="Test"/>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('rootElement'))
but still I'm getting a blank screen when h1 text is expected. Console doesn't say anything either, it's just blank. Any help would be appreciated!
You have lots of problems
Content-Type
You've set type attributes on all your script and link elements to tell the browser that the CSS and scripts are in formats it doesn't understand. Don't do that.
Only the JSX file itself (in your last <script>) should have a type attribute.
Github is not a hosting service
You are trying to host the cockpit files on raw.github.com. This is not designed to be used as a CDN and returns data with the wrong Content-Type header. Use a real hosting service.
URL
You named the file cockpit.jsx but said src="cockpitTest.jsx"
Missing element
You said document.getElementById('rootElement') but also id="root". These do not match.
You are working without Node.js
The developer tools for React use Node.js to compile it for production-level performance. There's very little reason to not use them all the way through the development process.
First make it a javascript file .js
Then you can either:
Change:
rootElement = document.querySelector('#root'));
AND:
ReactDOM.render(<App />, rootElement)
OR:
ReactDOM.render(<App />, document.querySelector('#root'))
AND:
Delete your constant.
I even got React Router to work, but had problems when it came to separating components out into files for a tidy structure. Couldn't get imports to work inside app.js. Seems like Babel should have helped with imports and exports, but I couldn't get it to work.
Firstly - on your script type your using type "application/babel". This is not a valid media type, you probably want to use "application/javascript". This could be why nothing is displayed.
Secondly - the script you're using is not valid JS, you're using JSX which browsers cannot understand. JSX is what allows us to write html-like tags in JavaScript (the < /> for example). You would either have to write JS instead of JSX, or transpile your JSX using a transpiler such as babel. I would suggest running a compiler such as babel.
Read more about JSX here.

React JS Cannot read property 'keys' of undefined

I am beginning to learn React through a tutorial, however I ran into this error when I ran the code that I created.
The error seems to be one that has to do with the framework of the languages. Perhaps with the version of Babel that I imported for the translation.
Does anyone know the actual situation and how to find a soulution.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<title>ReactJs</title>
</head>
<body>
<script type="text/babel">
var HelloWorld = ReactDOM.createClass({
render: function() {
return <div>
<h1>Hello World</h1>
<p>This is some text></p>
</div>
}
});
ReactDOM.render(<HelloWorld/>, document.body);
</script>
</body>
</html>
I'm not sure if you have found the results yet, but I got the same error and found out it's the cdn version mismatch issues.
If you use these cdn's:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
and change your
ReactDOM.render(<HelloWorld/>, document.body);
to
React.render(<HelloWorld/>, document.body);
it will work now.
babel-browser is deprecated. use babel-standalone https://github.com/babel/babel-standalone instead:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
React.render has been deprecated since React 0.14 (released October 7, 2015):
https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html
I'd strongly recommend the awesome Create React App NPM module from Facebook, which creates React apps with no configuration, but still uses the latest ES6 and Babel features. Also it comes with hot reloading out of the box and has a build option, for creating a minified, bundled .js file ready for production.
https://github.com/facebookincubator/create-react-app

In browser JSX Transformation in Chrome

Am trying to follow Mastering React book, There is a sample whose code is below
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello React</title>
<script src="https://<fb shortened url>/react-with-addons-0.14.0.js"></script>
<script src="https://<fb shortened url>/react-dom-0.14.0.js"></script>
<script src="http://<fb shortened url>/JSXTransformer-0.13.1.js"></script>
</head>
<body>
<div id="view" />
<script>
var HelloReact = React.createClass({
render: function () {
return <h1 > Hello React < /h1>
}
});
ReactDOM.render( < HelloReact / > , document.body);
</script>
</body>
</html>
The above however does not seem to work. I am not getting a HelloReact in my document body.
Am totally new to React (and also JSX Transformation etc.,).
Any help will be greatly appreciated.
The error I get in Chrome is
Uncaught Error: Invariant Violation: ReactDOM.render(): Invalid component element. Instead of passing an element string, make sure to instantiate it by passing it to React.createElement.
Note : fb shortened url is fb.me, Stackoverflow was complaining about use of shorteners,
As many people have noticed already, React and React Native have both
switched their respective build systems to make use of Babel. This
replaced JSTransform, the source transformation tool that we wrote at
Facebook.
https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html
Use babel to convert the JSX syntax into JS and use the JS in your file

Firefox Addon SDK: Babel support

I'm trying to use React as part of a firefox addon I'm working on. React works fine as long as I don't use jsx. Babel isn't working - because I can't specify the type of the script I add.
I'm doing:
tabs.open({
url: 'index.html',
onReady: function( tab ){
var worker = tab.attach({
contentScriptFile: [
'./jquery-2.1.4.min.js',
'../node_modules/react/dist/react.js',
'../node_modules/react-dom/dist/react-dom.js',
'../node_modules/babel-preset-react/index.js',
'./js/main.js', // the file i need to specify as type: text/babel
],
});
}
);
Ideally I'd be able to set a type property on the './js/main.js' script, but the docs don't appear to have anything.
The trick is to load react, jquery, babel and your jsx directly in your html, as you usually do. The javascripts files that you'll have to load using the contentScriptFile param are those one that you need to load the logic to communicate with the addon main js file.
An example for a valid html will be:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react-with-addons.js"></script>
<script src="react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<h1>Hello!</h1>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<p>Hello, world!</p>,
document.getElementById('example')
);
</script>
</body>
</html>
If you tell me what you need to do in that html/content script I can give you an example of how you can do to communicate it with the main script.

Categories