反应和表示不允许jsx的应用程序

我正在尝试学习如何使用快递制作networking应用程序，但是，我并不真正了解如何将数据发送到客户端，以及快递应该做什么。 我有一个印象，表示应该发送数据到客户端，然后客户端应该根据发送的数据显示UI。 现在我正在尝试使用reactDOMServer来显示一个反应组件，但是我遇到了一个jsx错误：

 res.send(ReactDOMServer.renderToString(<root />)) SyntaxError: Unexpected token < 

我知道这篇文章，并试图安装babel的jsx，但它仍然给我这个错误。

这是我的app.js：

 const express = require("express") const React = require("react") const ReactDOMServer = require("react-dom/server"); const root = require("./public/root.js"); const app = express(); app.get("/", (req, res) => { res.send(ReactDOMServer.renderToString(<root />)) }) app.listen(3000, () => { console.log("running on port 3000") }) 

root.js

 const React = require("react"); module.export = class root extends React.Component{ render(){ return( <div>Hello world from react</div> ) } } 

的package.json：

 { "name": "myproject", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "nodemon app.js --exec babel-node --presets es2015,stage-2,react" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.16.2", "koa": "^2.3.0", "koa-router": "^7.2.1", "koa-static": "^4.0.1", "koa-static-server": "^1.3.2", "react": "^16.0.0", "react-dom": "^16.0.0", "react-dom-server": "0.0.5" }, "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2016": "^6.24.1", "babel-preset-react": "^6.24.1" } } 

注意：这是一个实验项目，所以有很多不必要的包（koa）

为了简单起见，我的问题是：

1. 什么expression呢？（发送静态html文件到客户端，然后自己进行交互？路由？）以及如何发送一个反应组件到客户端？
2. 我上面的jsx问题

新问题（Ryan）：

  res.send(renderToString(<Root />)) ^ SyntaxError: Unexpected token < at createScript (vm.js:80:10) at Object.runInThisContext (vm.js:139:10) at Module._compile (module.js:588:28) at Object.Module._extensions..js (module.js:635:10) at Module.load (module.js:545:32) at tryModuleLoad (module.js:508:12) at Function.Module._load (module.js:500:3) at Function.Module.runMain (module.js:665:10) at startup (bootstrap_node.js:187:16) at bootstrap_node.js:608:3 

Answer 1

我用最新的语法更新了你的代码，请试试看

root.js

 const React = require("react"); export default class Root extends React.Component { render(){ return ( <div> Hello world from react </div> ) } } 

app.js

 const express = require("express") const React = require("react") const renderToString = require("react-dom/server").renderToString const Root = require("./public/root").default const app = express(); app.get("/", (req, res) => { res.send(renderToString(<Root />)) }) app.listen(3000, () => { console.log("running on port 3000") }) 

package.json

 { "name": "myproject", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "nodemon app.js --exec babel-node" }, "author": "", "license": "ISC", "dependencies": { "ejs": "^2.5.7", "express": "^4.16.2", "nodemon": "^1.12.1", "react": "^16.0.0", "react-dom": "^16.0.0" }, "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1" } } 

.babelrc – 将这个文件添加到你的项目，它更干净，更容易

 { "presets": [ "react", ["env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } }] ] } 

此设置使用babel-present-env来防止babel预设设置的混淆（如stage- *）

在节点8上testing