如何将其他文件夹中的React应用嵌入静态HTML页面

直接引用React源码目录里的文件行不通——浏览器没法解析JSX语法，也无法自动加载组件依赖。你需要先把React应用打包成浏览器能识别的静态资源，再嵌入到目标HTML里，步骤如下：

1. 打包你的React聊天应用 #

假设你的React应用是用Create React App搭建的，在React应用的根目录下执行打包命令：

npm run build

执行完成后会生成一个build文件夹，里面包含编译好的静态文件（JS、CSS、资源文件等），这些是浏览器可以直接加载的生产环境代码。

2. 修改目标HTML页面 #

把打包后的资源引入到你的HTML里，同时编写渲染逻辑：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌入React聊天应用</title>
    <!-- 引入React应用打包后的CSS文件（注意替换[hash]为实际文件名中的哈希值） -->
    <link rel="stylesheet" href="./reactApp/build/static/css/main.[hash].css">
</head>
<body>
    <!-- React应用的挂载容器 -->
    <div id="html_container"></div>

    <!-- 引入React和ReactDOM的生产版本 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

    <!-- 引入React应用打包后的主JS文件（注意替换[hash]为实际文件名中的哈希值） -->
    <script src="./reactApp/build/static/js/main.[hash].js"></script>

    <!-- 渲染React应用 -->
    <script>
        // 如果你的App是默认导出，通过打包后的模块获取并渲染
        const root = ReactDOM.createRoot(document.getElementById('html_container'));
        root.render(React.createElement(App));
    </script>
</body>
</html>

关键说明 #

• 为什么要打包？：React源码里的JSX语法、ES模块导入都需要编译成浏览器能识别的普通JS，打包工具（比如webpack）会把所有组件依赖合并成几个静态文件，避免手动加载所有组件。
• 路径注意：确保HTML里引用的build文件夹路径正确，比如HTML在根目录、React应用的build在reactApp文件夹下，路径就是./reactApp/build/...。
• React 18适配：现在推荐使用ReactDOM.createRoot代替旧的ReactDOM.render；如果用React 17及以下，可改用ReactDOM.render(React.createElement(App), document.getElementById('html_container'))。

简化方案（推荐） #

如果你在React应用的src/index.js里已经写了渲染逻辑：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

那打包后只需把HTML里的挂载容器id改成root，或者把React应用里的挂载id改成html_container，引入打包后的JS文件后，应用会自动渲染，无需额外写渲染脚本。

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