Atomic Design Pattern Example for ReactJS Application

Atomic Design Pattern Example for ReactJS Application

Atomic design, developed by Brad Frost and Dave Olsen, is a methodology for crafting design systems with five fundamental building blocks, which, when combined, promote consistency, modularity, and scalability. Based on React's declarative style of building UIs these principles are a natural fit for building interfaces in React

Atomic design, developed by Brad Frost and Dave Olsen, is a methodology for crafting design systems with five fundamental building blocks, which, when combined, promote consistency, modularity, and scalability. Based on React's declarative style of building UIs these principles are a natural fit for building interfaces in React. https://atomicdesign.bradfrost.com/chapter-2/

The five distinct levels of atomic design — atoms > molecules > organisms > templates > pages — map incredibly well to React’s component-based architecture.

Atomic Development

Atoms:

Basic building blocks of matter, such as a button, input or a form label. They’re not useful on their own.

Molecules:

Grouping atoms together, such as combining a button, input and form label to build functionality.

Organisms:

Combining molecules together to form organisms that make up a distinct section of an interface (i.e. navigation bar)

Templates:

Consisting mostly of groups of organisms to form a page — where clients can see a final design in place.

Pages:

An ecosystem that views different template renders. We can create multiple ecosystems into a single environment — the application.

File Structure

Since React follows a component-based architecture, it’s pretty common to organise your components based on the type, rather than feature. What if we built a sub-ecosystem for each component feature?

Atomic Development

  1. Each component or service has its own isolated environment — everything needed to work on its own instance. You can see that each component /Buttons & /Form has its own set of styles, actions, and unit or integration tests that act like an independent piece of feature in your app. (You can also add its own set of images and other local variables.) This makes it much easier, and reduces your efforts, to test your code consistently and effectively.

  2. This type of organisation allows for nesting components into another component. Note that if you define a new component inside /Delete, /Submit, /Login, or /Register, the nested component can only be used by its direct parent, and not its cousins.

React + Atomic Design

When we started to use Atomic Design within React we had to adjust some rules of the methodology to ensure that components were reused as much as possible, that they were stateless, without styles of positions and very specific margins so to avoid any side effects in the pages of application.

So with each new component we asked ourselves: “Are these components generic enough to avoid specificity and/or repeated code in whatever context they are used?”

So we were able to write a few rules:

  • The Atomic Design should have a file of variables and it must be imported by each component;
  • The atoms should be written without margins and positions;
  • Only the molecules and organisms can set the positions of atoms, but these stacks can’t have any styles of margins and positions;
  • Templates have only one function: to set the grid of pages but never positions of specific components;
  • Pages render the components with a template defined and it’s here that the Atomic Design will be connected to the rest of the application;

Scripts

Script Desc
$ yarn start Start a simple webpack server
$ yarn dev Create a server to development at port 5000
$ yarn storybook Start Storybook with the stories imported
$ yarn flow Validate the flow types

Libraries

  • Webpack
    • CSS Loader
    • SVG Sprite loader
    • File loader
  • Flow types
  • Storybook
    • Storybook Info
  • CSS
    • Autoprefixer
    • Import
    • Nested
    • Variables
    • Inline SVG
  • Babel
    • Loader
    • Preset ES2015
  • Project
    • Atomic Design styles folder structure
    • ESLint
    • Prettier

Contributors

@danilowoz

@dleitee

Download Details:

Author: sudhirmurthy

Source Code: https://github.com/sudhirmurthy/react-atomicdesignpattern

reactjs react javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.