Electron 和 React 的语法错误：意外的标记

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>;
}
});

但是，当我运行代码时，chromium 开发者工具显示错误：

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

乍一看会说浏览器无法解释语法，但这不应该是纯 ES5 语法吗？我想让我的应用程序保持简单，而不是开始使用像 Babel 这样的工具。我认为浏览器应该毫无问题地解释它。电子版：

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

Answer 1

虽然它是 ES5 语法，但你写的是 JSX 而不是纯 Javascript 因此你在 [=11] 处得到错误 unexpected token < =]。您需要一个工具来转换您的 JSX to JS 以便浏览器理解。

为此你绝对需要 babel。为了使用它，您可以使用 webpack，它将利用 babel 将代码捆绑到 JS 文件中。

Electron 和 React 的语法错误：意外的标记

Syntax error with Electron and React: unexpected token

reactjs

electron