Entry File 入口文件
最后更新：2026-10-28
Entry File 入口文件
入口文件（通常是 src/main.jsx）是整个 React 应用的起点：它把根组件挂载到 index.html 里指定的 DOM 节点上。日常开发很少改动它，但理解挂载流程有助于排查白屏等启动问题。
| 分组 | 核心概念 |
|---|---|
| 类型 | 工具链 |
| 引入版本 | React 18（createRoot API） |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
// src/main.jsx —— 应用从这里启动
import { createRoot } from 'react-dom/client'
import App from './App'
createRoot(document.getElementById('root')).render(<App />)
// ↑ 找到 index.html 里的 #root ↑ 挂载根组件返回值：无返回值，作为工程化启动文件使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
显示「应用启动流程」卡片，初始只有第①步；每点一次按钮多显示一行，走完四步后再点击从头重播，模拟入口文件挂载应用的完整链路。💡 要点
⚠️ 注意 页面白屏先查两处：index.html 的 #root 是否存在、main.jsx 是否被 index.html 正确引入。
ℹ️ 说明 React 18 起使用 createRoot API；老的 ReactDOM.render 写法属于 React 17 时代。
💡 提示 整个页面只应挂载一次根组件；多个 React 应用并存时要各自指定不同挂载节点。
🏷️ 核心概念相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q React 入口文件是哪个？
A Vite 项目默认是 src/main.jsx（TypeScript 模板为 main.tsx），由 index.html 通过 <script> 引入，负责挂载根组件。
Q createRoot 是做什么的？
A 它在指定 DOM 节点上创建 React 根，并返回带 render 方法的根实例；React 18 的并发特性都从 createRoot 入口启用。
Q 页面白屏和入口文件有什么关系？
A 很常见：#root 节点 id 不匹配、入口脚本没引入、或根组件抛错都会白屏；先看控制台报错再核对入口文件。
