As we all probably already know, unlike Angular, where we already have a predefined way of structuring files, in React, that burden, or gift, depending on how you look at it – is bestowed upon us, the valiant developers.
Now, I choose to look at this as a gift. And let me explain why.
We all have different goals and requirements when building our React applications. Sometimes we are building a small application, like a Proof of Concept, and in this case what we favor are speed and simplicity. In other cases, we are building medium-sized applications, and in this case what we want is the possibility to scale them. And of course, sometimes one of us may get involved in building a gigantic application, with thousands of components, and in this case the one thing that we value the most is maintainability.
Now that we know that we may have different needs at different times, by having the freedom to choose our own React folder structure, we can adapt our application to suit our needs. That is why I look at this as a gift.
Now, to finally answer your question which made you open this blog post – the best folder structure for a React application is different depending on the size and needs of the application.
Wow, what a plot twist. But, I am sure that you are a smart developer, and you already saw that coming. Now however, another question rises, which is – what is the best folder structure for a small, medium and a gigantic application? Well, from what I have encountered and what I have seen – I will give you my current thoughts on this, however, I want you to know that this is something that is not definite and you should always look to customize and improve things so that they can best suit your particular needs. Alright? Great, let’s start.
Here is an example of a folder structure that can suit the needs of a small React application.
Due to the fact that in a small application we are not working with a lot of components, having things separated in shared folders is very straight-forward and simple. The developer can just open a folder and easily see all the files in the application that correspond to that folder. This promotes speed and simplicity. Just what we need when building something small!
However, as you can guess, if we start increasing the number of components, this exact folder structure will start being hard to maintain and finding things will become more difficult to do, due to the fact that components and it’s styles are separated, actions and reducers are separated and so on.
This is why we need to use something that is more interconnected for medium-sized applications.
Here is an example of a folder structure that does this and is far more scalable.
As we can see, this structure is far more complex than the previous one (bye bye simplicity and speed), but what we get is high scalability and far better maintainability.
I would like to discuss with you some key notes so that we can explain some of the things that we saw in the image.
One of the obvious ones is that now we have components stored in it’s own folder and all styles and tests related to it are stored inside that folder. Whenever someone opens a folder of a component, they can find everything related to it there, therefore having a large number of components does not negatively impact maintainability.
Another interesting change is that now components can have a sub-folder called ‘components’, and the reason for that is if we want to split a component into multiple components in order to increase human comprehension, we can easily do that by nesting them.
Also, all reducers, actions and effects that work with the same feature or object are now grouped together because they are related and this way they are easier to find and maintain.
This folder structure is highly scalable and maintainable, however, if we need to work on a gigantic application with thousands of components – there is a way to increase maintainability even more!
Here is an example of a folder structure that could be used for a gigantic React application.
As you can see here, each component contains all the resources and services that it uses inside it’s folder. Each component is it’s own separate module. You can probably guess how useful this is and easier to maintain when it comes to gigantic applications, but there is a price to pay for a folder structure like this and that is in order to ensure re-usability throughout the application, we really need to think about how we build and structure the components that we create.
Now that we have gone through some examples of how you might structure your next React application, I want you to know that nothing beats experimentation. I encourage you to use this as an example and maybe take bits and pieces from different resources and create your own folder structure pattern.
Also, before you go, I would like to give you something. Because most of us build React applications that belong in the medium-sized spectrum, I created a React boilerplate application on GitHub, that you can use to quickly bootstrap your next application and start hacking right away. It uses a folder structure as the medium-sized example, it has installed and setup all the classic dependencies like Redux, React Router, Axios and it has a nice ESLint configuration configured and also a detailed documentation explaining the folder structure, conventions, used dependencies and how to get started. Basically everything you need in order to start right away and not waste time.
You can find the project here.
Good luck and happy hacking!