如何将 ReactJS 与 expressJS 集成答案

【问题标题】：How to integrate ReactJS with expressJS如何将 ReactJS 与 expressJS 集成
【发布时间】：2017-01-07 16:50:03
【问题描述】：

首先，我是 ReactJS 的新手。我已经根据以下链接完成了简单的 reactjs 项目。 http://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm 我可以通过运行“npm start”完美地运行和测试。但是，当我尝试与 expressJs 集成为编辑/开发如下编码时，我根本无法渲染。

包.json

  "scripts": {
    "start": "node server.js"
  }

server.js

var express = require('express');
var path = require('path');

var app = express();

var isProduction = process.env.NODE_ENV === 'production';
var port = isProduction ? process.env.PORT : 3000;
var publicPath = path.resolve(__dirname, '/');

// We point to our static assets
app.use(express.static(publicPath));
console.log(publicPath)

// And run the server
app.listen(port, function () {
  console.log('Server running on port ' + port);
});

每当我渲染为“npm start”时，遇到如下。

无法获取/

【问题讨论】：

标签： node.js express reactjs

【解决方案1】：

使用 express js 创建一个 api，为您提供 index.html 页面

app.get("/", function(req, res){
    res.sendFile(dirname + "index.html");
})

在这种情况下，您将能够呈现您的页面。

【讨论】：

【解决方案2】：

@Shubham Khatri 提到的是正确的，但会有一个问题。如果您在 React 应用程序中定义了任何路由，即 http://appDomain.com/products 或 http://appDomain.com/blog 或 http://appDomain.com/articles 将不起作用。

原因是，您没有在 Express 应用程序中为这些 定义任何路由处理程序（就像您为 root / 所做的那样）。

如果您愿意以 Express 作为后端服务器运行 React 应用程序，那么您可能需要在单独的端口上运行 Express 应用程序，即 7070。

您的 React 应用程序可以在单独的端口（即 8080）上单独运行。 React 应用程序可以进一步与 Express 定义的 Routes、Urls 作为 API 端点进行通信以获取数据。

如需更多详情/讨论，请参阅此帖子： ReactJS, ExpressJS different application Architectures & Modeling and Deployments

【讨论】：