jsx 传递给 react-dom/server renderToString答案

【问题标题】：jsx passed to react-dom/server renderToStringjsx 传递给 react-dom/server renderToString
【发布时间】：2018-10-11 19:10:12
【问题描述】：

我正在尝试理解 react-dom/server。

我有一个 react 应用程序，使用 express 作为服务器。

我有一条这样的快速路线：

var server = app.listen(3000);
app.get('/test', (req, res) => {                       
  const context = {}
  const html = ReactDOMServer.renderToString(
      <h1>foo</h1>
  )  
  if (context.url) {
    res.writeHead(302, {
      Location: context.url
    })
    res.end()
  } else {
    res.write(html)
    res.end()
  }
});

如果我使用node app-server 运行服务器文件，我会收到此错误：

      <h1>adasd</h1>
      ^
SyntaxError: Unexpected token <

我根据那里的示例将 JSX 传递给了 renderToString： https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/StaticRouter.md

如何让 express server 文件处理这个 JSX 代码？

对于客户端，我使用带有 babel loader 的 webpack，它运行良好。

【问题讨论】：

还有babel babeljs.io/docs/plugins/preset-react（不需要webpack，babel就够了）
查看链接。但是你如何用我的例子做到这一点？我使用 node app-server.js 启动我的服务器。我不认为它会读取“.babelrc”文件，而且我提供的github链接中没有babel。
使用 babel 编译，然后运行编译好的代码。这是它唯一可以工作的方式，这正是 babel-loader 正在做的事情
谢谢！它在将代码粘贴到 babeljs.io（预设 es2015 和 react）中，并使用结果代码启动节点服务器后工作。
当然，但是使用 babel cli 而不是网站.. 否则为什么还要使用 jsx

标签： reactjs react-dom-server

【解决方案1】：

感谢@azium。

解决办法是先用 babel-cli 转换 ES6/JSX 文件。

我用过这个babel-cli command：

npx babel --no-babelrc script.js --out-file script-compiled.js --presets=es2015,react

npx 用于“执行 npm 包二进制文件”

【讨论】：