The Best Approach To Design React Component Hierarchy

Photo by Kelly Sikkema on Unsplash

React allows us to break the user interface into logically connected components. Those components when combined make a complete application structure.

But, if you are a beginner in the React world, you will find yourself stuck at how to approach a layout design and break it into react components. Breaking the application into components is the first and the most crucial step in building a react application. A good structure makes your app scalable, maintainable and testable.

In this article, we are going to learn how to —

1. Break a layout into react components
2. Convert those components into a component hierarchy

What are we going to build?

Figure 1: A simple layout with inter-related components

I know this layout doesn’t look impressive. I have made it simple and after creating this in react, you will learn how to structure your application like a pro! So, hold your excitement and let’s get started.

STEP 1 — Wireframing

Before creating an app, you should create a rough wireframe of it. A wireframe is nothing but a visual representation of the skeletal framework of your app. This will give you a clear view of what your app is going to look like.

Figure 2: Basic layout of the page

STEP 2 — Breaking it into components

Once your wireframe is ready, you can start breaking it into individual components. Now, this can be tricky for beginners. What can be considered as a component?

A component is anything that has its standalone meaning in the layout.

For example, a calculator has a screen and many buttons. The screen is a component as it has its separate use of just displaying the calculations. An individual button is also a component. And finally, the whole calculator can be considered as a root component as it integrates the screen and the button components together.

So, after breaking my layout into components, I come up with the structure below.

Figure 3: Breaking the layout into components

1. App : The outer (root/parent) component that integrates(renders) other(child) components
2. Intro: The landing page section of the webpage, renders heading, subheading and another component Button.
3. Button: Displays a button.
4. Skills: The skill section of the webpage.
5. SkillItem: Individual skill item inside the Skills component.

STEP 3— Creating a component hierarchy

Good work there. After you know your app’s components, let’s define some relationships between them.

We create a tree-like diagram called component hierarchy. This gives us information about the parent-child relationship between components, tells us about which component renders other components and helps us to organize the overall state of the application.

Steps to create a component hierarchy —

1. Start from the root component (App). It will be the root node of the tree.
2. Find it’s direct children components (Intro and Skills).
3. Make a tree and represent App as the root node and Intro and Skills its children.
4. Now, repeat the same process with other component nodes. Find direct children of the components from Figure 3.

Congratulations! You learned how to create a component hierarchy.

Here’s, the component hierarchy —

Figure 4: Component hierarchy

Things we get from the above hierarchy —

1. App is the parent component of the application.
2. App renders two children components — Intro and Skills
3. Intro renders a Button component
4. Skills component renders SkillList (I have created this component as a wrapper component to wrap all the skill items. Not confusion right?)
5. Finally, SkillList renders three SkillItem components

So, these are the initial steps you should follow to make a react project.

Thank you for reading!