使用express和es6来渲染反应和jsx服务器端
我试图连接一个最小的概念certificate来渲染一个单一的React组件服务器端。
当我运行我的应用程序,我得到一个错误:
SyntaxError: express.js: Unexpected token (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组件,我需要更改哪些内容?
谢谢您的帮助。
我的两分钱,做:
npm i -D babel-preset-react
并将您的运行脚本更改为:
"scripts": { "start": "nodemon express.js --exec babel-node --presets es2015,stage-2,react" },
为了parsingjsx,你需要安装babel-preset-react