How to think in React? What is a component?

Mon Jun 13 2022

- D. K. Dhabale

Cover Image

Before we build something in react, you need to think in React. So how do you think in React?

Let’s take the example of a shopping cart

Online shopping cart

In this UI, do you see something that is repeating? Yes! the products, even if these are different products with different prices, they have the same UI,
i.e. a picture, a title, buttons to increment/decrement quantity, a price, and a remove button.
Now if you write this in HTML, you will need to write HTML for each of the products there can be hundreds of products, and the data can change at any time!

So what is the solution?

You build a component named "Product”, which takes in the product data and renders the UI for the product!

Product data can be something like 

product1 = {
    id:"PR005",
    name:"Pizza",
    price:"500"
}

Now, this data is taken in by the React component and returned encapsulated in the HTML template that we have built for the product.

So if we were to summarise the rules of what can be a React component.

  1. It is repeated.

  2. It has properties that are variable (like picture, title, and price in the example above).

    So it doesn’t make sense to make a React component for a static(non-changing) paragraph or heading.

This is how you think in React! Now when you open a website, you won’t just see the UI, you will see the structure in terms of lists and components.