Implementing a new React folder structure for cirov.com

Front-End / Published Feb 6, 2022

When developers have close deadlines, or simply want to finish their projects as quickly as possible, they might be prone to overlooking important stuff about software projects. Stuff like best practices, architecture, or in the case of this website, folder structure. When building cirov.com, I did not think too much about the folder structure for the front-end, and probably just copied it from some random course or YouTube video. This led to the following structure.

As you can see, the main issue with this structure is that every React component was under the components folder. If I continued building components under this structure, the project would have become even more of a mess. That is why I decided I needed to reorganize the folder structure of this website, but what structure should I use?

Building a scalable React folder structure

Fortunately, while watching a React course I came across a comment with a link to this article about how to build a scalable React folder structure. The structure is explained in detail in the article. In summary, it consists of 4 main folders:

  • src/library: contains common functions, components, and utilities used in other files. Example: reducers, actions, UI components like header and footer
  • src/main: configuration files based on our app logic. Example: Redux store, React Router routes.
  • src/modules: here we find folders that correspond to screens/pages in the app. Each module has its own structure of components and logic. For example, Home, Blog, and About screens.
  • src/resources: static files such as images and stylesheets.

So, how did I actually implement this structure?

Implementation

After reading once again the previously mentioned article, I created the four main folders in src. First, I moved the img and styles folder to the new resources folder. Second, I moved actions, reducers, and some common components to the library/common folder, creating one folder for each component. Then, I moved the components that correspond to screens/pages to modules. Finally, I moved the redux store to the main folder, and created a Routes component with contains every route in the modules folder.

This Routes component is imported into the App component (located in the root of src). The app component connects Routes to Redux by using the Provider component from react-redux. These two components used to be one.

This is the end result for the src folder.

Conclusion

In summary, I realized my folder structure for this website could be better. Fortunately, I found an article that explained how to build a better React folder structure. It was mostly easy to migrate to this new structure (probably because this website is small). If you are a developer, take into consideration folder structure when creating new projects or apps; you will thank yourself later.