Updating the React Application

Learn how to load data from an API in a React application, update the component state, and display a progress indicator while waiting for the API response.

We'll cover the following

Let’s now turn our attention to our Product List front-end that we built using React.

We will need to update it in a few places:

  • Fetch data from the /products API endpoint to populate our list of products

  • Integrate the MicroEventBus in a test environment

  • Listen for a 'user-logged-in' event, and store the provided username locally

  • Broadcast an event when a user adds a product to their shopping cart

Loading data from an API

Our React application has been displaying a list of products from a manually generated array. This array is defined in the product-list/src/Products.tsx file and is the items property of the Collection class. We will now load these items from our /products API endpoint. We will still need the Collection class, but it now becomes just a holder for the array of items:

Get hands-on with 1200+ tech skills courses.