What are React Components?

From Official React website –

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

A component is a reusable piece of your website.

So if you think of your HTML pages as built up of a whole bunch of tags, h1 and div and article tag, React sort of takes that a step further and allows you to build your own tags or components as they are.

Let's actually see this on a real web page.

The following image is a screenshot of official ReacJS web page and it is of course built with React.

This is a normal web page but we can split it into components.

The yellow marked one on the top is a header component in that we have single navigation item components. Then we have this big call to action component which is marked with green rectangle. It has other components like the button. The red rectangle marked ones are some content box components.

All these things are basically building blocks which we can consider as reusable pieces. And they are actually reusing these pieces.

If you look at the red rectangle marked sections, those are actually same element with different content.


We can hard code all these with HTML,  CSS and JavaScript. But we will have to repeat our code over and over again.

Here we created our own HTML elements and then reuse them again and again. This is why components are awesome and why React is all about components.

Leave a Reply

Your email address will not be published. Required fields are marked *