React项目文件夹结构终极指南：react-folder-structure三套模板全景解析（新手入门必读）

React项目文件夹结构终极指南：react-folder-structure三套模板全景解析（新手入门必读）

【免费下载链接】react-folder-structure项目地址: https://gitcode.com/gh_mirrors/re/react-folder-structure

react-folder-structure是一个专为 React 新手打造的项目文件夹结构参考仓库：它用三套由浅入深的模板（beginner / intermediate / advanced），完整演示一个 React 项目的目录组织如何从"扁平堆放"演进到"Feature-Based 功能驱动架构"。读完本文，你就能回答 React 开发中最常见的困惑：组件放哪、hooks 放哪、测试放哪、什么时候该按功能拆分模块。

一、为什么文件夹结构是 React 新手的第一课 📁

很多新手写 React 的前三个月都绕不开同一个问题：文件到底该放在哪里？

• 组件写多了，src/components/变成"垃圾抽屉"，找一个按钮组件要翻半天
• hooks、工具函数、全局状态散落各处，新人接手项目无从下手
• 没有统一结构，团队协作时每人一套目录，合并代码困难重重

react-folder-structure 的思路非常聪明：不教你某一个"标准答案"，而是给你同一份应用（Todo + 登录注册 + 项目列表）的三种结构版本，让你亲眼看到文件夹结构是如何随项目复杂度一步步演进的。

二、三套模板速览：一条清晰的进阶路线 🗺️

三套模板功能完全相同，只是"摆放方式"不同——这正是对比学习价值最大的地方。

三、新手模板（beginner）：扁平结构，先跑起来再谈优雅

beginner 模板是典型的 Create React App 初始结构：所有文件按类型平铺在src/下。

• 📂 全部组件集中在一个目录：beginner/src/components/（包含Button.js、TodoList.js、Navbar.js等 14 个组件）
• 📂 自定义 hooks：beginner/src/hooks/useFetch.js、useLocalStorage.js
• 📂 工具函数直接放根目录：beginner/src/formatCurrency.js、beginner/src/formatDate.js
• 📂 全局状态放根目录：beginner/src/TodoContext.js
• 📂 测试统一收集：beginner/src/__tests__/components/Button.test.js、beginner/src/__tests__/hooks/useLocalStorage.test.js

优点：认知负担最低，"找组件去 components，找工具函数去根目录"，一条规则走天下。

局限：当组件涨到几十上百个时，components/会失控；而且 Todo 功能的组件、状态、测试分散在三个地方，关联性看不出来。

💡 新手建议：前 20 个组件以内，这种结构完全够用，不必过早设计"完美架构"。

四、进阶模板（intermediate）：按页面组织功能的目录写法

intermediate 模板解决了"功能文件散落"的问题，核心手法是让每个功能跟着它的页面包在一起：

• 📂 整个 Todo 功能收进intermediate/src/pages/Home/：TodoForm.js、TodoItem.js、TodoList.js、TodoContext.js和入口index.js同处一室
• 📂 hooks 跟随使用它的页面：intermediate/src/pages/Login/useLogin.js、intermediate/src/pages/Signup/useSignup.js
• 📂 通用组件开始细分：intermediate/src/components/ui/（按钮、下拉、弹窗）与intermediate/src/components/form/（输入框、单选、多选）
• 📂 全局级状态独立：intermediate/src/context/AuthContext.js
• 📂 测试改为就近放置：intermediate/src/pages/Home/__tests__/里的测试和被测代码只隔一层目录

关键升级：文件从"按类型找"变成"按功能找"。做登录相关需求时，打开pages/Login/一个文件夹就能看到全部代码。

五、高手模板（advanced）：Feature-Based 功能模块架构详解

advanced 模板是业界中大型 React 项目的主流架构：Feature-Based（基于功能划分）。每个功能是一个自包含的"小宇宙"，内部自己拥有组件、hooks、服务甚至状态：

advanced/src/ ├── features/ # 🏆 功能模块区（架构核心） │ ├── authentication/ # 登录注册：components/ + hooks/ + services/ + index.js │ ├── todos/ # 待办：components/ + context/ + services/ + index.js │ ├── projects/ # 项目列表：components/ + services/ + index.js │ └── settings/ # 设置：components/ + context/ + hooks/ + services/ ├── layouts/ # 全局布局：Navbar、Sidebar、PageContainer ├── lib/ # 底层库封装：fetch.js ├── services/ # 全局服务：analytics.js ├── data/ # 静态数据与常量 ├── hooks/ utils/ # 全局共享的 hooks 与工具函数 └── pages/ # 页面只做"组装"，几乎不含业务逻辑

以登录功能为例，相关文件全部内聚在advanced/src/features/authentication/内：

• 组件：LoginForm.js、SignupForm.js
• hooks：useLogin.js、useSignup.js、useVerifyPassword.js
• 请求服务：login.js、signup.js、getUser.js

为什么值得学：功能模块天然边界清晰，删除一个功能 = 删一个文件夹；团队协作时按 feature 分工互不干扰；模块内的index.js统一出口，外部只 import 一次。

六、三套模板运行步骤：从 clone 到 localhost 只需 4 步 ⚡

# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/re/react-folder-structure # 2. 进入想研究的模板目录（三选一） cd react-folder-structure/beginner # 3. 安装依赖 npm install # 4. 启动开发服务器，浏览器访问 localhost:3000 npm start

每套模板都是一个完整的 Create React App 项目（依赖见各自目录下的package.json），三套并行启动即可在浏览器里对比结构差异。

七、新手常见疑问 FAQ ❓

Q1：我一直用 beginner 结构行不行？行。个人小项目、学习 Demo，扁平结构完全够用。架构是长出来的，不是设计出来的。

Q2：intermediate 和 advanced 到底差在哪？intermediate 是"页面拥有功能"（pages 目录里塞满业务代码）；advanced 是"功能独立于页面"（features 目录自包含，pages 只负责组装）。功能被多个页面复用时，advanced 的优势立刻显现。

Q3：测试文件应该放__tests__还是和源码同目录？仓库里两种都示范了：beginner 集中在src/__tests__/，intermediate / advanced 就近放在功能内的__tests__/。团队里统一一种即可，就近放置是更常见的趋势。

Q4：我该从哪套模板开始看？直接看 advanced 的features/目录，再回头对比 beginner——用"答案"反推"过程"，理解最快。

结语

掌握 React 项目文件夹结构，是新手走向"像专业开发者一样组织代码"的第一步。react-folder-structure 用最直观的方式给了你三个参照系：用beginner起步不纠结，用intermediate管住中小项目，用advanced的 Feature-Based 架构承接团队项目。把这三套目录结构记在脑中，你的下一个 React 项目就会从一开始井然有序 ✨

【免费下载链接】react-folder-structure项目地址: https://gitcode.com/gh_mirrors/re/react-folder-structure