Consuming APIs using Fetch

Let’s create the first component — that is, the Product Listing page. Create a new file in the src/components directory with the name ProductList.js. This is the parent component of the Product Listing page.

This component fetches the products from the backend server and passes them to the child component, Products (it creates a new Products.js file under the src/components directory).

Products contains the logic responsible for looping through the fetched product list. Each iteration renders the card UI of each product. This product card component is represented using ProductCard, another component. Therefore, let’s create a ProductCard.js file, under src/components.

You can write the product card code inside products (product list component), but to single out the responsibilities, it’s better to create a new component.

The ProductCard component has a Buy now button and an Add to bag link. These links should only...