【问题标题】：How to add ReactJS to existing node.js backend app如何将 ReactJS 添加到现有的 node.js 后端应用程序
【发布时间】：2018-02-15 09:21:44
【问题描述】：

我有一个非常简单的 node.js API

结构：

| project-name
|  public
|     index.html
|     ... some static js/css
|  app.js
|  package.json

app.js

var express = require('express'),
  bodyParser = require('body-parser'),
  http = require('http');

var app = module.exports = express();
app.set('port', process.env.PORT || 8000);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(express.static(path.join(__dirname, 'public')));

app.route('/api/projects').get(...).post(...)
app.route('/api/sales').get(...).post(...)

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// Starting express server
http.createServer(app).listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

运行服务器 - node app.js

注意：这是一个学习项目，不用于生产。我只是想弄清楚这一切是如何协同工作的。

现在我想将ReactJS 添加到这个项目（实际上是public/index.html）。但我仍然想使用app.js 使用它的 api 运行服务器，使用相同的端口。

我知道如何进行“生产构建”（将所有 jsx 编译为 js 并用作简单脚本）。我的问题只是关于开发服务器。

我想要：

仅使用一个命令（node app.js 或 nodemon app.js 等）运行服务器 (api) 和客户端 (reactjs)
在脚本更改后自动重新加载（似乎nodemon 可以做到）

【问题讨论】：

我建议你看看this post。它几乎解释了您要学习的所有内容。
@bennygenel 谢谢！很棒的文章

标签： javascript node.js reactjs express

【解决方案1】：

要使两者都使用单个命令运行，您可以添加如下命令：

"start": "cross-env NODE_ENV=development npm run webpack --env.browser && cross-env NODE_ENV=development npm run webpack -- --env.server && NODE_ENV=development node compiled/server.dev.js",

然后运行命令npm run start

要查看所有目录更改，您应该在 nodemon.json 文件中添加目录名称，例如：

{
    "verbose": false,
    "watch": [
      "app/utils",
      "app/routes.jsx",
      "server",
      "webpack"
    ],
    "exec": "npm run start && node server.dev.js"
}

【讨论】：

【解决方案2】：

以纯 HTML 安装 React（快速方式，仅限开发模式）

这不是用于生产的解决方案，但它适用于第一次测试 - 只需将 react 和 babel（用于 JSX）添加到您的 index.html

// index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="/client/app.jsx" type="text/babel"></script>

现在你可以试试react:

// app.jsx
var App = React.createClass({
  render: function() {
    return (
      <div className="app">
      Hello, world!
      </div>
    );
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

但在这种情况下，您不能使用通过npm 安装的软件包（不能使用import XXX from "YYY"; 构造），您必须通过<script> 标签包含它们（如上面的react 和react-dom）

使用 NodeJs (CLI) 安装 React

通过这种方式，您可以分别运行前端和后端，但将文件放在一起。

Express 和 React 文件位于同一台机器上，Express 有双重职责：它服务于 React 文件，也服务于 API 请求。

https://daveceddia.com/create-react-app-express-production/

要使用 CLI 安装 React，您还需要安装 NodeJS。

【讨论】：