react和express应用程序不允许jsx

Question

我正在努力学习如何使用express制作web应用程序，但是，我并不真正理解它如何将数据发送到客户端，以及express应该做什么。我的印象是，express应该将数据发送到客户端，然后客户端应该根据发送的数据显示UI。现在，我正在尝试使用reactDOMServer呈现一个来自express的react组件，但是我遇到了一个jsx错误，它说：

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

SyntaxError: Unexpected token <

我知道this的帖子，并尝试安装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. 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-*)

在节点8上测试