当前位置：首页 > React

express 如何调用react

2026-02-12 02:08:35React

Express 调用 React 的实现方法

Express 和 React 通常分别用于后端和前端开发。要将两者结合，可以通过以下方式实现：

使用 Express 作为 API 服务器

Express 可以作为独立的 API 服务器，React 应用通过 HTTP 请求与之交互：

// Express 服务器代码
const express = require('express');
const app = express();

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

app.listen(3001, () => {
  console.log('Express server running on port 3001');
});

React 组件中调用 Express API：

// React 组件代码
import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('http://localhost:3001/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data && <p>{data.message}</p>}
    </div>
  );
}

服务端渲染 (SSR) 方案

使用 Express 渲染 React 应用，实现服务端渲染：

// Express 服务器配置
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App').default;

const app = express();

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

app.listen(3000);

代理设置开发环境

开发环境中配置代理，避免跨域问题：

// React 项目的 package.json 中添加
{
  "proxy": "http://localhost:3001"
}

生产环境部署

构建 React 应用并将静态文件交由 Express 托管：

// Express 生产配置
const path = require('path');
const express = require('express');
const app = express();

app.use(express.static(path.join(__dirname, 'client/build')));

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

app.listen(process.env.PORT || 3000);