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

Ugonna Thelma
Dec 21, 2018 · 4 min read

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.

Image for post
Image for post

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.

Image for post
Image for post
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

Image for post
Image for post

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

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.

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.

Backticks & Tildes

Distributed knowledge without borders

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store