Breaking down the UI into React Component Hierarchy
If you have a basic understanding of React Components, then you can easily understand what we are going to see below. The first exercise of any React UI development is to break down the UI into components. Let’s see the steps as follows:
Preparing a mock UI
There are lots of tools available (ex: Adobe XD) to create a mock of the UI we are going to develop using React. This is a very important step as we are going to have a look into this mock often and change parts of UI if needed till the development gets over. Once the mock is ready, we are ready for the next step.
Breaking down the UI as components
This is the most important step as we are going to represent the UI as components. How to do it ? Let’s go top to bottom. Identify different sections in the UI and name them. Identify sub-sections inside every section and name those as well. We need to repeat the same till we reach a point where we cannot divide further and that leaves us to an HTML element. All the sections and sub-sections that we identified and named here are components. Thus a hierarchy of components form the UI in React.
Let’s take Facebook for example as most of us are very used to the UI experience. Let’s break down the Facebook home UI page into components.
As the home page has a lot of sections, We will take the middle section
(Create Post and the News Feed)
Create Post and News Feed sections — There are two sections which we can identify very easily in first level which are Create Post and News Feed sections. Let’s name the former CreatePost component and the latter NewsFeed component.
The next step is to take CreatePost component and identify sub-components inside this. We can identify three sections within this. First section we can call as Post Type section which displays the different types of post we can make and let us name this PostType section. Second section is Post Content section which takes the Post content from the user and let’s name it PostContent component. Third section is about setting privacy and publishing the post. Let’s call the third section PublishPost section.
Now that we have identified sub-components of the CreatePost component, let’s take one of these sub-components and identify sub-components until we hit the bottom. Let’s take PostContent sub-component which has to display User Avatar and Post content box and let’s us name the former UserAvatar and the latter PostContentBox. Now let’s take UserAvatar which has come to the final level of an html Image element or in other words we cannot break this down further. Now let’s take PostContentBox which has also come to the final level of an html Input element. Let’s try to put this in JSX so that we can understand easily.
.<Home>
..<MiddleSection>
…<CreatePost>
….<PostType/>
….<PostContent>
…..<UserAvatar>
……<Img/>(final level)
…..</UserAvatar>
…..<PostContentBox>
……<Input/>(final level)
…..</PostContentBox>
.…</PostContent>
…<PublishPost/>
…</CreatePost>
…<NewsFeed>
…</NewsFeed>
..</MiddleSection>
.</Home>
This is how we should map UI to react components. We didn’t break down every component in the CreatePost component and we just broke down one sub-component(PostContent) in to hierarchy. We can do similarly for the other components like NewsFeed to get the whole hierarchy.
Once we have components identified and named, as we proceed we can see the other places where we can re-use the same components in the same page and even across pages and even across different applications. For instance, we have created CreatePost component which could be reused in the Facebook Profile page. We have created UserAvatar component inside the CreatePost component which can be used in every Post component of NewsFeed component (had we broken it down) and in each of the User component(active users) in the sideBar component(had we broken it down).
Now that we are done with breaking down the UI into components, we will see in my next article about technical aspects of components including props, state etc. We will also see how to give responsibilities to the components and manage state in React. This is my first ever article in Medium, so cut me some slack :)
Refer to this well written official documentation by facebook on the same topic.