react如何创建前后端分离

创建前后端分离的 React 项目

前端部分（React）

使用 create-react-app 或 Vite 初始化项目：

npx create-react-app my-app --template typescript
# 或
npm create vite@latest my-app -- --template react-ts

安装必要的依赖（如 Axios 用于 HTTP 请求）：

npm install axios

配置代理（开发环境）以避免跨域问题，在 package.json 中添加：

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

后端部分（Node.js/Express）

初始化 Node.js 项目：

mkdir server && cd server
npm init -y
npm install express cors body-parser

创建基础服务器（如 server.js）：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

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

const PORT = 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

前后端通信

前端通过 Axios 调用后端 API：

import axios from 'axios';

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

生产环境部署

前端部署 构建静态文件：

npm run build

可将生成的 build 文件夹部署到 Netlify/Vercel 或 Nginx 服务器。

后端部署 确保 Node 服务持续运行，可使用 PM2：

npm install pm2 -g
pm2 start server.js

跨域处理（开发环境）

若未使用代理，需在后端显式设置 CORS：

app.use(cors({
  origin: 'http://localhost:3000',
  methods: ['GET', 'POST']
}));

项目结构建议

my-project/
├── client/        # React 前端
├── server/        # Node.js 后端
└── package.json   # 根目录可放共享配置

环境变量管理

前端使用 .env 文件：

REACT_APP_API_BASE_URL=http://localhost:5000

后端使用 dotenv：

npm install dotenv

创建 .env：

PORT=5000
DB_URL=mongodb://localhost:27017/mydb