当前位置：首页 > React

express 如何调用react

2026-01-23 22:05:11React

express 调用 React 的基本方法

Express 作为后端框架，可以通过服务端渲染（SSR）或静态文件托管的方式调用 React。以下是两种常见实现方式：

方法一：托管 React 静态文件

React 项目通过 npm run build 生成静态文件后，由 Express 托管：

构建 React 项目
在 React 项目目录下执行构建命令：
```
npm run build
```
生成 build 文件夹（包含静态资源）。

Express 托管静态文件
在 Express 应用中通过 express.static 中间件托管：

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

// 托管 React 的 build 文件夹
app.use(express.static(path.join(__dirname, 'client/build')));

// 其他 API 路由
app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from Express!' });
});

// 所有非 API 请求返回 React 应用
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

app.listen(3000, () => console.log('Server running on port 3000'));

方法二：服务端渲染（SSR）

使用 react-dom/server 在 Express 中直接渲染 React 组件：

express 如何调用react

安装依赖
确保安装 React 和 Express 相关包：
```
npm install express react react-dom
```

服务端渲染代码
创建一个简单的 Express 服务渲染 React 组件：

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App').default; // 假设有一个 App 组件

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(
    React.createElement(App)
  );
  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>SSR Example</title></head>
      <body>
        <div id="root">${html}</div>
      </body>
    </html>
  `);
});

app.listen(3000, () => console.log('SSR Server running on port 3000'));

方法三：集成现代框架（Next.js）

如果需要更完整的 SSR 支持，可直接使用 Next.js（内置 Express 集成）：

创建 Next.js 项目
```
npx create-next-app@latest
```

自定义 Express 服务器
在 server.js 中配置：

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, () => console.log('Next.js + Express running on port 3000'));
});