The best way to organize your React project

Do you have to organize files into folders or can you just name them properly for a long-term project? I find it difficult to find the right files at the right time when I’m working on a long-term project. At that point, I got stuck and scratched my head, so I decided to make a proper file structure that would solve this problem.

This article is for developers who have experienced similar problems. As an example, I use a react project, but you will get the idea and can apply it to any project.

Why do we need a folder structure?

Before everything let’s understand why we need a proper folder structure in our project.

By organizing your files you can easily find the file you want at any moment. Your teammate also won’t stuck if he wants to change any file. and it is one of the best practices for a developer.

How are you going to organize your files?

Now that you know why a folder structure is necessary, let’s see how you will organize them. There are plenty of processes to organize your files. After long research and trial and error I came to this solution hopefully, it will help you too.

Inside your project’s “src” folder there will be three folders Application, Infrastructure, and Presentation.

Application: as the name suggests this will contain all necessary items used in the entire project.

Inside this, we will have “Common” for all the fonts, colors, global constants, theme, utility functions.

“Models” for data models, you’ll be using in your projects.

“Store” for the redux store or any app-wide state management.

Infrastructure: as the name suggests this will contain all the building blocks for your project.

There will be “Services” within the infrastructure. They will contain all the API calling functions or API-related stuff, and “Components” for the smallest units of your larger components such as input, button, card, etc.

The Presentation, as its name implies, contains everything that will aid in the representation of your projects, such as larger components, screens, and containers.

Inside Presentation, there will be a “Component” folder that will be used to store all the larger components. You can move a little bit ahead and make a page component folder inside this component. Inside that, you can make a folder based on the name of your multiple screens to store all the components for every screen.

And then there will be a “Container” that will contain all your layouts and wrappers.

And at last, there will be a “Screen” folder for all your pages.

And it’s done. Now you won’t be lost in the mesh of your files. If you need to change on the homepage you can easily navigate to screens and change what you want. If you want to change every button of your project just go to the component inside your Infrastructure folder and change what you want. it will give you more time to work on the real task.