node.js - react 和表达应用程序不允许jsx

Question

我正在尝试学习如何使用express制作网络应用程序，但是，我并没有真正理解它如何将数据发送到客户端以及express应该做什么。我的印象是，express 应该将数据发送到客户端，然后客户端应该根据发送的数据显示 UI。现在我正在尝试使用 reactDOMServer 从 Express 渲染一个 React 组件，但我遇到了一个 jsx 错误:

res.send(ReactDOMServer.renderToString(<root />))

SyntaxError: Unexpected token <

我知道this发布并尝试为 jsx 安装 babel，但它仍然给我这个错误。

这是我的 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. express 的作用是什么？(将静态 html 文件发送到客户端，然后客户端自行交互？路由？)以及如何将 React 组件发送到客户端？
2. 上面是我的 jsx 问题

新问题(瑞安):

  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-*)的困惑

在 Node 8 上测试