reactjs - Electron和React的语法错误: unexpected token

Question

我正在用Electron开发应用程序，并想开始使用React。
因此，我用以下命令安装了react和react-dom软件包:

npm install --save react react-dom

我的JavaScript文件包含在:

<script src="js/character-rolling.js"></script>

我已将其添加到javascript文件的第一部分中:

var React = require("react");
var ReactDOM = require("react-dom");

var Greeting = React.createClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
}
});

但是，当我运行代码时，chrome开发人员工具显示以下错误:

character-rolling.js:6 Uncaught SyntaxError: Unexpected token <

乍一看，有人会说浏览器无法解释语法，但是这不应该是纯ES5语法吗？我想保持我的应用程序简单，而不要开始使用Babel这样的工具。我认为浏览器应该可以毫无问题地进行解释。 Electron 版:

[marco@marco-archLinux deeMemory]$ npm run electron --version
4.0.3

Answer 1

尽管它是ES5语法，但是您编写的是 JSX而不是纯Java脚本，因此，您在unexpected token <上收到错误return <h1>Hello, {this.props.name}</h1>;。您需要一个工具来转换JSX to JS，以供浏览器理解。

为此，您肯定需要babel。为了使用它，您可以使用webpack，它将利用babel将代码 bundle 到JS文件中。