如何用最少文件在HTML中渲染React组件并解决不显示问题

现有代码无法渲染React组件，核心是三个缺失点：

• index.html中没有通过<script>标签引入index.js文件，渲染逻辑根本没有被页面加载
• 浏览器原生不支持import React from "react"这类npm包导入语法，未配置解析规则的依赖无法被浏览器定位加载
• JSX是React的扩展语法，浏览器无法直接解析，必须经过转译才能正常执行

按文件数量从少到多可选以下方案，所有方案都不需要本地安装Node.js、不需要提前跑构建流程，用户拿到文件直接双击即可打开运行。

方案1：单文件交付（仅1个index.html，接入成本最低） #

所有依赖和逻辑全部内联到单个HTML文件中，不需要额外的JS文件，适合组件体量小、需要最快接入的场景。

<!DOCTYPE html>
<html>
<head>
  <title>hello world</title>
  <!-- 加载React运行时依赖 -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script 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>
  <div>hello world</div>
  <p>trying to load a react component</p>
  <div id="root"></div>

  <!-- 脚本标签必须加type="text/babel"，Babel才会处理JSX语法 -->
  <script type="text/babel">
    const { createRoot } = ReactDOM;
    const Component = () => <div>hello this is literally react. not a joke LOL</div>;
    createRoot(document.getElementById("root")).render(<Component />);
  </script>
</body>
</html>

提示：浏览器端转译仅适合演示、轻量组件场景，生产环境使用可提前将JSX转译为原生JS，即可移除Babel依赖，进一步提升加载速度。

方案2：双文件交付（保留index.html + index.js结构） #

如果需要把组件逻辑拆分到独立JS文件，只需要补全依赖引入、调整JS代码的依赖获取方式即可。
修改后的index.html：

<!DOCTYPE html>
<html>
<head>
  <title>hello world</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div>hello world</div>
  <p>trying to load a react component</p>
  <div id="root"></div>
  <!-- 引入同目录下的index.js，类型标记为text/babel -->
  <script type="text/babel" src="./index.js"></script>
</body>
</html>

修改后的index.js：

// 移除npm形式的导入，直接从全局作用域获取ReactDOM方法
const { createRoot } = ReactDOM;

const Component = () => {
  return <div>hello this is literally react. not a joke LOL</div>;
};

const root = createRoot(document.getElementById("root"));
root.render(<Component />);

两个文件放在同一目录下，直接打开HTML即可正常渲染组件。如果需要完全离线使用，只需要把三个依赖的JS文件下载到本地，修改script标签的src为本地路径即可。

生产环境优化 #

如果需要交付给生产环境使用、不想依赖外部资源，可以用esbuild、rollup等轻量构建工具，提前把React组件和依赖打包为单个原生JS文件，最终用户只需要引入1个JS文件即可使用组件，不需要额外加载Babel等依赖，甚至可以把JS内联到HTML中实现单文件交付。

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