React.js SyntaxError：予期しないトークン<

Question

私は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：私はあなたのコードはJSXを持っているので、それがあると思い

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

- JavaScriptはこれを実行するために取得するにはCommentBox

のHTML inside JavaScript一部すなわちBabelのような蒸散器を使用する必要があります。

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

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

の中へ

（ChromeのV8のような）のJavascriptエンジンはネイティブでJSXを実行することはできません - 彼らは最初transpiling必要です。私はWebStormで動くバーベルのようなものを手に入れる方法がわからない。