帶有電子和反應的語法錯誤：意外的標記

我正在開發一個帶有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

帶有電子和反應的語法錯誤：意外的標記

回答

相關問題