React.js 語法錯誤：意外的令牌

Question

我真的是 react.js 的新手。 我在 Webstorm 中開發。

我有這個錯誤，我沒有成功解決它，看起來反應無法識別，但我嘗試安裝任何 npm react 包，但仍然無法正常工作..

• 語法錯誤：意外的標記 <

這是我的代碼：

索引.jsx：

    /** @jsx React.DOM */
var React = require('react');
var ReactDOMServer = require('react-dom');
var DefaultLayout = require('./layout/Master');
//var element = React.createElement('div', null, 'Hello World!');
//console.log(ReactDOMServer.renderToString(element));

var CommentBox = ReactDOMServer.createClass({
    render: function() {
        return (
            <div>
                <h1>aslkdjaslkdj</h1>
            </div>
            //React.createElement('div', null, 'Hello World!')

        );
    }
});

module.exports = CommentBox;`var express = require('express');

索引.js：

    var express = require('express');
var router = express.Router();

var request = require('request');

router.get('/', function (req, res) {
    //res.send("<h1> asdasasd </h1>");
    res.render('index', {});
});
module.exports = router;

應用程序.js：

var app = express();

var routes = require('./routes/index');
var path = require('path');

app.use('/', routes);

app.set('port', process.env.PORT || '5000');

// view engine setup
app.set('views', path.join(__dirname, '/views'));
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());

app.use('/', routes);

module.exports = app;
var server = app.listen(app.get('port'), function(){
    console.log("app started");

});`

package.json:

    {
  "name": "nodewithreactwithjsx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Almog.h",
  "license": "ISC",
  "dependencies": {
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-register": "latest",
    "express": "^4.13.4",
    "express-react-views": "latest",
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "webpack": "^1.13.0"
  }
}

Answer 1

我認為這是因為您的代碼具有 JSX - 即CommentBox HTML inside JavaScript部分中的HTML inside JavaScript

要讓 JavaScript 運行它，你需要使用像Babel這樣的轉譯器——這將變成如下語句：

<div className="apples">hello</div>

進入

React.createElement('div', {className:'apples'}, 'hello')

Javascript 引擎（如 Chrome 中的 V8）無法在本地運行 JSX - 它們需要先進行轉換。 不過，我不確定如何在 WebStorm 中使用 babel 之類的東西。