Question

我正在尝试学习如何使用express创建Web应用程序，但是，我并不真正了解它如何向客户端发送数据以及应该表达的内容。我认为express应该向客户端发送数据然后客户端应该根据发送的数据显示UI。现在我正在尝试使用reactDOMServer从express表示反应组件，但我遇到了一个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）

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

express做什么？（将静态html文件发送到客户端，然后自己进行交互？路由？）以及如何将反应组件发送到客户端？
我上面的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预设设置混淆（如舞台 - *）

在节点8上测试

反应和表达app不允许jsx

1 个答案: