将 React 前端与 Node.js 后端相结合是构建全栈 Web 应用程序的常见且强大的设置。 Node.js 为服务器端开发提供了强大的环境，使您能够有效地处理 API、身份验证和数据库操作。在本指南中，我们将逐步为您的 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 <div>{message}</div>;
}
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：
mkdir react-node-app cd react-node-app
2。设置数据库连接：
更新你的index.js文件：
npm init -y
第 7 步：部署您的应用程序
1。在 Heroku 或 Render 上部署后端：
2。在 Vercel 或 Netlify 上部署 React：
结论
为 React 应用程序设置 Node.js 后端可提供强大的全栈开发环境。通过遵循本指南，您将为构建可扩展且高性能的 Web 应用程序奠定坚实的基础。后端就位后，您可以扩展应用程序以包含身份验证、实时更新和数据库集成等功能。
开始编码并将您的全栈项目变为现实！ ？
以上是为您的 React 应用程序设置 Node.js 后端的详细内容。更多信息请关注PHP中文网其他相关文章！
