Ultimate Guide to React Folder Structure for Enterprise-Level Applications.

Get Your React Project Structure in Order with Ultimate Guide

Β·

7 min read

Ultimate Guide to React Folder Structure for Enterprise-Level Applications.

Do you have messy and disorganized React project folder structures? Or are you looking for guidance on how to architect a folder structure that's scalable and easy to maintain? Look no further! You've found it! This article is meant to assist you.

🌟 Welcome to the Blog series Mastering React With Harshal! πŸ†•

I'm on a mission to provide a comprehensive and practical understanding of React. πŸš€

By the end of the Mastering React series, you'll gain the knowledge and confidence to excel in React and overcome any obstacles. πŸ’ͺ

Stay updated by following me along with subscribing to the newsletter so you Don't miss out on another blog!

In this post, I'll share best practices, methodology, and approach for creating a scalable and maintainable folder structure for enterprise-level React projects, also explain the reasoning behind this structure, and provide GitHub React enterprise boilerplate repository link that you can use as a starting point.

So, let's dive in and get started on building a better project structure for your React enterprise projects!

react enterprise folder structure

Methodology and Approach πŸ”‘

Before I dive into explaining the project structure directories, let me share the methodology behind this approach. This will help you understand why we structure projects in this way and enable you to create your own according to your requirements - which is the main goal of this blog.

Composability: The Building Blocks of React 🧱

One of the key principles is composability - the ability to reuse code between components. By creating small, reusable building blocks, we can combine them to form more complex components. Just like building with Legos - you can combine different blocks to build something new and exciting.

Local First: Keeping It Together 🏠

To maintain code organization and readability, it's best to keep code related to a specific component in the same directory. Avoid separating code into multiple directories unless it's absolutely necessary. For example, if you have an authentication feature with a component, assets, services, and utility functions, keep them all in the same directory for easy organization and readability.

Think of it like organizing your closet - you keep related items together in the same place, right? Similarly, keep related code together in the same directory.

Flatter is Better: Don't Get Lost in the Nesting πŸš€

It's essential to keep your directory structure as flat as possible to maintain code readability and ease of modification. This means avoiding too many levels of nesting and keeping related files and components together in the same directory.

Group your project files based on their functionality or the pages they're used on. Keep related components, stylesheets, and test files in the same directory.

Nest as You Grow 🌱

Consider nesting your files only when it makes sense for your project's organization. For instance, if your "Features" directory becomes too large, you may want to group features based on logical categories. Otherwise, keep your directory structure as flat as possible for better readability and ease of modification.


assets/: This folder contains all the static assets used in the project, such as images, fonts, and videos.

  • Purpose: It helps in organizing all the static assets in one place for easy access and management.

  • Suggestion: Consider using a Content Delivery Network (CDN) to serve these static assets for improved website performance.

components/: This folder contains all the reusable components used in the project, divided into smaller subfolders based on their functionality.

  • Purpose: It helps in modularizing the code and promotes code reusability, making development faster and more efficient.

  • Suggestion: Consider using a component library, such as Storybook or Bit, to easily manage and showcase the components.

constants/: This folder contains all the constant values used throughout the project, such as API endpoints, default values, and error messages.

  • Purpose: It helps in centralizing the constant values and makes them easy to access and modify.

  • Suggestion: Consider using an environment file for storing sensitive values, such as API keys.

features/: Contains all the features or functionalities of the project, divided into smaller subfolders based on their functionality.

  • Purpose: It helps in organizing the code based on features, making it easier to manage and maintain.

  • Suggestion: Consider using a domain-driven design approach to better structure the features and their subfeatures.

hooks/: Contains custom React hooks used throughout the application for handling common functionality.

  • Purpose: It helps in abstracting and reusing common functionality, such as fetching data or accessing local storage.

  • Suggestion: Consider using community-supported and tested hook library,rather than reinventing the wheel.

layouts/: Contains higher-order components (HOCs) used to wrap other components in order to provide common layouts (such as a header and footer).

    • Purpose: It helps in separating the layout from the content, making the code more modular and easier to maintain.

      * Suggestion: Consider using a CSS framework, such as Tailwind or Bootstrap, to easily style the layout components.

pages/: Contains all the page components used in the project, divided into smaller subfolders based on their functionality.

  • Purpose: Organize page components in a single folder for easy access and modification.

  • Suggestion: Consider using dynamic routing to easily create new pages and features.

routes/: Contains all the routing-related codes used in the project, such as private and public routes.

  • Purpose: It helps in managing the navigation and access control of the site.

  • Suggestion: Must use a routing library, such as React Router or Next.js, to easily handle complex routing scenarios.

store/: Contains all of the Redux-related code used in the project, including slices, services, and RTK Query code.

  • Purpose: Organize all of the Redux-related code in a single folder for easy access and modification.

  • Suggestion: Follow a local-first approach and keep only the files that are used throughout the app in the main store folder.

utils/: Contains utility functions that can be used throughout the application.

  • Purpose: Provides a centralized location for commonly used utility functions.

  • Suggestion: When adding new utility functions, consider whether they can be reused in other parts of the application before creating a new utility folder or file.

types/: Contains type definitions used throughout the application.

  • Purpose: Provides a centralized location for commonly used type definitions.

  • Suggestion: Reuse type definitions in different parts of the application. Use external type libraries like TypeScript's @types or DefinitelyTyped to ensure type safety and save development time.

If you found this blog helpful, please share it with others and star my Github repository for future reference. Your support will motivate me to write more blogs. Thank you!

Bonus time! Thanks πŸ™Œ for sticking with me this far.

Value of πŸ“ Readme Files in Enterprise Projects

The readme file is an important but often overlooked file. considering that numerous developers may be working on the project, it is critical to include a readme file for each folder, feature, and component, using the local-first approach.

The readme file should include guidelines, rules, and best practices as well as clear and concise information about how the project functions. It should, for example, describe the purpose and usage of each component and feature, as well as how to set up the development environment, run tests, and contribute to the project. This will make it easier for new developers to grasp the project's structure and get up to speed fast.

By creating a readme file, you can ensure that everyone working on the project is on the same page and that new developers can easily integrate into the team.

Summary🌟

To summarize, a clean and well-organized folder structure is critical to the success of a React enterprise project. Remember, every project has unique requirements, so there is no ultimate structure. However, you can create your own folder structure by first understanding your project's specific needs, and then following best practices to ensure a streamlined and effective project.

Acknowledgments

I would like to acknowledge the following sources of inspiration for this blog: the folder structure I personally implemented in building the Ardev Payroll software, various enterprise-level React open-source applications, blogs by Kolby Sisk, and best industry practices.

Β