如何将 ReactJS 添加到现有的 node.js 后端应用程序

Question

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

结构：

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

应用程序.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可以做到）

Answer 1

以纯 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）

使用 NodeJ 安装 React (CLI)

通过这种方式，您可以单独运行前端和后端，但将文件保存在一起。

Express 和 React 文件位于同一台机器上，并且 Express 承担双重职责：它为 React 文件提供服务，并且还为 API 请求提供服务。

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

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