# 项目结构介绍

URL: https://caijiao.org/react/chapter2/project-structure
Source: docs/react/chapter2/project-structure.md
Description: 在创建 React 项目后，'create-react-app' 会自动为你生成一套标准的项目结构，帮助开发者清晰地管理和组织代码。

当你使用 `create-react-app` 创建一个新的 React 项目时，项目结构如下所示：

```text
my-app/
├── node\_modules/         # 存放项目依赖包
├── public/               # 存放公开的静态资源
│   ├── index.html        # 应用的入口 HTML 文件
│   └── ...
├── src/                  # 存放项目源代码
│   ├── App.css           # 样式文件
│   ├── App.js            # 主组件
│   ├── index.css         # 全局样式文件
│   ├── index.js          # 应用的 JavaScript 入口文件
│   └── ...
├── .gitignore            # Git 忽略文件配置
├── package.json          # 项目配置文件，包含依赖、脚本等
├── package-lock.json     # 记录项目依赖的精确版本
└── README.md             # 项目简介文件

```

## 主要目录和文件说明

- **node_modules**：存放项目的所有依赖包。你可以在这个文件夹中找到 React 和其他你安装的库。
  
- **public**：存放静态资源文件，如 HTML 模板、图片等。最重要的文件是 `index.html`，它是应用的 HTML 模板，React 应用会被挂载到这里的 `<div id="root"></div>` 元素中。

- **src**：存放 React 组件、样式文件和其他 JavaScript 文件。这里的主要文件包括：
  - `App.js`：React 应用的主组件，你可以在这里开始编写组件逻辑。
  - `index.js`：JavaScript 入口文件，负责渲染整个应用到 `index.html` 中的 `root` 元素。

- **package.json**：存储项目的配置、依赖、脚本等信息。你可以在这里管理项目的依赖包并添加自定义的 npm 脚本。

- **.gitignore**：指定 Git 忽略的文件和目录。通常会忽略 `node_modules` 以及构建产物。

- **README.md**：项目的说明文档，通常用于提供项目概述、安装指南、使用说明等。

通过以上结构，`create-react-app` 提供了一个清晰且易于扩展的 React 项目结构，帮助开发者更好地管理代码和资源。