nodejs 如何架构react
使用 Node.js 架构 React 应用
Node.js 可以作为后端服务，与 React 前端结合构建全栈应用。以下是常见的架构方法：
创建 React 前端
使用 Create React App (CRA) 快速初始化前端项目：
npx create-react-app client对于更复杂的项目，可以考虑 Next.js：
npx create-next-app@latest设置 Node.js 后端
初始化 Node.js 项目并安装基础依赖：
mkdir server && cd server
npm init -y
npm install express cors创建基础 Express 服务器：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
app.get('/api', (req, res) => {
res.json({ message: 'Hello from Node.js!' });
});
const PORT = 5000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});连接前后端
在 React 中调用 Node.js API：
fetch('http://localhost:5000/api')
.then(response => response.json())
.then(data => console.log(data));项目结构建议
典型的全栈项目结构：
project-root/
├── client/ # React 前端
├── server/ # Node.js 后端
├── package.json # 根级脚本管理
└── README.md部署配置
在根目录 package.json 中添加联合启动脚本：
{
"scripts": {
"start": "concurrently \"cd server && npm start\" \"cd client && npm start\""
}
}需要安装并发运行工具：
npm install concurrently --save-dev高级架构选项
对于生产环境考虑：
-
使用 Express 静态中间件服务 React 生产构建
app.use(express.static(path.join(__dirname, '../client/build'))); -
设置代理避免 CORS 问题（开发环境） 在 client/package.json 中添加：
"proxy": "http://localhost:5000"
数据库集成
添加 MongoDB 等数据库支持：
npm install mongoose示例连接代码：
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/yourdb', {
useNewUrlParser: true,
useUnifiedTopology: true
});这种架构提供了清晰的关注点分离，前端使用 React 处理 UI，后端使用 Node.js 处理业务逻辑和数据持久化。根据项目规模，可以进一步考虑微服务架构或添加 GraphQL 层。
