Visually Breaking Down UI Components using Atomic Design (and building with React) — Part 2

I’m back again with the last part of the Visually Breaking Down UI Components using Atomic Design series.

I know, a 4-month gap! It is long overdue because of several reasons, but we are finishing 2018 with complete articles. Amen!

In this part, we’ll be writing some code like my friend Achola suggested in the first part.

What you need to know

  • Familiarity with Atomic Design terms, you can read about it here
  • Ability to (at least) read ReactJS code
  • Familiarity with ES6

The Goal

In this article, we’ll be visually breaking down a part of the restaurant listing page of one of my frequently used sites, Jumia Food into components and converting these visual components to code.

Let’s begin.

To make this faster, I’ve already outlined the components using the steps we mentioned in Part 1.

Please note that Organisms are outlined red, smaller Organisms are outlined blue, Molecules are outlined green and Atoms are outlined gold.

First things first, let’s define the folder structure of this project. In order to make it easier to find and identify the different types of components, it is more advisable to separate our components into different folders representing the different atomic stages; atoms, molecules, and organisms as shown below.

Atomic design folder structure
A folder structure should follow a consistent pattern, to allow you (and other people) browse through the files quickly and easily

Start small and work your way up

When visually breaking down a design into components, we start big and work our way down. On the other hand, when building these components with code, it is preferable to do the exact opposite. Build the smaller components first and then use them to compose the larger ones.

For components to be reusable and composable, you have to make them as small and as independent as possible

The first component we will create is the text component outlined in gold as shown above. We have a large title, a small title, and a very small text.

Our first impulse is to build three different components, but that would be duplicate code as the three components will all be performing one function; display text.

We can easily solve this by including a type property. By using this property, we can tell the component what kind of text to display. This property can be eitherheading, subheading or paragraph.

Text.js
Text components with type heading, subheading, and paragraph; Top — Bottom

The next component we’ll create is the restaurant image component. This component will take the image, closed, deliveryDuration, rightLabels, and leftLabels properties. The right labels and the left labels will display the floating divs seen on the restaurants’ image on the right and left respectively.

RestaurantImage.js

Next, we’ll create an organism, SingleRestaurantListing.js to render both the Text and the RestaurantImage components as one component.

The SingleRestaurantListing.js will take the restaurants name, description, image, and delivery duration as props. We will also be able to show if the restaurant is new, available for pre-order and/or closed by including the newRestaurant, preOrder and closed properties.

SingleRestaurantListing.js

The SingleRestaurantListing component should display something similar to what is seen below.

Single Resturant Listing

Next, we’ll create a bigger organism, Section.js that holds a large title and a group of restaurant listings. This organism has to be screen responsive.

In order to achieve responsiveness, we’ll create an atom(i.e. component) called Flex that takes children as props. children in this scenario, is any number of elements/components we put in between the Flex tags.

We’ll also need a FlexItem component to wrap around the SingleRestarantListing component so they all have equal widths.

Flex.js

Now, that we have the Flex and FlexItem components, we’ll import them into Section.js as seen below.

Section.js

Our final view should look like this, you can view this full screen by clicking the Open in Editor button

Let’s walk through what we’ve done so far

  • We split the page design visually into components
  • Next, we structured our folder to follow a consistent pattern
  • Then, we built out the components starting from the atoms, and we worked our way up to the organisms.

C’est Fini! We’ve come to the end of this series. Thank you for reading and thanks for the applause and comments on the first part of this series.


If you have any questions, leave a comment or reach out to me on Twitter@ugonna_t.