Advanced React.js File Structure

React.jsAdvanced

Summary

In this article, we'll delve into creating a file structure that enhances usability, scalability, and clarity, ensuring your complex applications remain well-organized and easy to manage. We'll discuss best practices for structuring your files to promote maintainability and readability, making your codebase more efficient and intuitive for developers.

Level 1: Grouping by File Types


.
├── public/
│   ├── data
│   └── img
└── src/
    ├── assets/
    │   ├── maps/
    │   ├── svg/
    │   └── style/
    ├── api/
    ├── configs/
    ├── components/
    │   ├── SignUpForm.tsx
    │   ├── Employees.tsx
    │   ├── Button.tsx
    │   └── PaymentForm.tsx
    ├── hooks/
    │   ├── useAuth.ts
    │   ├── useEmployees.ts
    │   └── usePayment.ts
    ├── lib/
    ├── store/
    ├── services/
    └── utils/
    └── constants/

Project Size: Small to Medium

Advantages:

Simple and Understandable: If the project is small, it is easy and logically convenient to separate files by type.

Disadvantages:

Complexity in Handling Larger Projects: As your project grows, this approach becomes more complex, as features may become interlinked and harder to manage.

This file structure stands out for its simplicity.

If the project continues to expand in the future, this method may not work, and organizing, updating, or deleting code will become increasingly difficult. Naturally, as the project grows, it will be necessary to move on to the next levels, 2 and 3.

Level 2: Grouping by File Types and Features


.
├── public/
│   ├── data/
│   └── img/
│       ├── avatars/
│       ├── logo/
│       ├── products/
│       ├── countries/
│       └── others/
└── src/
    ├── assets/
    │   ├── maps/
    │   ├── svg/
    │   └── style/
    │       ├── components/
    │       ├── template/
    │       ├── docs/
    │       └── others/
    ├── api/
    ├── configs/
    ├── views/
    │   ├── auth/
    │   ├── crm/
    │   ├── crypto/
    │   └── docs/
    ├── pages/
    │   ├── welcome/
    │   ├── home/
    │   └── AccessDenied/
    ├── components/
    │   ├── docs/
    │   ├── layout/
    │   ├── route/
    │   ├── shared/
    │   ├── template/
    │   │   ├── auth/
    │   │   │   └── SignUpForm.tsx
    │   │   ├── employees/
    │   │   │   └── Employees.tsx
    │   │   └── payment/
    │   │       ├── PaymentForm.tsx
    │   │       ├── EmployeeList.tsx
    │   │       └── EmployeeSummary.tsx
    │   └── ui/
    │       ├── Button.tsx
    │       └── Avatar.tsx
    ├── hooks/
    │   ├── useAuth.ts
    │   ├── useEmployees.ts
    │   └── usePayment.ts
    ├── constants/
    ├── lib/
    ├── store/
    ├── services/
    └── utils/

Project Size: Medium to Large

Advantages:

Grouping by Features: Files are grouped by features, which makes code management easier.

Disadvantages:

Spread-out Features: Code related to certain features may still be scattered across several folders, which can be challenging as the project grows.

At this level, the project is well-managed, and multiple projects can be integrated.

If you are struggling to choose the right level for your project structure, I would recommend this level.

Level 3: Grouping by Features/Modules


.
├── public/
│   ├── data/
│   └── img/
│       ├── avatars/
│       ├── logo/
│       ├── products/
│       ├── countries/
│       └── others/
└── src/
    ├── assets/
    │   ├── maps/
    │   ├── svg/
    │   └── style/
    │       ├── components/
    │       ├── template/
    │       ├── docs/
    │       └── others/
    └── modules/
        ├── core/
        │   ├── api/
        │   ├── configs/
        │   ├── views/
        │   ├── pages/
        │   │   ├── welcome/
        │   │   ├── home/
        │   │   └── AccessDenied/
        │   ├── components/
        │   │   ├── docs/
        │   │   ├── layout/
        │   │   ├── route/
        │   │   ├── shared/
        │   │   ├── template/
        │   │   └── ui/
        │   │       ├── Button.tsx
        │   │       └── Avatar.tsx
        │   ├── hooks/
        │   ├── constants/
        │   ├── lib/
        │   ├── store/
        │   ├── services/
        │   └── utils/
        ├── payment/
        │   ├── components/
        │   │   ├── template/
        │   │   │   └── PaymentForm.tsx
        │   │   └── ui/
        │   ├── hooks/
        │   │   └── useEmployees.ts
        │   ├── constants/
        │   ├── lib/
        │   ├── store/
        │   ├── services/
        │   └── utils/
        └── employee/
            ├── components/
            │   ├── template/
            │   │   ├── EmployeeList.tsx
            │   │   └── EmployeeSummary.tsx
            │   └── ui/        
            ├── hooks/
            │   └── useEmployees.ts
            ├── constants/
            ├── lib/
            ├── store/
            ├── services/
            └── utils/

Project Size: Large and complex

Advantages:

Module-based architecture: Separating the project by features or modules ensures management without increasing complexity.
Independence of modules: Modifying or removing one module does not affect others, reducing technical debt.

Disadvantages:

Requires experience: You need a good understanding of business logic to make correct grouping decisions.

This structure is usually used when working on large-scale projects. If you want to change or remove a section within a module, it can be done easily.

Give Clear and Understandable Folder Names

This is very important. Depending on the size and complexity of the project, having clear and meaningful names makes it easier to work with the project.

General Recommendations

Small projects: 1-level approach may be sufficient.

Medium projects: 2-level structure provides easy management.

Large and complex projects: 3-level approach ensures the independence of modules and keeps the code cleaner.

These approaches will help you maintain easy management even as your project grows. Choosing the right structure for any project is crucial to its success.

Now, I will explain the folder names used above.

1. public/

General purpose: To store static resources visible to the user, such as images and data files.

Subfolders:

data/: Folder containing static data files (JSON, CSV, etc.).
img/: Folder containing images needed for the project.

2. src/

General purpose: Folder containing all source code (frontend and backend). This is the heart of the project.

assets/: Folder for storing styling resources, such as fonts, icons, or common CSS files.

modules/: Folder containing separate modules related to different features of the project. Each module may have its own business logic and UI components.

payment/: Module containing code and components related to payment systems.

employee/: Module containing code and components related to employee management or HR systems.

core/: Folder for the central and common components, configurations, features, and functions of the project.

api/: Folder for code related to backend API calls or requests.
configs/: Folder containing necessary configurations for the project (e.g., API URLs, environment settings).
views/: Folder containing commonly used UI views or pages (e.g., header, footer, layout).
pages/: Folder containing routing and components for pages within the project.
components/: Folder containing UI components (e.g., buttons, forms, cards).
hooks/: Folder containing common React hooks (e.g., state management, lifecycle hooks).
constants/: Folder containing various constants used in the project, such as URLs, status codes, and rules.
lib/: Folder for storing general user libraries or helper functions.
store/: Folder containing stores for Redux or other state management.
services/: Service layer, i.e., code handling API interactions or executing business logic.
utils/: Folder containing common helper functions and utilities.

This structure helps keep your project more organized and manageable. Each folder has a clear and general role, making it easier to search and manage the code.

If this post was useful and beneficial, don't forget to share it with your friends 😉

Thank you for your attention!