0Pricing
React Academy · 课时

文件夹结构与命名约定

使用按功能划分的文件夹和清晰的文件名组织 React 项目。

文件夹结构与命名约定 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将了解 React 项目常见的文件夹结构，学习文件和组件的命名约定，并理解如何随着项目增长组织代码。

默认结构

最小的 Vite + React 项目包含 `src/App.jsx` 和 `src/main.jsx`。对于小型演示来说，这样没有问题，但无法很好地扩展。随着您不断添加功能，请创建专用文件夹，将相关代码放在一起。
src/
  main.jsx
  App.jsx
  index.css

基于功能的结构

请按功能而不是按类型对文件进行分组。每个功能文件夹都包含其组件、样式、测试和辅助函数。这样，您就可以一次性轻松添加或删除整个功能。
src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

组件文件命名

请使用与组件名称匹配的 **PascalCase** 为组件文件命名：`UserCard.jsx`、`NavigationBar.jsx`。每个文件包含一个组件是标准做法。使用 `.jsx`（或 `.tsx`）可以告诉编辑器该文件包含 JSX。

非组件文件命名

钩子、工具函数和常量使用 **camelCase**：`useAuth.js`、`formatDate.js`、`apiClient.js`。测试文件使用 `.test` 或 `.spec` 与源文件对应：`useAuth.test.js`。

使用索引文件实现简洁导入

在文件夹中添加 `index.js` 后，您就可以从文件夹路径导入，而不必使用完整文件路径。请让索引文件只包含重新导出内容，不要包含逻辑。
// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

使用路径别名进行绝对导入

请在 `vite.config.js` 和 `tsconfig.json` 中配置指向 `src/` 的 `@/` 别名。这样可以避免 `../../../../components/Button` 这类脆弱的相对路径。
// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

共享组件与功能组件

只在一个功能中使用的组件应放在该功能的文件夹中。只有在两个或更多功能需要某个组件时，才将其移到 `src/components/`。请避免过早提取组件。

常量与配置文件

请将魔法字符串、API 基础 URL 和环境变量封装代码存放在 `src/lib/constants.js` 或 `src/config.js` 中。不要在许多文件中分散使用 `process.env.VITE_API_URL` 字符串。
// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

类型与接口（TypeScript）

在 TypeScript 项目中，请将类型与使用它们的功能或组件放在一起。对于许多功能都会使用的共享类型，请创建 `src/types/`，并为每个领域创建一个文件。

快速检查

与按类型组织的结构相比，基于功能的文件夹结构的主要优势是什么？

回顾

使用基于功能的文件夹、为组件文件使用 PascalCase、为钩子和工具函数使用 camelCase、使用 index.js 重新导出来实现简洁导入，并使用类似 @/ 的路径别名来消除冗长的相对路径。

课程完成

恭喜您！您已完成 **React 严格模式与最佳实践**。现在，您已经了解 StrictMode 的行为、如何编写纯渲染函数、如何正确使用键和引用，以及如何设计可扩展的文件夹结构。

常见问题解答

「文件夹结构与命名约定」课时是免费的吗？

是的 — 「文件夹结构与命名约定」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「文件夹结构与命名约定」这节课中我会学到什么？

使用按功能划分的文件夹和清晰的文件名组织 React 项目。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「文件夹结构与命名约定」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. StrictMode 的作用
  2. 纯组件与避免渲染副作用
  3. Key 与 Ref 最佳实践
  4. 文件夹结构与命名约定
← 返回 React Academy