如何无需打包或转译直接在浏览器中使用React？

方案1：React ES模块 + htm库（替代JSX，无需转译） #

htm是轻量工具，支持用模板字符串编写类JSX语法，直接在浏览器运行，完全不需要转译或打包，还能兼容所有React Hook。

示例代码 #

<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import React from 'https://unpkg.com/react@18/umd/react.production.min.js';
    import ReactDOM from 'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js';
    import htm from 'https://unpkg.com/htm@3.1.1/dist/htm.module.js';

    // 绑定htm到React.createElement，生成类JSX的标签函数
    const html = htm.bind(React.createElement);

    function App() {
      const [count, setCount] = React.useState(0);
      React.useEffect(() => {
        document.title = `计数：${count}`;
      }, [count]);

      return html`
        <div>
          <h1>原生React应用</h1>
          <p>计数：${count}</p>
          <button onClick=${() => setCount(count + 1)}>点击+1</button>
        </div>
      `;
    }

    ReactDOM.render(html`<${App} />`, document.getElementById('root'));
  </script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

方案2：React ES模块 + 浏览器原生JSX（实验性特性） #

Chrome、Edge等现代浏览器支持实验性的原生JSX解析，无需转译，但需要开启浏览器特定标志：

• Chrome中打开chrome://flags/#enable-experimental-web-platform-features并启用该选项

示例代码 #

<!DOCTYPE html>
<html>
<head>
  <script type="importmap">
    {
      "imports": {
        "react": "https://unpkg.com/react@18/umd/react.production.min.js",
        "react-dom": "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
      }
    }
  </script>
  <script type="text/jsx">
    import React from 'react';
    import ReactDOM from 'react-dom';

    function App() {
      const [count, setCount] = React.useState(0);
      React.useEffect(() => {
        document.title = `计数：${count}`;
      }, [count]);

      return (
        <div>
          <h1>原生JSX React应用</h1>
          <p>计数：{count}</p>
          <button onClick={() => setCount(count + 1)}>点击+1</button>
        </div>
      );
    }

    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

注意：此方案依赖实验性特性，仅适合本地开发测试，不建议用于生产环境。

方案3：React.createElement语法糖（无额外依赖） #

如果不想引入第三方库，可自己封装简洁函数替代React.createElement，写法比原生调用更简洁：

<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import React from 'https://unpkg.com/react@18/umd/react.production.min.js';
    import ReactDOM from 'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js';

    // 封装语法糖
    const h = React.createElement;

    function App() {
      const [count, setCount] = React.useState(0);
      React.useEffect(() => {
        document.title = `计数：${count}`;
      }, [count]);

      return h('div', null,
        h('h1', null, '原生React应用'),
        h('p', null, `计数：${count}`),
        h('button', { onClick: () => setCount(count + 1) }, '点击+1')
      );
    }

    ReactDOM.render(h(App), document.getElementById('root'));
  </script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

通用注意事项 #

• 生产环境建议使用CDN提供的React生产压缩版本（链接中的production.min.js）
• 所有依赖均通过CDN直接引入，无需本地安装或打包工具
• 以上方案均完全支持React核心特性，包括所有Hook、组件生命周期等

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