请描述一个典型 React 项目的目录组织方式，并说明各主要部分的作用。

回答思路

1. 【回答框架 1】一个典型 React 项目通常按功能或模块划分目录，核心包括：入口文件（如 index.js）负责挂载根组件；src 目录存放源码，内部可细分 components（通用组件）、pages（页面级组件）、utils（工具函数）、services（API 请求）、hooks（自定义 Hook）、styles（样式）等。
2. 【回答框架 2】组件目录常采用按组件聚合的方式，每个组件包含其专属的 JSX、样式和测试文件，便于维护和复用。状态管理相关文件（如 Redux 的 store、reducers、actions 或 Context 的 provider）通常单独放置，或按领域模块组织。
3. 【回答框架 3】资源文件（图片、字体等）一般放在 public 或 assets 目录，构建配置（如 webpack、vite 配置）位于根目录。路由配置可集中在一个文件或按页面拆分。
4. 【回答框架 4】项目结构应遵循高内聚低耦合原则，根据团队规模和项目复杂度灵活调整，没有唯一标准，但需保证可读性、可维护性和可扩展性。
5. 【关键点 1】入口文件负责挂载根组件，是应用启动的起点。
6. 【关键点 2】components 与 pages 分离，通用组件与页面级组件职责不同。
7. 【关键点 3】状态管理、路由、API 请求等关注点应独立成模块。
8. 【关键点 4】目录结构需支持按功能或模块扩展，避免循环依赖。
9. 【易错点 1】过度分层导致文件跳转繁琐，降低开发效率。
10. 【易错点 2】将所有组件平铺在单一目录，缺乏组织，难以维护。
11. 【易错点 3】忽略测试文件与样式文件的就近放置，增加查找成本。