当前位置：首页 > React

nodejs 如何架构react

2026-02-26 06:41:19React

Node.js 架构 React 应用的方法

使用 Node.js 架构 React 应用通常涉及构建工具链、服务端渲染（SSR）或 API 集成。以下是几种常见方法：

使用 Create React App (CRA) 与 Node.js 后端分离

React 前端通过 create-react-app 初始化，Node.js 作为独立后端提供 API 服务。前端通过 HTTP 请求与后端通信。

安装 React 前端：

npx create-react-app my-app
cd my-app
npm start

Node.js 后端示例（Express）：

const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from Node.js!' });
});
app.listen(3001, () => console.log('Server running on port 3001'));

服务端渲染 (SSR) 使用 Next.js

Next.js 是基于 React 的框架，内置 Node.js 服务端渲染支持。无需手动配置 SSR，适合需要 SEO 优化的场景。

初始化 Next.js 项目：

nodejs 如何架构react

npx create-next-app@latest

运行开发服务器：

npm run dev

自定义 Webpack 配置集成

手动配置 Webpack 和 Babel 将 React 与 Node.js 结合，适合需要高度定制的场景。

安装基础依赖：

nodejs 如何架构react

npm install react react-dom webpack webpack-cli babel-loader @babel/preset-react @babel/preset-env --save-dev

示例 webpack.config.js：

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: { loader: 'babel-loader' }
    }]
  }
};

Express 集成 React

在 Express 中直接托管 React 构建文件，实现全栈应用。

构建 React 生产文件：

npm run build

Express 服务静态文件：

const path = require('path');
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});