能否不使用Node.js的前提下搭配使用React与Express？

首先要明确两个技术的底层依赖逻辑：

• Express 是专门为 Node.js 设计的后端 Web 框架，底层依赖 Node.js 的 HTTP、文件系统等核心 API，无法脱离 Node.js 环境单独运行。
• 通常认知里的「React 依赖 Node.js」，实际是指 create-react-app、Vite 等常用的 React 脚手架、构建工具需要 Node.js 支持，React 本身作为前端 UI 库，可以直接通过 CDN 引入在浏览器端运行，不需要 Node.js 环境。

如果你的需求是「React 端不使用 Node.js 工具链，和运行在 Node.js 上的 Express 后端配合开发」，是完全可以实现的，下面是具体实现方案和示例。

1. 搭建 Express 后端服务（必须运行在 Node.js 环境） #

这部分是 Express 的强制要求，没有替代运行环境，操作步骤如下：

• 初始化项目并安装依赖

npm init -y
npm install express cors

• 编写服务入口文件 app.js

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

// 允许跨域，方便前端调用接口
app.use(cors());
app.use(express.json());

// 示例接口：返回用户列表
app.get('/api/users', (req, res) => {
  res.json([
    { id: 1, name: '张三', age: 24 },
    { id: 2, name: '李四', age: 27 }
  ]);
});

app.listen(port, () => {
  console.log(`Express 服务运行在 http://localhost:${port}`);
});

• 启动服务

node app.js

2. 编写无 Node.js 依赖的 React 前端代码 #

不需要任何构建工具，直接创建一个静态 HTML 文件，通过 CDN 引入所需运行时即可，代码示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>无Node.js React + Express 示例</title>
  <!-- 引入 React 核心库 -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!-- 引入 ReactDOM 用于渲染到浏览器 -->
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- 引入 Babel 用于浏览器端实时编译 JSX 语法 -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <!-- React 挂载节点 -->
  <div id="root"></div>

  <script type="text/babel">
    function App() {
      const [userList, setUserList] = React.useState([]);

      // 组件挂载时调用 Express 接口获取数据
      React.useEffect(() => {
        fetch('http://localhost:3001/api/users')
          .then(res => res.json())
          .then(data => setUserList(data))
          .catch(err => console.error('接口请求失败：', err));
      }, []);

      return (
        <div style={{ padding: '20px' }}>
          <h1>用户列表</h1>
          {userList.length === 0 ? (
            <p>加载中...</p>
          ) : (
            <ul>
              {userList.map(user => (
                <li key={user.id}>
                  姓名：{user.name}，年龄：{user.age}
                </li>
              ))}
            </ul>
          )}
        </div>
      );
    }

    // 渲染组件到页面
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  </script>
</body>
</html>

把上述代码保存为 index.html 后直接双击打开即可运行，全程不需要 Node.js 参与 React 端的开发、构建流程。

3. 效果验证 #

• 确认 Express 服务正常启动，访问 http://localhost:3001/api/users 可以正常返回数据
• 直接打开静态 HTML 文件，即可看到 React 渲染的、从 Express 接口拉取的用户列表

• 完全脱离 Node.js 运行整套技术栈是不可能的，Express 没有 Node.js 以外的可用 runtime
• 上述前端方案仅适合小型项目或者 Demo 开发，生产环境还是推荐用 Node.js 工具链构建 React 项目，可以实现代码压缩、按需加载等优化，运行性能和稳定性更好

内容的提问来源于stack exchange，提问作者Som