React 项目结构详解 ✅

项目目录结构

一个标准的 React 项目通常包含以下核心目录：

• public/：静态资源存放地（如 index.html、图片、字体）
• src/：源代码目录
  • components/：可复用组件
  • pages/：页面级组件
  • utils/：工具函数
  • App.js：主组件
  • main.js：入口文件
  • styles/：CSS/Sass/SCSS 文件
• .gitignore：版本控制忽略文件

核心文件组织

• App.js：通常作为根组件，包含全局状态管理或路由配置
• index.js：渲染 App 组件到 DOM
• 路由配置：使用 react-router 时，建议将路由逻辑单独抽离至 routes.js

组件组织方式

1. 原子化设计：按功能拆分组件（如 Header, Button）
2. 页面级组件：将页面拆分为独立模块（如 HomePage, AboutPage）
3. 嵌套结构：子组件通过相对路径导入（如 components/Navigation/Menu.js）

最佳实践

• 使用 ESLint 规范代码风格
• 通过 Webpack 或 Vite 管理构建
• 遵循 React 官方项目结构指南

扩展阅读

• React 入门教程
• 组件化开发模式
• 状态管理方案对比