使用 express 和 es6 渲染 react 和 jsx 服务端

Posted 2023-02-22

【中文标题】使用 express 和 es6 渲染 react 和 jsx 服务端

【英文标题】：Using express and es6 to render react and jsx server side

【发布时间】：2017-06-30 02:49:46

【问题描述】：

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

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

SyntaxError: express.js: Unexpected token (10:41)

而有问题的行是：

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

这是我的package.json：

  "name": "s-s-rReact",
  "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 组件提供服务，我需要进行哪些更改？

感谢您的帮助。

【参考方案1】：

我的两分钱，做：

npm i -D babel-preset-react

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

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

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

【讨论】：

还有其他解决方案吗，因为babel-node 似乎不适合生产：babeljs.io/docs/en/babel-node

这只是用于开发，如果你想用于生产，只需使用 babel 编译它，然后运行 ​​nodemon 之类的 babel src --out-dir lib && nodemon lib/MyEntryFile.js