Welcome to Part 2 of our "React Best Practices in 2023" series! In this blog, we'll dive into the crucial aspect of organizing your project's folder structure.
The key is to maintain a clear and organised structure that makes it easy to locate and manage your files.
A well-designed folder structure is essential for maintaining a clean and scalable codebase, improving collaboration among team members, and enhancing overall development efficiency.
There are different types of folder structures commonly used in React projects, including the Component-Based structure, Feature-Based structure and Domain-Based Structure.
While there are various folder structure options available, The "Feature-Based structure" is considered one of the best approaches for organizing your codebase in React projects.
It promotes modularity, scalability, and maintainability by grouping related files and components based on features or functionalities rather than technical layers.
Here are some reasons why the Feature-Based structure is often preferred:
1. Modularity and Separation of Concerns
2. Code Reusability
3. Scalability and Team Collaboration
4. Easier Navigation and Understanding
5. Maintenance and Refactoring
Let's consider an example of a social media application like Facebook app to better understand how the feature-based structure works in practice.
We need to create base folders that form the foundation of our feature-based structure. These base folders serve as the starting point for organizing our code and provide a clear structure for the entire project.
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
In this structure,
- The features folder is where you group your code based on different features or functionalities of the application. Each feature has its own subfolder.
- The shared folder contains various subfolders like components, services, hooks, hoc, slices, and utils to store shared elements used across multiple features.
- The assets folder is for storing static assets such as images, fonts, or other media files.
- The styles folder is where you can put global styles or style-related files.
- App.jsx represents the main component or entry point of your application.
In Facebook, we might have features such as "News Feed," "Profile," and "Chat." We would create separate subfolders for each of these features inside the features directory.
Let's add sub-folder's under "News 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
└── ...
In this structure,
The components folder contains React components that are specific to the News Feed feature. These Components are responsible for the presentation and rendering of the user interface. They focus on the visual aspects of the application and handle the display of data. Components receive data through props and render JSX to define the structure and appearance of the UI.
The containers folder contains container components also known as smart or connected components, are responsible for connecting the application's data and logic with the presentation components. They handle data fetching, state management, and provide data and functionality to the presentation components.
Let's dive in to the containers folder.
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
│ └── ...
└── ...
Please check the "Separation of concerns in React" for above file separation under "container" folder.
The final structure of our app's folder will look like this, providing a well-organized and modular approach to organizing our codebase:
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
└── ...
Organizing components within their respective feature folders helps maintain a clear separation of concerns and makes it easier to locate and work with specific components. It also promotes code reusability and modularity within the application.
Note: The provided folder structure is just an example and may vary depending on your project's requirements and preferences.
Stay tuned for Part 3: Component Structure - Building Reusable and Maintainable Components in React!
Happy coding!😊👩💻👨💻
Top comments (5)
Great article. Indeed, this structure is far too large for a small project but seems to be very efficient for the rest. What do you suggest for slightly less substantial projects?
Thank you for your comment!
For smaller projects, we can use below folder structure
Thank you
this is a very good article!!! learn a lot about folder structure in this article. keep up the good article 🔥🔥
Great suggestions thanks for sharing.