使用express和es6在服务器端渲染React和JSX

Question

我正在尝试编写一个最小的概念验证来在服务器端呈现单个React组件。

当我运行我的应用程序时，我会得到一个错误：

SyntaxError: express.js: 意外的令牌（10:41）

问题出在以下行：

> 10 |   res.send(ReactDOMServer.renderToString(<Component msg={msg} />));
     |                                          ^

这是我的package.json文件：

{
  "name": "ssrReact",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "nodemon express.js --exec babel-node --presets es2015,stage-2"
  },
  "dependencies": {
    "express": "^4.14.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "nodemon": "^1.11.0"
  }
}

这是我的Component.js文件：

import React from 'react';

class Component extends React.Component {
  render() {
    return <h1>Hello, {this.props.msg}</h1>;
  }
}

export default Component;

这是我的 express.js：

import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import Component from './Component';

const app = express();

function home (req, res) {
  const msg = req.params.msg || 'Hello';
  res.send(ReactDOMServer.renderToString(<Component msg={msg} />));
}

app.get('/', home);
app.get('/:msg', home);

app.listen(3333);

我需要修改什么才能让Express服务于一个React组件？

谢谢帮助。

- SeanPlusPlus

Answer 1

我的建议是：

npm i -D babel-preset-react

并将您的运行脚本更改为：

"scripts": {
    "start": "nodemon express.js --exec babel-node --presets es2015,stage-2,react"
  },

要解析jsx，您需要安装babel-preset-react。

- Fabio Antunes

---

有没有其他解决方案，因为 babel-node 似乎不适用于生产环境：https://babeljs.io/docs/en/babel-node - Tom Söderlund

那只是给开发者用的，如果你想要在生产环境中使用，请使用 Babel 进行转译，然后运行 Nodemon，命令类似于：babel src --out-dir lib && nodemon lib/MyEntryFile.js。 - Fabio Antunes