DEV Community

Cover image for Part 2: Folder Structure - Building a Solid Foundation
Sathish Kumar N
Sathish Kumar N

Posted on • Updated on

Part 2: Folder Structure - Building a Solid Foundation

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



Enter fullscreen mode Exit fullscreen mode

In this structure,

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              
└── ...  



Enter fullscreen mode Exit fullscreen mode

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
   └── ...  
└── ...  


Enter fullscreen mode Exit fullscreen mode

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
└── ...


Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
patzi275 profile image
Patrick Zocli

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?

Collapse
 
sathishskdev profile image
Sathish Kumar N • Edited

Thank you for your comment!

For smaller projects, we can use below folder structure

src/    
├── components/  
   ├── input.jsx
   └── ...  
├── containers/  
   ├── todo.jsx
   └── ...   
├── services/     
   ├── api.js
   └── ...  
├── utils/  
   ├── todoUtils.js
   └── ...             
├── styles/
   ├── todo.css
   └── ...  
├── assets/    
   ├── images/
   ├── fonts/
   └── ...  
└── ...  
Enter fullscreen mode Exit fullscreen mode
Collapse
 
patzi275 profile image
Patrick Zocli

Thank you

Collapse
 
khairunnisaas profile image
Khairunnisaas

this is a very good article!!! learn a lot about folder structure in this article. keep up the good article 🔥🔥

Collapse
 
benjaminv profile image
benjaminv

Great suggestions thanks for sharing.