4. 项目结构与入口

本节目标：搞清楚 Vite + React 项目里每个文件的作用，理解应用从启动到渲染的完整链路。

项目全景

先用一张图建立整体印象：

my-first-react-app/
├── node_modules/       # 第三方依赖（自动生成，别碰）
├── public/             # 静态资源，原样复制到打包结果
│   └── vite.svg
├── src/                # 你写代码的地方
│   ├── App.jsx         # 根组件
│   ├── App.css         # 根组件样式
│   ├── main.jsx        # JS 入口
│   ├── index.css       # 全局样式
│   └── assets/         # 需要处理的资源（图片等）
├── index.html          # 唯一 HTML 页面
├── package.json        # 依赖列表 + 脚本命令
├── package-lock.json   # 依赖版本锁
└── vite.config.js      # Vite 配置

index.html：唯一的 HTML 页面

React 应用是单页应用（SPA），整个应用只有一个 HTML 文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

关键点：

<div id="root"> 是 React 应用的挂载点，所有组件最终渲染在这里
<script type="module" src="/src/main.jsx"> 是入口，从这里开始执行 JS

Note

你不需要手动往 index.html 里加 <link> 或 <script> 标签。Vite 会自动处理 CSS 和 JS 的引入。

main.jsx：JS 入口

这是整个应用的第一行执行的代码：

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

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

逐行解释：

import { createRoot } from 'react-dom/client' — 引入 React 19 新的渲染 API
import App from './App.jsx' — 引入根组件
import './index.css' — 引入全局样式
createRoot(document.getElementById('root')) — 找到 #root 元素，创建 React 根
.render(<App />) — 把 <App /> 渲染进去

Tip

React 18+ 用 createRoot 替代了旧的 ReactDOM.render。如果你看到老代码用后者，那是旧写法。

StrictMode 是什么

<StrictMode> 是开发模式下的”严格模式”，会帮你检查潜在问题：

检测不安全的生命周期
检测过时的 API 使用
故意双重调用某些函数，暴露副作用问题

它只在开发环境生效，生产包会自动去掉。不要因为它报错就慌，这是在帮你提前发现 bug。

App.jsx：根组件

这是你第一个组件：

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount(count + 1)}>
          count is {count}
        </button>
      </div>
    </>
  );
}

export default App;

注意最后一行 export default App——这是 ES Module 的默认导出，让 main.jsx 能 import App from './App.jsx' 引入它。

模块是怎么串起来的

整个启动链路：

index.html
  ↓ 加载 /src/main.jsx
main.jsx
  ↓ import App from './App.jsx'
App.jsx
  ↓ 返回 JSX
React 渲染到 #root

每个文件通过 import 和 export 连接。这就是 ES Module 模块化系统。

index.css：全局样式

index.css 里的样式对整个应用生效。通常放一些重置样式和基础样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
}

vite.config.js：Vite 配置

初学阶段不用改这个文件。它是 Vite 的配置入口，可以配置插件、代理、构建选项等。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

动手试试

现在你可以改改看效果：

打开 src/App.jsx
把 <h1>Vite + React</h1> 改成 <h1>我的第一个 React 应用</h1>
保存文件
浏览器应该会自动刷新，显示新内容

这就是热更新（HMR）——改完代码不用手动刷新浏览器。

本节小结

index.html 是唯一的 HTML 页面，<div id="root"> 是挂载点
main.jsx 是 JS 入口，负责把 React 应用挂载到 DOM
App.jsx 是根组件，所有其他组件都是它的后代
模块通过 import/export 连接
改代码保存后浏览器自动刷新（热更新）

下一节我们学 React 的核心语法——JSX。