I am developing an application with Electron and want to start using React. Because of this, I have installed the react and react-dom packages with:
npm install --save react react-dom
My javascript file is included with:
<script src="js/character-rolling.js"></script>
I have added this to the first part of the javascript file:
var React = require("react");
var ReactDOM = require("react-dom");
var Greeting = React.createClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
However, when I run the code, chromium developer tools shows the error:
character-rolling.js:6 Uncaught SyntaxError: Unexpected token <
At first sight one would say that the browser cannot interpret the syntax but isn't this supposed to be pure ES5 syntax? I would like to keep my application simple and not start using a tool like Babel. I would think that the browser should interpret this without problems. The electron version:
[marco@marco-archLinux deeMemory]$ npm run electron --version
4.0.3
Although it is ES5 syntax but what you are writing is JSX and not pure Javascript and hence you get the error unexpected token < at return <h1>Hello, {this.props.name}</h1>; . You need a tool to convert your JSX to JS for your browser to understand.
For this you definitely need babel. In order to use it you can use webpack which will make use of babel to bundle code into a JS file.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments