Applying Atomic design to React project

Tram Ho

For a lot of people starting to develop apps with React, they will have a lot of trouble choosing a folder structure for easy management. In the past, I used to use structure according to each function. Example: This is the registration and login application. And I structure the directory according to each function.

With a folder structure like this, the problem will arise that at the Login or Register component which are two forms, it has the same features as submit, reset, … In addition, usually the style of these two forms is similar. structurally similar, not to mention adding the style of the <input /> tags will be the same, so we need to separate the components.

Imagine when we start developing a larger project we will have a lot of components but we cannot control all the components nor can we decentralize them.

So what will Atomic design look like?

First of all let’s see what is Atomic ? – Atomic design is a method of program design. And it is divided into 5 levels: Atoms, Molecules, Organisms, Templates, Pages .

In this article, I will not go into the definition, I simply describe each component:

Atoms : this is the most basic ingredient. Example: button , label , title , …

Molecules : consists of Atoms components that form a larger component. Example: Search bar , Menu , Slider

Organisms : a larger component that is a combination of Atoms , Molecules . Example: Search Header , Banner , …

Templates : Group Organisms elements into a section on a page. Example: Header , Sidebar , …

Page : is a combination of Templates to form a complete page.

That is a rough outline of the Atomic design , but when applied, we can use them flexibly.

Applies to the example above:

In the atoms folder I have 5 components: Button , Input , Label , Modal , Title .

Next in the directory of molecules, I have 3 components: GroupButton (Component consists of 2 buttons), GroupInput (includes label, input), Message (includes modal, label).

In the organism folder is a combination of atoms and molecules to form two forms.

Using Atomic design we create a directory structure: clearer, delimited. In the above example there are few components so just that is enough for us to create the UI we want.


Depending on the React project, there will be an optimal structure for it. And Atomic design is one of them. I am quite excited when applying it to my project, it helps me to more easily control and maintain code during project development. Above are the knowledge that I have and share with everyone. Thank you for reading my article, if there are mistakes, or contributions, you can leave a comment to help me write better.


Share the news now

Source : Viblo