Workshop 4 - Better React

Dive deeper into React development with advanced concepts such as routing, async/await, and API calls

Workshop Topics

  • Setup and Prerequisites

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

  • Recap of React Basics
    A brief recap of React components and hooks we discussed at Workshop 3

  • 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 products

    • 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 recordingSlidesHomework
Zoom LinkLinkAssignment 4