Atomic Design Pattern

Introduction

As a React JS Developer, I work on UI components on daily basis. Component reusability is the main advantage in React so one has to build small and highly reusable components. For example, If one has to use different buttons like submit button, cancel button, and contact button, etc. A UI developer needs to build a generic button so one can use that generic button in the entire project for different purposes just by changing some props.

This is button is the smallest part/component for the project by combining such small components we can build some meaningful parts like a card or header or some other parts. This is the way that leads us to maintain and develop react components and the react projects easily.

To maintain this type of structure Atomic Design Pattern was introduced by Brad Frost.

What Atomic Design Pattern?

In the introductory part of this article, we looked into some small generic parts which help to build some meaningful web designs and some more introductory descriptions so in this section we are going to discuss what Atomic Design is?

Atomic Design Pattern contains 5 parts,

• Atoms
• Molecules
• Organisms
• Templates
• Pages

let's discuss these parts one by one

Atoms - atoms are the smallest parts of the Atomic Design. for example, generic button, label component, input component which are useful in the entire project.

Molecules - with combining atoms we can build some useful components like a navigation bar, search bar component, custom card component, etc. Assume a basic navigation component it has some navigation menus/links which helps the user navigate to a particular page, and again it may contain some button.

Organisms - Organisms can use one or many molecules or atoms. Assume a header now we can get a clear understanding of the organisms with it. A simple header contains the brand logo on one side and navigation menus and some buttons on the other or as per design. buttons and navigation bar, brand logo images are separate parts that combine together to build a header. here button and brand logo image are atoms and navigation menu are molecules.

Templates - Combining organisms, atoms, molecules to achieve a meaningful web page where users can see final design of the page.

Pages - different template rendering in the system to complete a project completely. there are many examples like home page, login page, about us page, etc.

Need of Atomic Design

Such a type of UI design pattern makes the project more modular and readable. Organizing a React file structure according to Atomic Design Pattern is to isolate the environments of each feature component. Well-structured components are more straightforward to test and maintain. This structure is easy to handle.

This is a basic introductory article is related to atomic design patterns. I hope you like it. suggestions and corrections are most welcome. feel free to share if you find this useful.