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 create a new Products.js file under the components directory).

Products contain the logic of fetched product list iterations. Each iteration renders the card UI for each product. ProductCard is another component, therefore you'll create another file, ProductCard.js, under src/components. You can write the product card logic inside products, but to single out the responsibility 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 work if the user is logged in, else it should redirect the user to the login page.

You now have an idea...