在上一篇文章中，我们成功使用 Vite 创建了一个 React 项目，并运行了起来。

很多新手在这一步都会遇到一个问题：

项目虽然跑起来了，但完全看不懂代码在干嘛。

特别是这两个文件：

main.tsx
App.tsx

其实只要搞懂这两个文件，你就已经理解了 80% 的 React 项目启动流程。

这篇文章我们就结合 真实脚手架代码 来彻底讲清楚。

---

一、React 项目的真实目录结构

当我们创建项目后，src 目录是这样的：

👉 随着项目变大，通常会演变成：

接下来我们重点讲两个核心文件。

---

二、main.tsx（React 应用入口）

这是 Vite 创建项目时默认生成的代码：

我们一行一行解释。

---

1、 引入 StrictMode

这里的 StrictMode 是来自 React 的一个工具组件。

作用是：

👉 帮助开发者发现潜在问题

例如：

✅ 检测不安全生命周期
✅ 检测副作用问题
✅ 帮助优化代码

💡注意：

StrictMode 只在 开发环境生效，不会影响生产环境。

---

2 、createRoot 是 React18 新特性

这是 React 18 之后的新写法。

以前是这样：

ReactDOM.render()

现在统一改为：

createRoot()

作用是：

创建 React 渲染根节点

简单理解：

React 应用挂载的地方

---

3、 引入全局样式

这个文件是：

全局样式

通常用来放：

body 样式
重置样式
基础字体

例如：

body {
  margin: 0;
}

---

4 引入 App 根组件

这一句非常重要。

意思是：

加载整个应用

React 项目的结构其实是：

main.tsx
   ↓
App.tsx
   ↓
页面组件
   ↓
业务组件

---

5 、渲染 React 应用

核心代码：

这里发生了三件事。

第一步

找到 HTML 中的节点：

root

这个来自：

index.html

第二步

创建 React 应用。

第三步

把 App 渲染进去。

整个流程可以理解为：

HTML
  ↓
React 启动
  ↓
加载 App
  ↓
渲染页面

---

三、App.tsx（真正的页面开始）

接下来我们看脚手架默认生成的代码：

这里主要做了三件事：

引入 Hook
引入图片
引入样式

我们逐个解释。

---

四、useState 是 React 最重要的 Hook

这是 React 最常用的功能之一。

作用：

管理组件状态

脚手架里的代码：

解释一下：

count        当前值
setCount     修改值的方法
0            初始值

完整意思：

创建一个计数器状态

---

五、为什么点击按钮数字会变化？

效果：

核心代码：

执行逻辑是：

点击按钮 → 调用 setCount → 更新状态 → 页面重新渲染

也就是：

React 的核心机制
状态变化 → UI 更新

这是 React 最重要的设计思想之一。

---

六、脚手架为什么要放两个 Logo？（理解 public 和 assets 的区别）

在默认生成的 App.tsx 中，有这样两行代码：

很多新手看到这里都会疑惑：

为什么两个图片的路径不一样？

其实这是因为 图片来源的目录不同。

一个来自：

src/assets

一个来自：

public

我们分别来看。

---

1 、assets 目录中的图片（参与打包）

第一行代码：

对应文件位置：

这种方式是 通过 import 引入图片。

特点是：

参与 Vite 构建打包
可以被优化
可以被压缩
可以被 hash 处理

例如构建后可能变成：

assets/react-3f4s8.svg

这样可以解决：

浏览器缓存问题

这种方式通常用于：

组件图片
页面图片
模块资源

所以 assets 目录一般用于组件内部资源。

---

2、 public 目录中的图片（不会参与打包）

第二行代码：

对应文件位置：

这里使用的是：

/vite.svg

注意这个 / 是根路径。

在 Vite 中：

public 目录会被原样复制到打包目录

例如：

dist/vite.svg

不会经过构建处理。

所以这种方式通常用于：

favicon
robots.txt
静态配置文件
无需打包的大文件

---

3 、两种方式的核心区别

我们总结一下：

类型	目录	引入方式	是否参与打包
组件资源	src/assets	import	✅ 会打包
静态资源	public	直接路径	❌ 不打包

举个简单例子：

组件图片推荐放：

src/assets

网站图标推荐放：

public

例如：

public/favicon.ico

---

4、 为什么脚手架要演示两种方式？

默认脚手架这样设计其实是为了：

让开发者理解两种资源加载方式。

也就是：

模块资源（assets）
静态资源（public）

当你理解这两种方式之后，基本就不会再在项目中：

图片路径报错
资源加载失败

这些问题了。

---

七、理解一个非常重要的事情

很多新手以为：

React = HTML + CSS

其实真正的结构是：

React 应用
  ↓
组件
  ↓
组件里面写 JSX
  ↓
JSX 渲染成页面

而脚手架给你的这个 App.tsx，其实就是一个：

示例组件。

未来真实项目会变成：

App
 ├─ Layout
 ├─ Router
 └─ Pages

例如：

pages
 ├─ login
 ├─ dashboard
 └─ user

---

八、优化后的推荐项目结构（企业项目）

当项目稍微大一点，建议整理成这样：

这种结构是目前很多 React 项目在使用的。

---

九、React 应用真正的运行流程

很多新手如果理解这一张流程图，会进步很快：

浏览器打开页面
        ↓
加载 index.html
        ↓
执行 main.tsx
        ↓
渲染 App.tsx
        ↓
加载页面组件
        ↓
展示 UI

简单理解：

index.html 是入口
main.tsx 是启动程序
App.tsx 是应用框架

---

十、新手一定要记住这几个文件

在 React 项目中，最重要的是这几个：

main.tsx   应用入口
App.tsx    根组件
pages      页面
components 组件
hooks      逻辑复用
utils      工具函数
assets     静态资源

如果理解了这些，你基本已经：

真正看懂 React 项目结构了。

---

下一篇预告

下一篇我们会进入 React 最核心的一部分：

JSX 语法详解。

很多人第一次看到 JSX 都会懵：

为什么 JavaScript 里可以写 HTML？

下一篇我们会彻底讲清楚：

JSX 原理
JSX 写法
条件渲染
列表渲染
常见错误

这一篇会让你真正开始写 React 代码。