Part 2: Folder Structure - Building a Solid Foundation
Tags: react, bestpractices, javascript, folderstructure
Published: 2023-05-15 20:02:56

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.

```js
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.
{% embed https://dev.to/sathishskdev/using-usereducer-and-redux-toolkit-together-a-powerful-combination-for-state-management-3b2h %}
- 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**".

```js
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.

```js
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.

{% embed https://dev.to/sathishskdev/separation-of-concerns-in-react-and-react-native-45b7 %}

The final structure of our app's folder will look like this, providing a **well-organized** and **modular approach** to organizing our codebase:

```js
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!😊👩‍💻👨‍💻