React 项目结构核心文件说明（基于 create-react-app）

本文件解释了典型 React 项目中的核心目录与文件结构，适用于使用 create-react-app 创建的项目。

---

📁 node_modules/

• 自动生成目录，存放所有通过 npm install 安装的依赖包
• 不需要手动编辑
• 可通过删除后重新 npm install 恢复
• 应在 .gitignore 中排除

---

📁 public/

• 存放 静态资源文件（不会被 Webpack 打包处理）
• 常见内容包括：

文件名	说明
index.html	页面模板，React 应用的入口
favicon.ico	浏览器标签页的小图标
manifest.json	PWA 配置文件
robots.txt	搜索引擎爬虫规则文件
logo192.png	图标资源（适用于移动设备）

---

📁 src/

• 存放 React 应用的源代码
• 默认文件说明：

文件名	作用说明
index.js	应用入口，React 挂载点
App.js	主组件
App.css	主组件样式
index.css	全局样式
App.test.js	测试用例文件
logo.svg	示例图标
reportWebVitals.js	性能分析代码，可选
setupTests.js	测试初始化配置

---

📄 package.json

• 项目的 说明文件
• 包含如下内容：

字段	说明
name	项目名称
version	版本号
scripts	可运行的命令（如 npm start）
dependencies	正式依赖
devDependencies	开发环境依赖
license	许可证类型

---

📄 package-lock.json

• 由 npm 自动生成
• 锁定依赖的精确版本
• 确保项目在不同机器上的依赖一致性
• 应该提交到 Git 仓库
• 不建议手动修改

---

✅ 总结对照表

名称	类型	说明
node_modules/	目录	所有安装的依赖包
public/	目录	HTML 模板与静态资源
src/	目录	源代码、组件、样式文件
package.json	文件	项目配置、依赖、脚本
package-lock.json	文件	锁定依赖版本，保证部署一致性

---

该结构是前端工程开发中的基础，熟悉这些文件的作用是学习 React、Webpack、Vite 等现代前端框架的第一步。