使用带有 ReactJS 前端的 nodeJS 服务器的问题答案

【问题标题】：Problems using a nodeJS server with a ReactJS front-end使用带有 ReactJS 前端的 nodeJS 服务器的问题
【发布时间】：2018-02-18 06:02:40
【问题描述】：

我在这里的第一篇文章，我在大学有一个项目，我必须使用 reactJS 作为界面和 nodeJS 作为服务器创建一个网站。

问题是我已经阅读了很多教程，但似乎无法使其工作：

我按照教程使用了 Express，我可以设置一个服务器（例如在本地主机 8080 上，然后在页面中编写一些 html 代码），但是我无法在我的 react 项目中显示我想要的页面。我真的很难理解如何做到这一点，因为我读过的教程只允许我显示 html 页面。我必须将 reactJS 代码集成到 html 文件中吗？

对不起，英语不好顺便说一句

这里是存储库：https://github.com/NGYMich/miloscollection

这是我尝试使用 express 时遇到的错误：

× TypeError：对象原型可能只是一个对象或空：未定义 ./node_modules/express/lib/request.js C:/Users/CRYSTA/projet_l3ad2/node_modules/express/lib/request.js:31 28 | * @上市 29 | */ 30 |

31 | var req = Object.create(http.IncomingMessage.prototype) 32 | 33 | /** 34 | * 模块导出。

【问题讨论】：

你好，欢迎加入堆栈。您需要更具体一些，例如显示错误消息、预期结果、意外结果等。您是否为前端尝试过 github.com/facebook/create-react-app？
谢谢！那么我们已经开始了这个项目，我应该回去为这个项目创建一个新的存储库吗？我的老师告诉我清理存储库，所以我真的不知道如果我使用你的链接我可以/应该删除哪些文件（我编辑了我的原始帖子以链接我的文件夹）
不，使用 create-react-app 命令行实用程序搭建一个新项目，并以此为指导了解基本的 React 应用程序应该如何工作

标签： node.js reactjs server

【解决方案1】：

假设您使用的是 Express，并且您已经使用 webpack 之类的东西将您的 React 代码打包到一个包中，您只需要在对后端不匹配的任何请求中提供一个带有该包的 HTML 页面API 路由。所以，基本上你只需要：

const app = express();

// declare other API routes...

app.get('*', (req, res) => {
        res.sendFile('index.html');
});

index.html 是一个指向你的包的 HTML 文件。如果您不熟悉 webpack，请查看 Facebook 的 Create React App 以获取完整管道的示例。

【讨论】：

感谢您的回答！是的，这行得通，但是我在这里真的很愚蠢，如何将 reactJS 组件放入 html 中？顺便说一句，这是我的存储库，刚刚编辑了我的帖子github.com/NGYMich/miloscollection
你需要在你的 html 中包含一个 script 标签，指向你的 bundle。所以在body 标签的末尾，你会放一些类似<script src="/path/to/my/bundle.js"></script>
谢谢我想通了.. 但我似乎无法找到包含脚本标签后如何显示我的反应组件.. <!DOCTYPE HTML> <html> <body> <h1> Hello everyone <script src="Main.js"></script> </body> </html> 看起来像这样