Who said, “What are Components in React”?

Disclaimer. It's one of the first blogs that I wrote on Medium. I decide to write my technical blogs on Dev so I just move some content here. Hope you would like it.

Really what it is?

According to React docs. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Components are a core concept of the React library. You can create magnificent things using that way of writing your code. But what is a component principle?

Also, React use two types of component. Components based on function ( traditional or arrow function ) and Class component. But both these components deserve separate posts for both of them.

But why bother to use components?

That all sound cool but why bother yourself with learning and implement this concept? The thing that’s if you do this, your code will be much cleaner, more readable, working with code that split into tiny pieces will be much easier.
Let’s take some examples.

We have some component, like the header of a website if we do it old way it looks like that:

Relatively hard to read all this stuff and think about new features, isn’t it? And it is just JSX murk up, without any interactivity. But what if we slice it to smaller parts.

Here we cut out the navigation part of markup and move it to a separate component.

And here we move our form in a separate file as well.

The parent component looks like that right now. I also make a separate component for the logo and place it inside the parent component. It's another way to isolate code chunks and make the development process easier.

See how much cleaner code became, and now for us it’s easier to work with. It’s doing the same thing but all the parts are separated. Even if we add interactivity or state and state management to this, all the components will still much easier to maintain and modify.

But that not all. Your components can be used anywhere across the app and even can be put into the library or as npm packages and be used in other your projects. If you keep in mind, eventually you will start to build your components to use it across your app and other projects as well.

Wrapping things up. Components are the core concept of the React library. They provide the ability to divide our code into smaller parts for much faster development features and keep all the things smaller and reusable.