如

如何为 React 设置 Node.js Express 服务器

2025-05-27

如何为 React 设置 Node.js Express 服务器

React 是一个 JavaScript 库，用于构建用户界面并使用可重用的 UI 组件开发单页应用程序。React 用于构建可与后端服务器通信的前端应用程序。

对于您想要构建的任何应用程序来说，连接到 Node 后端的 React 前端都是坚如磐石的组合。

本指南旨在帮助您尽可能轻松地使用 React 创建全栈项目。

先决条件

  • 文本编辑器
  • 您的计算机上安装了 Node.js
  • 具备 React、Node 和 npm 的相关知识

您需要的工具

  1. 确保你的电脑上已安装 Node 和 NPM。你可以在nodejs.org下载这两个工具（NPM 已包含在你的 Node 安装包中）。
  2. 使用你选择的代码编辑器。我正在使用 VSCode，并且我个人推荐使用。你可以在code.visualstudio.com 下载 VSCode。
  3. 确保你的电脑上已安装 Git。你可以在git-scm.com下载。

步骤 1：后端

首先，创建项目的文件夹，将其命名为react-node-app，在文本编辑器中打开此文件夹

要创建我们的 Node 项目，请打开终端并运行以下命令

npm init -y
Enter fullscreen mode Exit fullscreen mode

通过运行此文件，您将看到我们的文件夹中已创建 package.json 文件，该文件将帮助我们管理应用程序所需的依赖项。

现在，在我们的终端中，我们将安装 express 作为依赖项

npm i express
Enter fullscreen mode Exit fullscreen mode

之后，我们将在 package.json 中创建一个脚本，当我们使用 npm start 运行它时，它将启动我们的 Web 服务器：

...
"scripts": {
  "start": "node server/index.js"
},
...
Enter fullscreen mode Exit fullscreen mode

我们的 package.json 文件应该是这样的

{
  "name": "react-node-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

现在，在我们的项目中创建一个新文件夹并将其命名为 server。
在 server 中创建 index.js 文件。

我们将使用 Express 为我们创建一个在端口 3001 上运行的简单 Web 服务器

// server/index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

我们现在可以在终端中使用此脚本npm start运行我们的应用程序

npm start

> node server/index.js

Server listening on 3001
Enter fullscreen mode Exit fullscreen mode

步骤 2：创建 API 端点

我们希望使用我们的 Node 和 Express 服务器作为 API，以便它可以为我们的 React 应用程序提供数据。

设置一个 GET 路由，稍后我们将从客户端 React App 中获取该路由。

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hello from Express!" });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

确保将其放在 app.listen 上方

在这里，我们只是向我们的 React 应用程序发送“Hello from Express”

由于我们对服务器进行了更改，因此必须重新启动服务器。
为此，请打开终端，按 commmand/ctrl + c，然后通过运行 npm start 重新启动服务器。

现在我们可以在浏览器中访问http://localhost:3001/api并查看我们的消息：

{“message”：“来自 Express 的问候”}

步骤 3：创建 React 前端

现在让我们转到前端部分

打开另一个终端选项卡并使用 create-react-app 创建一个名为 client 的新 React 项目：

npx create-react-app client
Enter fullscreen mode Exit fullscreen mode

设置代理

在此步骤中，当我们运行 create-react-app 命令时，Webpack 开发服务器会自动生成。

Webpack 开发服务器 (WDS) 是一种工具，可帮助开发人员对 Web 应用程序的前端进行更改并将其呈现到浏览器，而无需刷新浏览器。

我们唯一需要做的改变就是在 package.json 文件中添加一个名为 proxy 的属性。

这将允许我们向 Node 服务器发出请求，而无需在每次向其发出网络请求时提供其运行的来源（ http://localhost:3001 ）：

// client/package.json

...
"proxy": "http://localhost:3001",
...
Enter fullscreen mode Exit fullscreen mode

修改后的 package.json 文件将如下所示

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:3001"
}
Enter fullscreen mode Exit fullscreen mode

现在，我们可以通过运行启动脚本来启动 React 应用，该脚本与 Node 服务器相同。首先，请确保 cd 到新创建的客户端文件夹。

之后，将在 localhost:3000 上启动：

cd client
npm start

Compiled successfully!

You can now view client in the browser.

http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

步骤 4：从 React 向 Node 发出 HTTP 请求

现在我们有了一个可以运行的 React 应用程序，我们想使用它与我们的 API 进行交互。

让我们看看如何从我们之前创建的 /api 端点获取数据。

为此，我们可以转到 src 文件夹中的 App.js 组件并使用 useEffect 发出 HTTP 请求。

我们将使用 Fetch API 向后端发出一个简单的 GET 请求，然后将数据以 JSON 形式返回。

一旦我们收到返回的数据，我们将获取消息属性（获取我们从服务器发送的问候语），然后将其放入名为数据的状态变量中。

如果有的话，这将允许我们在页面中显示该消息。我们在 JSX 中使用了一个条件语句，表示如果数据尚未加载，则显示文本“正在加载...”。

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

结论

使用 Express 后端可以做很多事情，比如调用数据库，但在本指南中，我们专注于如何从客户端 React App 快速连接到后端 Express 服务器。

本指南中使用的代码片段和文件可在此处的 GitHub 存储库中访问。

如果你喜欢这篇文章，那么你可以给我买我的第一杯咖啡，谢谢

给我买杯咖啡

编码愉快！

文章来源：https://dev.to/pratham10/how-to-set-up-a-node-js-express-server-for-react-2fja
Devto 翻译
PREV
我如何使用 Python 自动化枯燥的大学生活
NEXT
React 2025 的推荐文件夹结构