当我们使用 ReactJS 和 NodeJS 时，有两个运行端口的目的是什么？

Question

我刚开始作为前 .Net 开发人员学习 MERN Stack 开发。我想发展我在这方面的技能，经过大量研究后，我无法弄清楚为什么在使用 react js 时需要有两个不同的运行端口/应用程序？

首先，我使用 NodeJS、Express、EJS 视图引擎开发了一些简单的应用程序，并将其部署到 Heroku。到目前为止，这对我来说很好用。我以后可以使用包括 MonoDb 在内的这些技术开发我所有的个人网站。但是为了成为完整的 MERN Stack 开发人员，我开始搜索 React 并意识到它只能像客户端应用程序一样提供另一个端口来分离它。为什么我们不能在一个端口下使用 react 和所有其他东西？

当我看到两个不同的网页时，这让我感到困惑； http://localhost:5000/ (React App) http://localhost:3000/ (服务器端：使用 EJS 打开我给的不同 html)

显然，如果我们在 react 的 package.json 文件中提供与服务器（3000）相同的端口号，那么它会给出以下警告；

有些东西已经在端口 3000 上运行了。 npm run client 以代码 0 退出

是因为 ReactJS 的性质吗？

Answer 1

您完全可以在单个端口上运行React和运行Node- 但这并不能实现高效的工作流程。

您问题的核心答案在于将前端路由与后端路由分开。
使用React Router您的应用程序时，根据 URL 参数管理 UI。

IE
http://localhost:3000/some-ui-path

同时，当Node用作后端来响应 HTTP 请求时 - 您将请求发送到特定的 URL 路径。

IE
http://localhost:3000/some-api-path

轻松地分离端口可以让您区分哪些路由应该React Router在前端处理，哪些路由应该被定向到Node后端。

http://localhost:3000/some-ui-path= 反应路由
http://localhost:9000/some-api-path= 节点 HTTP 路由

在您的配置文件中，您可以自定义前端和后端设置，以便对特定路径的任何请求都将重定向到您的节点服务器。

一个例子：

你可以定义任何以 为前缀的路径/api/都应该被代理到端口9000：
http://localhost:3000/api/some-api-path ==> http://localhost:9000/some-api-path

你可以用你喜欢的任何端口，但3000 5000并9000是由入门套件和模块捆扎机等中常见的默认值create-react-app和webpack

希望这会有所帮助，如果我可以进一步解释，请告诉我！