同构 React 和 JSX - 在服务器上将组件呈现为字符串答案

【问题标题】：Isomorphic React and JSX - rendering component as string on server同构 React 和 JSX - 在服务器上将组件呈现为字符串
【发布时间】：2015-10-24 13:09:59
【问题描述】：

我试图在传递给客户端之前在服务器上渲染一个非常简单的组件，使用 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");

我哪里错了？

【问题讨论】：

您是否尝试将 require('node-jsx').install({extension: '.jsx'}) 放在 require 语句的最顶部？我相信这个模块会拦截 require 调用......所以它需要首先
感谢您的评论。我使用了 babel/register，所以不再需要 node-jsx。

标签： node.js reactjs react-jsx isomorphic-javascript

【解决方案1】：

通过使用 babel/register 解决。不需要 React.DOM

【讨论】：