如何在HTML JavaScript应用中渲染React打包应用？

1. 添加React挂载的根DOM节点 #

你的HTML里缺少React用来渲染应用的根容器，需要在<body>中添加一个带id的div，同时修正script标签的写法（HTML中script标签不推荐使用自闭合格式）：

<html>
  <head></head>
  <body>
    <h1>Bundle Testing</h1>
    <p>
      Here it comes:
    </p>
    <!-- React应用的挂载根容器 -->
    <div id="root"></div>
    <script src="bundle.min.js"></script>
  </body>
</html>

2. 确保React代码包含挂载逻辑 #

你的React应用必须有将根组件挂载到上述#root节点的代码，否则bundle执行后不会渲染任何内容：

• 若使用React 17及以下版本，添加以下代码到你的入口文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // 你的根组件文件

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

• 若使用React 18及以上版本，改用createRoot方式：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

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

注意：如果你的原始React项目（比如create-react-app创建的）已有这段代码，要确保webpack打包时将其包含在bundle中。

3. 检查webpack配置的潜在问题 #

• 你的entry配置是读取build/static下的main.*文件，需确认这些文件包含完整的React应用逻辑（包括上述挂载代码），否则二次打包后的bundle会缺失核心渲染逻辑。
• 建议调整output路径，比如直接输出到dist/bundle.min.js，避免路径层级混乱，方便后续复制文件。

4. 验证文件路径 #

确保bundle.min.js和index.html在同一目录下，或script标签的src属性指向正确的文件位置。

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