Search⌘ K
AI Features
Home
Courses
Mastering TypeScript

Updating the React Application

Explore how to enhance a React application by loading product data from an API endpoint, managing state changes, and integrating MicroEventBus for event-driven updates such as user login and shopping cart actions. Understand how to render loading states with Material UI and update the component lifecycle using RxJS.

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 ...