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
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.
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.
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 either
The next component we’ll create is the restaurant image component. This component will take the
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.
Next, we’ll create an organism,
SingleRestaurantListing.js to render both the
Text and the
RestaurantImage components as one component.
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
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
We’ll also need a
FlexItem component to wrap around the
SingleRestarantListing component so they all have equal widths.
Now, that we have the
FlexItem components, we’ll import them into
Section.js as seen below.
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.