React js is a great UI library. It provides the best way to create and manage UI components. But there are other things in the application as well that are not directly dependent on the UI components. So in order to manage the application, in the long run, we need some sort of best reactjs folder structure.
Reactjs officially provides some directions on it but i personally think that is not enough.
Let’s try to identify what are the other things in the application that are not directly dependent on the UI components.
- API/ Network related code
- Calculations to provide state of the components
- Utility functions
- Store related code ( In case we are using state management library )
- Code that is totally independent of UI. ( Some kind of logs management, Sending of analytics data )
The above-listed requirements are mostly ideal for any UI project.
In any UI project, we can have multiples pages/features that are independent of each other and we can also have some code that could be shared among the pages/features. So this kind of structure should be visible in the folder structure.
Let’s try to create the folder structure.
- Modules/features folder this folder contains the code that is mostly independent from each other in the application. It is most likely works as the page.
- Shared folder, this folder contains the code that will be common among the modules/pages/features.
So this way we can have the following directory structure.
Modules
|–Login
|—–Login.js
|—–LoginStyles.js
|—–LoginNetwork.js
|—–Utils
|–SignUp
|—-SignUp.js
|—-….
Shared
|–Components
|–Utils
|–Hooks
|–Network
|–Redux
So modules folder has two modules Login and SignUp and that will further have multiples folders and files like Utils, style, component/container. So this is an independent module/feature.
But we will have some common code in the application and that would be sharable among modules and that could be different types. Likes utils, network-related code, or maybe redux-related configuration So we moved that inside the Shared folder.
And that’s it. Now we can visualize the Whole application very easily with only two folders. Shared and Modules. We have the ability to add as many modules as we need in the application. The code that is common or the code that is related to the configuration of the application can be moved inside the Shared folder.
We have the ability to add a variety of the code inside the shared folder that is common and still it will have clear visibility.
With this, we end up with the better reactjs folder structure. It is scalable, sharable, modular, understandable and a better reactjs folder structure.