How to structure folders and components of your React applications
With the widespread use of view libraries, such as React and Vue, component-based front-end development has become popular. As an application grows and becomes more complex, the structure can be chaotic if there is no common rule to manage it, especially when the application is developed by a team. For this reason, it is important to design the structure of folders and components before you start writing code. This article will introduce some concepts that may be helpful for folder and component structure design.
Folder structure
React doesn’t recommend specific ways to structure folders in a project but suggests the following two as common approaches.
Grouping by features or routes
Locate CSS, JS, and tests together inside folders grouped by feature or route.
Grouping by file type
Group similar files together.
Whichever approach you choose, try to limit yourself to a maximum of three or four nested folders within a single project. Otherwise, it will be hard to write relative imports or update those imports when the files are moved.
Component structure
Before we move on, let’s review what components are. Components can be defined as “modularized GUI parts.” GUI exists on the screen of a device and contains the functions to achieve the goals of the application. Applications usually consist of multiple pages, and some functional parts, such as headers and footers, are often used repeatedly. The purpose of componentization is to divide these parts into small units to improve the reusability and maintainability of functions and design.
The following are the principles that can help you structure components in your project.
Atomic design
Atomic design has become the de facto standard for interface design systems. There are five distinct levels in atomic design:
- Atoms — The smallest units of UI that cannot be divided any further, which are equal to HTML tags in React applications. Atoms become molecules when combined with other atoms.
- Molecules — Groups of atoms that have a single function, such as search forms. Molecules have to be simple to maintain reusability and the consistency of UI. The idea of molecules is based on the single responsibility principle described below.
- Organisms — Groups of molecules joined together to form more complex parts of UI, such as headers and footers.
- Templates —Groups of organisms stitched together to form pages — so-called wireframes.
- Pages —Specific instances of templates. Placeholder content is replaced with real content a user will see.
Single responsibility principle
The single responsibility principle is one of the principles of software design in object-oriented programming(SOLID). It applies to component design as well. Each component should be responsible for one thing. This is an important idea, especially for molecules, because if one component has multiple functions or roles, it loses reusability.
On the other hand, the single responsibility principle doesn’t necessarily apply to organisms and the above levels because they have a role as a layout rather than a function.
How about stylizing? CSS also should be closed within the components.
Of course, there can be some cases you would like to allow parent components to have control over the CSS of child components. It still won’t be too late to first start your project based on this principle and then change the stylizing scope of the parent components after you figure out there are some benefits to do so.
Presentational and container components
If you have learned Redux, you should be familiar with this pattern. Components have to be either presentational or container components.
Presentational components are only responsible for their appearance and do not have a state. Container components are only responsible for their functionality and are often stateful, as they tend to serve as data sources. Data and callbacks are passed from the container components to presentational components exclusively via props.
Since front-end development depends on the user experience, it is difficult to determine the perfect development rules and logic in advance. However, if you keep updating the rules based on those concepts, you should be able to cope with even further modifications.
References:
- React Docs, “File Structure”, https://reactjs.org/docs/faq-structure.html
- Brad Frost, “atomic design”, https://bradfrost.com/blog/post/atomic-web-design/
- Dan Abramov, “Presentational and Container Components”, https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
