クライアントに渡す前に、サーバー上で非常に単純なコンポーネントをレンダリングしようとしています。次のように gulp と babelify を使用して変換します。
gulp.task("react-assessment", function(){
return browserify("./app/assessment/react/components/app.react.js")
.transform(babelify)
.bundle()
.pipe(source("reactBundle.js"))
.pipe(gulp.dest("./browser"))
});
コンポーネントはクライアント上で正常に動作します:
var React = require("react");
var ReactDOM = require("react-dom");
var Title = React.createClass({
render: function(){
return <h1>Hello World</h1>
}
});
module.exports = ReactDOM.render(
<Title/>,
document.getElementById("react-assessment")
);
ただし、Express で Node.js のファイルを要求すると、予期しないトークンでサーバーがクラッシュします
return <h1>Hello World</h1>
^
SyntaxError: Unexpected token <
コンポーネント ファイルの先頭で使用する古い方法を使用/** @jsx React.DOM */した場合、問題はありませんでした。
ルート：
var express = require('express'),
router = express.Router(),
ReactDOMServer = require("react-dom/server");
JSX = require('node-jsx').install({
extension: '.jsx'
}),
AssessmentComponent = require("../react/components/app.react.jsx");
どこが間違っていますか？