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

Question

我有一个非常简单的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可以执行此操作）

Answer 1

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

NSWindow* window = [[NSWindow alloc] initWithContentRect:sheetFrame styleMask:NSWindowStyleMaskTitled backing:NSBackingStoreBuffered defer:NO]; window.backgroundColor = [NSColor clearColor]; window.titlebarAppearsTransparent = true; ，

然后运行命令"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"

要观察所有目录更改，您应该在nodemon.json文件中添加目录名，如：

npm run start

Answer 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>标记包含它们（例如{{1}和上面的react）

使用NodeJs（CLI）安装React

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

  

Express和React文件位于同一台机器上，Express具有双重功能：它提供React文件，并且还提供API请求。

     

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

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