Design/Architect  Components Structure in React.js?

Tags: react, javascript, architecture, design
Published: 2021-05-16 14:12:53

React.js has component based architecture. Developers community has embraced this kind of approach & that's why [React.js popularity](https://www.freecodecamp.org/news/why-use-react-for-web-development/) 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/864cduibovu43sl99mct.png)

##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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4u1d4lr2qo12b486npci.png)

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](https://www.tutorialfunda.com/reactjs/setup-react-js-project-with-next-js-vs-code/) and start designing components shown above.

Subscribe to my [blog](https://www.tutorialfunda.com/blog/) & Follow me on [LinkedIn](https://www.linkedin.com/in/suraj-surve/) & [Twitter](https://twitter.com/s15raj) & [Facebook](https://www.facebook.com/suraj.surve.39/)