Building and Using a Component in React How? and Why?

This is one of the things i just learned today.

Components are the foundation of every React application. which we all agree on

Until yesterday i have only been using the App component. and i knew that will not end well as components should scale with your application size. So if i want to build a better application i need to split the app into components.

This is my code from my last story:

Instead of making one component larger and more complex, we’ll split one component into multiple components eventually. We’ll start a new List component which extracts functionality from the App component:

Then the new List component can be used in the App component where we have been using the inline functionality previously:

Congrats, you have just created your first React component! With this example in mind, we can see how components encapsulate meaningful tasks while contributing to the greater good of a larger React application.

Extracting a component is a task that you will perform very often as a React developer because it’s always the case that a component will grow in size and complexity.

Let’s do this extraction of a component one more time for a so-called Search component:

Finally, we have three components in our application:

App, List, and Search. Generally speaking, a React application consists of many hierarchical components; which we can put into the following categories:

React applications have component hierarchies (also called component trees). There is usually one uppermost entry point component (e.g. App) that spans a tree of components below it.

The App is the parent component of the List and Search, so the List and Search are child components of

the App component and sibling components to each other. The illustration takes it one step further

where the Item component is a child component of the List.

In a component tree, there is always a root component (e.g. App), and the components that don’t render any other components are called leaf components (e.g. List/Search component in our current source code or Item/Search component from the illustration).

All components can have zero, one, or many child components.

Happy coding!!

Building and Using a Component in React How? and Why? was originally published in Javarevisited on Medium, where people are continuing the conversation by highlighting and responding to this story.

This post first appeared on Read More