第2部分：文件夹结构 - 建立坚实的基础-DEV365 开发者社区

欢迎来到我们的第2部分“ 2023年的最佳实践” 系列！在此博客中，我们将深入研究您的项目文件夹结构的关键方面。

关键是要保持一个清晰有条理的结构，以使您易于找到和管理您的文件。

精心设计的文件夹结构对于维持清洁和可扩展的代码库，改善团队成员的协作至关重要效率。

反应项目中常用的文件夹结构的不同类型，包括基于组件的结构，基于特征的结构和 域面积结构。

虽然有各种文件夹结构选项，但“基于功能的结构” 被认为是在React Projects中组织代码库的最佳方法之一。

它通过根据功能或功能而非技术层分组相关的文件和组件来促进模块化可伸缩性。 P>

这是一些通常优选基于功能的结构的原因：

1。关注的模块化和分离
2。代码可重复使用
3。可伸缩性和团队协作
4。更轻松的导航和理解
5。维护和重构

让我们考虑一个社交媒体应用程序的示例，例如 Facebook 应用程序，以更好地了解基于功能的结构在实践中的工作方式。

我们需要创建构成基于功能结构的基础的基本文件夹。这些基本文件夹是组织我们的代码的起点，并为整个项目提供了清晰的结构。

src/ ├── features/ // Grouping features of the application │ └── ... // Other feature folders ├── shared/ // Shared elements used across multiple features │ ├── components/ // Reusable components │ ├── services/ // Shared services or API calls │ ├── hooks/ // Custom hooks │ ├── hoc/ // Higher-order components │ ├── slices/ // Redux slices for state management │ └── utils/ // Utility functions ├── assets/ // Storing static assets │ ├── images/ // Storing image files │ ├── fonts/ // Storing font files │ └── ... ├── styles/ // Global styles │ └── ... ├── App.jsx // Entry point of the application └── ... // Other necessary files and folders

在这种结构中，

功能文件夹是根据应用程序的不同功能或功能对代码进行分组的地方。每个功能都有自己的子文件夹。

共享文件夹包含各种子文件夹，例如组件，服务， hooks ， hoc ，切片和 utils 存储在多个功能上使用的共享元素。

Assets 文件夹用于存储诸如图像，字体或其他媒体文件的静态资产。

样式文件夹是您可以放置全局样式或样式相关文件的地方。

app.jsx 代表应用程序的主要组件或入口点。

在Facebook中，我们可能具有“ 新闻feed ”，“ 个人资料”和“ chat ”之类的功能。我们将为功能目录中的每个功能创建单独的子文件夹。

让我们在“ 新闻feed ”下添加子文件夹。

src/ ├── features/ │ ├── news-feed/ // Folder for the News Feed feature │ │ ├── components/ // Components related to the News Feed │ │ ├── containers/ // Containers or pages related to the News Feed │ │ ├── services/ // Services or API calls specific to the News Feed │ │ ├── utils/ // Utility functions specific to the News Feed │ │ ├── slices/ // Redux Slices to manage states specific to the News Feed │ │ └── ... │ └── ... // Additional feature folders ├── ... ├── App.jsx └── ...

在这种结构中，

组件文件夹包含特定于新闻提要功能的反应组件。这些组件负责演示和用户界面的渲染。他们专注于应用程序的视觉方面，并处理数据的显示。组件通过道具接收数据，并渲染 JSX 定义结构和 UI 的外观。。

容器文件夹包含容器组件，也称为智能或连接的组件，负责连接应用程序的数据和 logic 成分。他们处理数据获取，状态管理，为演示组件提供数据和功能。

让我们潜入容器文件夹。

news-feed/ ├── components/ // Folder for presentation components │ └── ... // Additional components related to the News Feed feature ├── containers/ // Folder for container components │ ├── news-feed-page/ // Folder for the News Feed page container │ │ ├── NewsFeedPage.jsx // Container component for the News Feed page │ │ ├── NewsFeedPageStyles.css // Styles specific to the News Feed page │ │ ├── NewsFeedPageUtils.js // Utility functions specific to the News Feed page │ │ ├── useNewsFeedPage.js // Custom hook for managing News Feed data, events and callbacks │ │ └── ... // Additional files related to the News Feed page │ └── ... └── ...

请检查上述文件分离“ 容器”文件夹的“ react 中的关注点”。

我们应用程序文件夹的最终结构将看起来像这样，提供组织良好的和模块化方法组织我们的代码库：

src/ ├── features/ │ ├── news-feed/ │ │ ├── components/ │ │ │ ├── PostItem.jsx │ │ │ ├── CommentItem.jsx │ │ │ ├── LikeButton.jsx │ │ │ └── ... │ │ ├── containers/ │ │ │ ├── news-feed-page/ │ │ │ │ ├── NewsFeedPage.jsx │ │ │ │ ├── NewsFeedPageStyles.css │ │ │ │ ├── NewsFeedPageUtils.js │ │ │ │ ├── useNewsFeedPage.js │ │ │ │ └── ... │ │ │ ├── PostDetailsPage.jsx /* No need to create separate folder if container have less functionality and logic */ │ │ │ └── ... │ │ ├── services/ │ │ │ ├── newsFeedService.js │ │ │ └── ... │ │ ├── utils/ │ │ │ ├── dateUtils.js │ │ │ └── ... │ │ ├── slices/ │ │ │ ├── newsFeedSlice.js │ │ │ └── ... │ │ └── ... │ ├── profile/ │ │ ├── components/ │ │ │ ├── ProfileInfo.jsx │ │ │ ├── Avatar.jsx │ │ │ ├── ProfileSettings.jsx │ │ │ └── ... │ │ ├── containers/ │ │ │ ├── ProfilePage.jsx │ │ │ └── ... │ │ ├── services/ │ │ │ ├── profileService.js │ │ │ └── ... │ │ ├── utils/ │ │ │ ├── validationUtils.js │ │ │ └── ... │ │ ├── slices/ │ │ │ ├── profileSlice.js │ │ │ └── ... │ │ └── ... │ └── ... ├── shared/ │ ├── components/ │ ├── services/ │ ├── hooks/ │ ├── hoc/ │ ├── slices/ │ ├── utils/ │ ├── assets/ │ └── styles/ │ └── ... ├── App.jsx └── ...

在其各自的功能文件夹中组织组件有助于保持清晰的关注点，并使定位和使用特定组件更容易。它还促进了应用程序中的代码可重复性和模块化。

注意：提供的文件夹结构只是一个示例，可能会根据项目的要求和偏好而有所不同。

请继续关注第3部分：组件结构 - 在React ！
中构建可重复使用且可维护的组件
快乐的编码！