如何将React App.js中的App()函数关联至index.html页面？

核心思路 #

直接在HTML中引入React、ReactDOM及Babel的CDN资源，把App组件代码放到带type="text/babel"的script标签中，最后挂载到页面容器即可。

分步实现 #

1. 引入必要的CDN资源
   在HTML的<head>中加入React、ReactDOM的开发版（生产环境建议换生产版），以及Babel用于转译浏览器不支持的JSX语法：

<head>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin 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>

2. 添加React挂载容器
   在<body>中创建一个空的div，作为React组件的挂载点：

<body>
  <div id="root"></div>
</body>

3. 迁移App.js的核心代码
   新建一个type="text/babel"的script标签，把App.js里的App()函数完整复制进去，再加上组件挂载逻辑：

<script type="text/babel">
  // 复制你的App()函数代码（包含内部所有逻辑）
  function App() {
    // 这里保留原App.js里的所有代码，比如hooks、子组件、JSX返回值
    const [count, setCount] = React.useState(0);
    
    return (
      <div className="App">
        <h1>计数器: {count}</h1>
        <button onClick={() => setCount(count + 1)}>点击加1</button>
      </div>
    );
  }

  // 挂载App组件到root容器
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
</script>

4. 处理样式与依赖

• 原App.js关联的CSS样式，直接放到<head>的<style>标签中：

  <style>
    .App {
      text-align: center;
      padding: 2rem;
      font-family: sans-serif;
    }
    button {
      padding: 0.5rem 1rem;
      font-size: 1rem;
      cursor: pointer;
    }
  </style>
  

• 如果App中用到自定义子组件，直接把它们也放到同一个text/babel的script标签里，放在App()函数之前即可。

完整示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React 单文件整合示例</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>
    .App {
      text-align: center;
      color: #2d3748;
      margin-top: 60px;
    }
    button {
      background-color: #3182ce;
      color: white;
      border: none;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    // 自定义子组件
    function SubComponent() {
      return <p>这是App组件内部的子组件</p>;
    }

    // 核心App函数
    function App() {
      const [count, setCount] = React.useState(0);

      return (
        <div className="App">
          <h1>Hello React!</h1>
          <SubComponent />
          <p>当前计数: {count}</p>
          <button onClick={() => setCount(count + 1)}>点击增加</button>
        </div>
      );
    }

    // 挂载组件
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  </script>
</body>
</html>

注意事项 #

• 生产环境使用时，将CDN资源中的development替换为production，减小文件体积并提升性能；
• 如果App依赖第三方库（如axios、lodash），同样可以通过CDN引入后直接在组件中使用；
• 复杂项目建议还是使用Create React App等脚手架工具管理，但简单场景下单文件模式完全够用。

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