How to Improve your Component Folder Structure with Atomic Design (part 2)

Previous parts: Part 1

Structuring your react components doesn’t have to be a difficult process. In this article you will learn how to define your molecules with the Atomic Design component structure pattern to facilitate your component use and interaction.

In the previous article we learned how creating responsive, single-responsibility atoms can be helpful to ensure high-cohesion and low-coupling in our codebase, but with this, comes their parent components, that will help us ensure that this atoms make sense within our component structure: the molecules.

Molecules

Molecules facilitate building components based on smaller elements, and using them wherever needed. They are usually made out of atoms in our codebase (makes sense doesn’t it?) and help us create bigger elements in our site, such as navbars, footers, cards, etc.

Usually, even if they need certain styling, we make these molecules out of — Containers, Buttons, Textsor wrappers that we then use to build each part of the molecules, they can even recieve and handle state actions like opening or closing a modals!

Here we can see an example

Compound Components

One of the best use-cases that we can think of that make molecules just great is in cases where we can implement and make use of the Compound Components Pattern. This way, we can create flexible and efficient component-based APIs, which allow us to create a more reusable components such as the following:

As seen in the example, creating molecules can involve just defining a component with atoms that help us create more flexbile components, or even handle state and facilitate using agnostic behaviours in our elements, such as booleans, buttonActions, etc.

This way, we can make creating components an intuitive and fun process that eases the load of determining when a component should have a more important role within the context of our folder organization in contrast to other.

Using this, we can create cool components, that are reausable and semantically-sound, which makes for great scalability and flexibility when creating new components within our project!

Oh, this is cool too

Enough for now.

In the next part of this series, we will explore how creating organisms comes into play and how we can involve the use of state handling and stores into the game, where context can be fun and avoiding prop-drilling starts to make sense.

If you like this don’t forget to click the 💚.