Design/Architect Components Structure in React.js?

Suraj Surve — Sun, 16 May 2021 14:12:53 +0000

React.js has component based architecture. Developers community has embraced this kind of approach & that's why React.js popularity gained over the years.

One of the most challenging part in React.js is to design or architect component structure properly. It will help rendering components faster and efficiently. Also, it is easier for new developers to understand and make changes into components very easily.

In this article, we will see how to find components in the prototype of website and how to structure them.

Here is the website prototype where we list down entrepreneurs and search them by their name and birth year.

Find Components From Prototype

Let's start with the Header.

Header is our one of the component. In the header we have two more components. Logo and Logout. So we have got the Three components till now.

1] Header (Parent Component)
2] Logo (Child Component)
3] Logout (Child Component)

Let's come to Filter area now.

We have Filter below Header. Filter can be one of the components. Filter has Two components in it. Year and Search. So we have got the Six components till now.

4] Filter (Parent Component)
5] Year (Child Component)
6] Search (Child Component)

Let's come to Profile area now.

Here we can take Profile as a parent component. It contains three child components. Profile Picture, Bio and Social Profiles. So we have got the Ten components till now.

7] Profile (Parent Component)
8] Profile Picture (Child Component)
9] Bio (Child Component)
10] Social Profiles (Child Component)

Let's come to Footer area now.

We have footer as parent component and copyright information as child component. So we got Two components here. Footer and Copywrite Info. So we have got the twelve components till now.

11] Footer (Parent Component)
12] Copywrite Info (Child Component)

Great, We have almost found all the possible components for this application. Now, there is still one component we need and that is App Component. App components will the topmost parent component. All the parent components above we found, will be the child components under App component.

Here is the diagram representation of it.

If you are aware of one-way data flow in the React.js then from above diagram you can see that the Data, State and Behavior can flow from App component to it's child components.

Each component has its own state and behavior that can be passed to it's child component(s).

If you remove any of the child components from above then it is not going to affect other parts of the application.

Also, you can make separate .js files for all the parent components. Like, App component should be in app.js file and it's child components also can be in separate .js file (header.js, filter.js, profile.js and footer.js).

Bottom child components (in green) can be in their parent component .js files. You don't need to make separate .js files for them because it will be difficult to maintain.

As an application gets complex you will have to make some advance design patterns changes for components to make application fast and maintainable. BUT this is the basic way to start architect or design your components for a new application.

You can also learn how to setup your first react.js project and start designing components shown above.

Subscribe to my blog & Follow me on LinkedIn & Twitter & Facebook

DEV Community: Suraj Surve

Design/Architect Components Structure in React.js?

Find Components From Prototype