为 React 应用程序创建一个简单的 Express 服务器（Node.js）
为 React 应用程序创建一个简单的 Express 服务器（Node.js）
— 您可能遇到的问题
千里之行始于脚下 — A thousand miles begins with a single step
一直想写一篇关于这个话题的文章，终于有时间了，这不是关于什么是 Node 什么是 Express ，我假设你已经安装了 Node.js 和 NPM。
Node.js 是一个开源、跨平台的运行时环境，允许开发人员使用 JavaScript 创建各种服务器端工具和应用程序。
Express 是最流行的 Node Web 框架，并且是许多其他流行的 Node Web 框架的底层库。
话不多说，让我们开始吧！
创建反应应用程序
首先，创建一个包含我们的 React 应用程序的目录，从终端导航到该目录并运行：
npx creat-react-app express-server-for-react
- 我命名了这个应用程序 express-server-for-react
如果你之前通过 npm install -g create-react-app 全局安装了 create-react-app，我建议你使用卸载包 npm 卸载 -g create-react-app 或者 yarn 全局删除 create-react-app 为了保证 npx 始终使用最新版本。
(* 如果您对包管理器感觉更好 纱 ，只需先安装它）
之后，与 npm 开始 或者 纱线开始 ，我们的初始反应应用程序应该开始 http://localhost:3000/
那很简单！ ⚡️
现在让我们设置 Node.js Express 服务器
- 创建一个 服务器.js 应用程序目录中的文件，这是我们将创建 Express 服务器的位置
App structure
2.安装 表达 和： npm install express - 保存 或者 纱线添加快递 , 你可以在里面看到 包.json 作为依赖
3.更新 服务器.js 包含以下代码的文件：
Create Express server within server.js
- 上面的代码首先需要 express 并允许我们使用它，然后我们设置我们的服务器将运行的端口（端口： 5000 ), *如果服务器运行良好，我们应该看到“ 控制台日志 ” 终端中的消息。
- 这 ” 应用程序.get(…) ” 行设 得到 将从我们的 React 应用程序前端获取的请求路由（“ /谁在那儿 ”），如果一切正常，我们应该稍后在我们的 React 应用程序中接收那些发送的数据： 一个字符串消息（“ 你好，我是来自 Express 后端的 LOLA ”）和我的小狗图像路径（定义为“ 图像路径 ”）。
好吧，让我们启动服务器，看看会发生什么！
在终端运行中：
**节点服务器.js**
如果一切正常，恭喜！您可以忽略以下步骤，但在这里我收到了我的第一个错误：
错误：监听 EADDRINUSE：地址已在使用 :::5000
我认为这是我们可能经常遇到的普遍问题，这是因为当我们尝试重新启动 Node.js 应用程序时，之前的应用程序没有正常关闭，我们需要 手动终止进程 .
➡️ 首先，找出哪个进程正在使用端口 5000，在终端中运行以下命令：
**_须藤 lsof -i :5000_**
-
这将列出所有 PID 监听这个端口，一旦你有了 PID， 您可以使用以下方法终止它：
杀死 -9 {PID} *使用 -9 选项确保进程立即终止
➡️ 但是在我的情况下，由于某种原因 macOS 进程一直在自动生成，运行这个命令应该可以修复它：
**_pkill 控制中心；数控-l 5000_**
- 这将杀死 ControlCenter 进程，然后启动一个空的 Netcat TCP 服务器，侦听 ControlCenter 正在使用的确切端口，因为 ControlCenter 在退出时会自动重新启动，所以当它启动时，它会检测到它的端口正在使用中。
服务器工作后，我们应该在终端控制台中看到这条消息：“ 应用程序监听 5000 端口 ”这是在我们的 服务器.js .
现在去 http://localhost:5000/whoisthere ，我们应该看到：
server is running on port 5000
到目前为止，我们已经完成了将近 70%！
从 React 应用程序获取服务器数据
首先，导航到文件 应用程序.js ，在其中创建一个获取请求，如下所示：
fetch express server data
修改 App.js 文件：
fetch data from server and render them in frontend
代码看起来不错，我期待在下面看到这个最终结果：
final result
但是不，什么都没有显示！我的第二个问题来了，看看控制台，错误打印如下：
CORS
为什么？因为出于安全原因，fetch API 遵循同源策略。这意味着使用 fetch API 的 Web 应用程序只能从加载应用程序的同一源请求资源，除非来自其他源的响应包含权限 CORS 标题。
在我们的例子中，本地主机： 3000 和本地主机： 5000 是两个独立的域，所以我们还不能跨它们发出请求。
最简单的解决方案：安装 CORS 库 并告诉服务器期待来自 localhost:3000 的请求，所以我们可以安装它：
**纱线加芯**
*这种方法非常简单，也可以在 package.json 中添加一个简单的代理，例如：“proxy”：“http://localhost:5000”
现在，最后一步，更新 服务器.js ，在下面添加：
_常量_ cors = 要求（“cors”）； 应用程序使用（ 科尔斯（{ 来源：'http://localhost:3000', }), );
就是这样！我们创建的简单 React 应用程序连接到我们的 Node.js Express 服务器，并使用漂亮的小狗图像将获取的数据呈现给前端。
这只是一个简单的示例应用程序，我们可以用 Node.js 做很多事情，让我们每天继续学习！如果您也对我的其他文章感兴趣，这里有一些链接，谢谢您的时间！
[
使用 React Context 将状态从子更新到父
— React Context 提供了一种通过组件树传递数据的方法，而无需在…
媒体网
[
使用会话存储在 React 组件中保持状态
sessionStorage 中的数据在页面会话结束时被清除。
javascript.plainenglish.io
[
边做边学——使用 Gatsby 创建您的第一个站点
婴儿步，是的。
javascript.plainenglish.io
](https://javascript.plainenglish.io/learn-by-doing-use-gatsby-to-create-your-first-site-af7bfb7a8a6f)
[
使用 gatsby-source-filesystem 和 GraphQL 获取 JSON 数据
学习盖茨比第 2 步
javascript.plainenglish.io
[
5 个你可以使用的 React Hook 库
一个小辈的建议——试一试。
javascript.plainenglish.io
](https://javascript.plainenglish.io/5-react-hook-libraries-you-could-use-d7f13066ebba)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
