为你的 React 应用程序设置 Node.js 后端

将 React 前端与 Node.js 后端相结合是构建全栈 Web 应用程序的常见且功能强大的设置。Node.js 为服务器端开发提供了强大的环境，使您能够有效地处理 API、身份验证和数据库操作。在本指南中，我们将逐步介绍如何为您的 React 应用程序设置 Node.js 后端。

**先决条件**

在开始之前，请确保您已安装以下软件：

Node.js：从 nodejs.org 下载。

npm 或 yarn：与 Node.js 捆绑在一起。

对 JavaScript、React 和 Node.js 有基本的了解。

**步骤 1：初始化你的 Node.js 后端**

**1. 创建新目录：**

mkdir react-node-app
cd react-node-app

**2. 初始化 Node.js 项目：**

npm init -y

这将生成一个具有默认设置的“package.json”文件。

**3. 安装 Express.js：**

Express 是一个用于构建 `Node.js` 应用程序的轻量级框架。

npm install express

**步骤 2：设置 Express 服务器**

**1. 创建一个 index.js 文件：**

在您的项目目录中，创建一个名为“index.js”的文件。

**2. 编写基本服务器代码：**

const express = require('express');  
const app = express();  
const PORT = 5000;  

app.get('/', (req, res) => {  
    res.send('Backend is running!');  
});  

app.listen(PORT, () => {  
    console.log(`Server is running on http://localhost:${PORT}`);  
});

**3. 运行服务器：**

使用以下命令启动服务器：

node index.js

在浏览器中访问“http://localhost:5000”以查看响应。

**步骤 3：连接 React 前端**

**1.创建一个 React 应用程序：**

在同一目录中，使用 create-react-app 或 `Vite` 来设置前端。

npx create-react-app client  
cd client

**2. 运行 React 应用程序：**

启动 React 开发服务器：

npm start

您的 React 应用程序将在 `http://localhost:3000` 上运行。

**步骤 4：配置 API 调用的代理**

要从 React 向 Node.js 后端发出 API 请求，请在 React 应用程序中配置代理。

**1. 在 package.json 中添加代理：**

在 React 应用程序的 `package.json` 中，添加以下内容：

"proxy": "http://localhost:5000"

**2. 在 React 中发起 API 调用：**

示例：从 Node.js 服务器获取数据。

import React, { useEffect, useState } from 'react';  

function App() {  
    const [message, setMessage] = useState('');  

    useEffect(() => {  
        fetch('/')  
            .then((res) => res.text())  
            .then((data) => setMessage(data));  
    }, []);  

    return {message};  
}  

export default App;

**步骤 5：添加 API 端点**

使用自定义 API 端点增强您的后端。

**1. 更新index.js：**

app.get('/api/data', (req, res) => {  
    res.json({ message: 'Hello from the backend!' });  
});

**2. 更新 React 以获取数据：**

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

**步骤 6：连接到数据库（可选）**

为了使后端更加动态，请连接到 MongoDB 之类的数据库。

**1. 安装 MongoDB 驱动程序或 Mongoose：**

npm install mongoose

**2. 设置数据库连接：**

更新你的 index.js 文件：

const mongoose = require('mongoose');  

mongoose.connect('your-mongodb-uri', { useNewUrlParser: true, useUnifiedTopology: true })  
    .then(() => console.log('Database connected!'))  
    .catch((err) => console.log(err));

**第 7 步：部署您的应用程序**

**1. 在 Heroku 或 Render 上部署后端：**

使用 Heroku 或 Render 等平台来托管 Node.js 后端。

**2. 在 Vercel 或 Netlify 上部署 React：**

Vercel 或 Netlify 等平台非常适合部署 React 应用程序。

**结论**

为 React 应用程序设置 Node.js 后端可提供强大的全栈开发环境。按照本指南操作，您将拥有构建可扩展且高性能 Web 应用程序的坚实基础。后端到位后，您可以扩展应用程序以包含身份验证、实时更新和数据库集成等功能。

开始编码并让你的全栈项目焕发生机！🚀

CLIS.CC

为你的 React 应用程序设置 Node.js 后端