Module 01 · Introduction to React and Class ComponentsReact 与类组件简介
Understand React StructureReact 项目结构与 Vite 构建工具介绍
欢迎观看有关 React 项目结构 的视频！通过观看此视频，你将能够：
- 描述 Vite 构建工具用于创建 React 项目的流程
- 列出创建 React 项目的步骤
- 列出 React 项目文件夹结构中的目录和文件
Vite 构建工具与 React 项目创建
- 你可以使用 CRA（Create React App）工具来创建 React 项目，但该工具会安装一些你可能不需要的文件和文件夹，从而导致文件大小较大。为了优化这一过程，React 官方推荐使用 Vite。
- Vite 是一个现代的前端构建工具，旨在提升项目的构建和开发速度。它利用当前浏览器对 JavaScript 模块 的处理方式，通过仅在需要时打包代码，从而加快编程和构建的时间。
Vite 创建 React 项目的步骤
- 在代码编辑器的终端中输入 npm create 命令： 在终端中输入命令启动创建过程。
- 指定项目名称： 输入项目名称后，系统将展示一系列框架选项，使用箭头键选择 React。
- 选择 JavaScript 作为脚本语言： 在下一步中选择你要使用的脚本语言，通常为 JavaScript。
- 项目创建完成后，终端会显示以下指令：
cd learning_react：导航至 React 项目的正确位置。npm install：安装项目运行所需的所有文件和包。npm run dev：启动 React 应用程序，使其在浏览器中渲染。
- 显示链接和端口号： 你将看到一个链接和端口号，使用它可以在浏览器中打开你的 React 应用程序。
- 执行命令后，终端将显示输出： 执行
npm run dev后，你将看到启动的应用程序的相关输出。
React 项目的文件夹结构
现在，让我们来了解一下 React 项目的文件夹结构。通过代码编辑器的 Explorer 视图进入 React 项目文件夹，你将看到如下结构。
React 项目的文件夹结构：
| 目录/文件名 | 描述 |
|---|---|
| node_modules | 包含通过 NPM 或 Yarn 安装的所有依赖项。 |
| public | 包含静态资产，如 HTML 文件、图像和字体。HTML 文件 作为 React 应用的入口点。 |
| src | 包含 React 应用的源代码。 |
| App.jsx | React 应用的根组件，包含 UI 组件和逻辑的模板。 |
| main.jsx | React 应用的入口文件，渲染根组件到位于 public 目录中的 HTML 文件。 |
| App.css | React 根组件的样式文件。 |
| index.css | 全局样式文件，应用于整个 React 应用程序。 |
其他文件：
- package.json：包含有关项目和依赖项的元数据，并包括运行、构建和测试应用的脚本。
- vite.config.js：Vite 构建工具的配置文件，用于定制构建过程、指定插件和配置开发服务器选项。
- .gitignore：指定哪些文件和目录应被 Git 忽略，以避免它们被纳入版本控制。
- README.md：提供有关项目的信息，包括设置说明、使用指南和项目文档。
- index.html：作为 Web 开发项目中的基础文件，作为 Web 应用程序的入口点。
- eslintrc.cjs：ESLint 配置文件，ESLint 是 JavaScript 的流行代码检查工具。
.cjs后缀表示这是一个 CommonJS 模块格式的文件。
开始构建应用程序
在了解了文件夹结构后，你可以通过创建更多的文件夹和文件来开始构建你的 React 应用程序。这样，你将能够根据项目需求进一步组织代码结构。
课程总结
在本视频中，你了解了以下内容：
- Vite 是一种改进的构建工具，用于提升前端项目的开发效率，尤其适用于 React 项目。
- Vite 通过仅在需要时打包 JavaScript 模块，从而加快了编程和构建速度。
- 创建 React 项目后，项目文件夹结构包含多个目录和文件，如 node_modules、public、src、main.jsx、App.jsx 等。
通过本视频，你对如何使用 Vite 创建和管理 React 项目的结构有了清晰的了解，接下来你可以开始动手构建自己的 React 应用！🎉