Workshop 5 - Better React

Workshop Topics

• Setup and Prerequisites

  • Completed Workshop 4
  • Node.js should be installed
  • Familiarity with git

• Recap of React Basics
  A brief recap of React componenets and hooks we discussed at Workshop 4

• Routing
  Introducing routing in React applications with react-router-dom

  • Demo: Add basic routing to an e-commerce application
  • Activity: Implement a routing setup to navigate between product pages

• API Integration and Async Operations
  Grasp the basics of asynchronous operations in JavaScript, crucial for managing API calls like GET and POST in React.

  • Demo: how to use the async and await keywords to fetch product data and add new productsnpx shadcn@latest add "https://magicui.design/r/iphone-15-pro"

  • Activity: implement a feature to fetch and display details of a single product

Materials

The part of the workshop discussing asynchronous functions / concurrency has been re-recorded to offer a better quality explanation. If you did not fully understand that part of the workshop, or if you are watching the recording for the first time, we highly recommend watching the re-recordings of that section.

Workshop recording	Slides	Homework
Recording from the live workshop Re-recording of async/concurrency	Link	Assignment 5