yushakuApril 25, 2024
This structure is characterized by its simplicity - grouping files by their type:
└── src/ ├── assets/ ├── api/ ├── configs/ ├── components/ │ ├── SignUpForm.tsx │ ├── Employees.tsx │ ├── PaymentForm.tsx │ └── Button.tsx ├── hooks/ │ ├── usePayment.ts │ ├── useUpdateEmployee.ts │ ├── useEmployees.ts │ └── useAuth.tsx ├── lib/ ├── services/ ├── states/ └── utils/
Let's say you have a lot of code revolving around payment. One day the whole business changes or is no longer needed, how easy is it to replace or remove it? With this folder structure, you'll have to go through every folder and the files inside it to make the necessary changes. And if the project keeps growing larger, it'll soon grow into a maintenance hell that will only get worse over time.
As projects grow, the "Level 2" structure introduces grouping by feature within each type:
└── src/ ├── assets/ ├── api/ ├── configs/ ├── components/ │ ├── auth/ │ │ └── SignUpForm.tsx │ ├── payment/ │ │ └── PaymentForm.tsx │ ├── common/ │ │ └── Button.tsx │ └── employees/ │ ├── EmployeeList.tsx │ └── EmployeeSummary.tsx ├── hooks/ │ ├── auth/ │ │ └── useAuth.ts │ ├── payment/ │ │ └── usePayment.ts │ └── employees/ │ ├── useEmployees.ts │ └── useUpdateEmployee.ts ├── lib/ ├── services/ ├── states/ └── utils/
Now let's come back to the problem statement where the payment module needs to be modified or removed. With this structure, it's a lot easier to do that now.
The "Level 2" folder structure is the one that I'd recommend if you don't know what to choose.
For larger projects, the "Level 3" structure offers a highly modular approach, defining clear boundaries for different aspects of the application within each module:
└── src/ ├── assets/ ├── modules/ | ├── core/ │ │ ├── components/ │ │ ├── design-system/ │ │ │ └── Button.tsx │ │ ├── hooks/ │ │ ├── lib/ │ │ └── utils/ │ ├── payment/ │ │ ├── components/ │ │ │ └── PaymentForm.tsx │ │ ├── hooks/ │ │ │ └── usePayment.ts │ │ ├── lib/ │ │ ├── services/ │ │ ├── states/ │ │ └── utils/ │ ├── auth/ │ │ ├── components/ │ │ │ └── SignUpForm.tsx │ │ ├── hooks/ │ │ │ └── useAuth.ts │ │ ├── lib/ │ │ ├── services/ │ │ ├── states/ │ │ └── utils/ │ └── employees/ │ ├── components/ │ │ ├── EmployeeList.tsx │ │ └── EmployeeSummary.tsx │ ├── hooks/ │ │ ├── useEmployees.ts │ │ └── useUpdateEmployee.ts │ ├── services/ │ ├── states/ │ └── utils/ └── ...
With this, if you are to remove or modify the payment logic, you'll know right away where to start.
Regardless of the structure level, certain folder names should carry specific meanings. What a folder name means may vary based on your preferences or the project's conventions.
Here's what I usually think about folder names:
export const MINUTES_PER_HOUR = 60
).Choosing the right folder structure in React projects is essential and should be based on the project's size and complexity. While "Level 1" may suffice for small projects, "Level 2" and "Level 3" offer more organized and modular structures for medium and large projects. Personally, I'd often recommend the "Level 2" folder structure. Also, Understanding common folder names helps maintain a consistent and intuitive architecture across React applications.
In case you think it was a good read, you'll probably find this useful as well: