React.js SyntaxError：意外的標記<

我在react.js中確實很新。我在Webstorm中發展。React.js SyntaxError：意外的標記<

我有這樣的錯誤，我沒有成功解決它，它看起來就像是反應不承認，但我嘗試安裝任何NPM反應封裝，還是不行..

語法錯誤：意外標記<

這是我的代碼：

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

來源

2016-05-11 Almog

我想這是因爲你的代碼有JSX - 即CommentBox

的HTML inside JavaScript部分獲取JavaScript運行此您需要使用像Babel這樣的譯員 - 這會變成如下語句：

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

進入

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

JavaScript引擎（V8一樣在Chrome中）不能在本機運行JSX - 他們需要transpiling第一。但我不確定如何獲得像在WebStorm中工作的babel。

來源

2016-05-11 16:12:57

React.js SyntaxError：意外的標記<

回答

相關問題