umma.dev

The Atomic Design Pattern is very useful for large projects. It is a design pattern used widely in industry and helps you organise your code and components in a logical way.

A bit like a perodic table, each part of a page or component can be broken down into small segements, such as atoms, molecules, organisms, templates and pages. Below I have outlined various examples of these segements and how they are used within a React component/app.

When using the Atomic Design Pattern, the root folder is usually components and the sub folders are usually atoms, molecules, organisms, templates and pages.

Atoms

Within this folder you will usually find elements within a page - such as an input or a text box. Atoms are used for a wider purpose within a component or page.

Molecules

Molecules include atoms that are used to bind together, for example a form is a molecule which includes atoms such as a label, input and button, which are all joined together.

Organisms

An example of an organism is a header on a website or a feature that has some sort of focus on it.The organism usually consists of various different types of molecules.

Templates

These are components that are placed within a layout of a page and show the structure of the content.

Pages

Pages include templates and include the actual content and purpose of the page.