带有电子和反应的语法错误：意外的标记

我正在开发一个带有Electron的应用程序，并且想要开始使用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>; 
} 
});

然而，当我运行的代码，铬开发人员工具显示了错误：

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

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

[[email protected] deeMemory]$ npm run electron --version 
4.0.3

来源

2016-12-07 Perennialista

虽然是ES5的语法，但你正在写的JSX，而不是纯JavaScript，因此你在return <h1>Hello, {this.props.name}</h1>;得到错误unexpected token <。您需要一个工具才能将您的浏览器的JSX to JS转换为明白。

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

来源

2016-12-07 03:33:26

谢谢，我只是想知道是否有办法避免设置webpack和babel，但显然不是。我去做。 – Perennialista

@Perennialista您可以[在没有JSX的情况下使用React]（https://facebook.github.io/react/docs/react-without-jsx.html）。如果你想在不引入构建/编译工具的情况下让事情变得更好，你也可以[使用React的hyperscript助手]（https://github.com/jador/react-hyperscript-helpers）。 – DaveJ

带有电子和反应的语法错误：意外的标记

回答

相关问题