React.js SyntaxError: Unexpected token <答案

【问题标题】：React.js SyntaxError: Unexpected token <React.js SyntaxError: Unexpected token <
【发布时间】：2016-05-12 00:12:57
【问题描述】：

我真的是 react.js 的新手。我在 Webstorm 中开发。

我有这个错误，我没有成功解决它，看起来 react 无法识别，但我尝试安装任何 npm react 包但仍然无法工作..

SyntaxError: Unexpected token

这是我的代码：

index.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');

index.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;

app.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"
  }
}

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

我认为这是因为您的代码有 JSX - 即 CommentBox 的 HTML inside JavaScript 部分

要让 JavaScript 运行它，您需要使用像 Babel 这样的转译器 - 这将变成如下语句：

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

进入

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

Javascript 引擎（如 Chrome 中的 V8）无法原生运行 JSX - 它们需要先进行转译。不过，我不确定如何让 babel 之类的东西在 WebStorm 中工作。

【讨论】：