React.js SyntaxError:意外的标记<

我在react.js真的很新。 我在Webstorm发展。

我有这个错误,我没有成功解决它,看起来反应是不承认,但我尝试安装任何npm反应包,仍然不工作..

  • SyntaxError:意外的标记<

这是我的代码:

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

我认为这是因为你的代码有JSX – 也就是CommentBox HTML inside JavaScriptHTML inside JavaScript部分

为了让JavaScript运行,你需要使用像Babel这样的转译器,

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

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

JavaScript引擎(如Chrome中的V8)不能在本机上运行JSX–它们需要首先进行转译。 我不知道如何得到像在WebStorm工作的babel。