When I first learned React, I didn’t learn a good way to organize my files and folders. At the time, I thought everything made sense and that my folder structure was straightforward, but the more I added to it and the larger my application grew, the more I started having a hard time searching for the files I needed. I had to rely on searching the file names rather than simply knowing the folder hierarchy.
Luckily, I later collaborated with a friend on a project and he showed me a much better way to maintain structure. Instantly, I saw its superiority. Since then everything makes much more sense, making it easier to organize code in my head making my coding environment much more relaxed.
Bad File Structure
Here is an example of bad folder and file structure I had when I first started using React. In hindsight, it looks incredibly messy and hard to sift through. Furthermore, almost nothing is intuitive and very little information can be gained by looking at it.
At first look, it doesn’t look so bad, huh? Well, not so much, we can already see some obvious flaws here. First, we notice an images folder at the top of the chain, holding all of the applications images. While, this might be passable if it held images that are used globally, this still an inappropriate place to have it, and worse it gives no naming context. Second, we see a .css file at the top chain, as well. Similarly, it wouldn’t it be so bad for global use, but it holds no useful naming convention and it definitely shouldn’t house all of the applications styling code.
More problems! Action and Reducer files are messy and unorganized, furthermore, image files are named inconsistently.
It hurts to look at. The components are scattered, messy, and unorganized. The naming convention gives some information, but it could be so much better. Even worse, we have wild js files outside of all the component folders, even though those files are components themselves!
Good File Structure
Now we will look at something that’s easier on the eyes. It gives better information just through the naming and structure. It also organizes relevant information within clusters so that random files are stored in non-intuitive locations. Small disclaimer, this is my take on good file structure and what I consider to be an incredible improvement over my past tendencies.
Nearly Everything is stored in these five folders: actions, components, functions, reducers, and scss (I prefer Sass over css). Some may also prefer to store their css styling within the component folder that it’s directly used.
Inside our scss folder we have all of our styling files, which are messy but also organized. Organized by naming convention and messy because of the number of files. This is easily the most messy part of the ‘good hygiene’ portion of this blog.
Next, we have our reducers and our actions, all of which are organized into sub-folders so that all of the possible actions/reducers for any individual component stays together. I also included a functions folder to house any general functions that would be used multiple times across different components.
The most important section, are the components. Firstly, I have a global folder which houses the components that are always in view. Most often these are a nav bar and a footer. Next, we have sub-folders that hold single page view components. These may also be divided further, for example, if you are showing an article of news and want to display the comments of that article as well. Here the comments don’t need to be separate to the article, because comments depends on the article, but they don’t need to be crammed into one file either. I find this file structure easy to navigate and manage.
Conclusion
Personally, this new way of navigating and managing my code has done wonders in terms of enjoyment, brain clutter, and moving forward. Admittedly, some parts of my structure could be changed depending on personal preference, but as a whole this is a very clear way to organize your code and a great way to keep it future proof.
Alejandro's blog 