Web Unit 3 Sprint 9 - Class Components & Testing

Code-Along Sessions

Join us for interactive coding sessions where we'll work through real-world examples and practice implementing class components, React lifecycle methods, custom hooks, and testing in React applications.

These hands-on sessions are designed to reinforce the concepts from the modules and give you practical experience with implementing React patterns in realistic scenarios. By coding along with the instructor, you'll gain confidence and develop muscle memory for these important React techniques.

Code-Along Schedule

Code-Along 1: Class Components

Overview

In this code-along session, we'll build a React application using class components. You'll learn how to:

  • Create class components by extending React.Component
  • Initialize state in the constructor
  • Use the render method to return JSX
  • Update state using this.setState()
  • Pass data between components using props
  • Handle events in class components

Preparation

Before the session, please:

  • Review Module 1 content on class components
  • Make sure you have Node.js and npm installed
  • Familiarize yourself with the "CCR" approach (Class, Constructor, Render)

Code-Along 2: React Lifecycle Methods

Overview

In this session, we'll explore the React component lifecycle, focusing on:

  • Understanding the three phases of the component lifecycle (mounting, updating, unmounting)
  • Implementing key lifecycle methods like componentDidMount and componentDidUpdate
  • Using lifecycle methods to fetch data from APIs
  • Cleaning up resources with componentWillUnmount
  • Optimizing rendering with shouldComponentUpdate

Preparation

Before the session, please:

Code-Along 3: Custom Hooks

Overview

In this session, we'll create and use custom hooks to extract and share stateful logic:

  • Understanding when and why to use custom hooks
  • Extracting logic from components into hooks
  • Creating common custom hooks (useForm, useLocalStorage, useAPI)
  • Composing hooks to build more complex functionality
  • Testing custom hooks

Preparation

Before the session, please:

  • Review Module 3 content on custom hooks
  • Familiarize yourself with React's built-in hooks (useState, useEffect, useContext)
  • Review the rules of hooks in the React documentation

Code-Along 4: Testing React Applications

Overview

In our final code-along, we'll write tests for React components and hooks:

  • Setting up Jest and React Testing Library
  • Writing unit tests for components
  • Testing user interactions and event handling
  • Testing asynchronous code and API calls
  • Testing custom hooks
  • Using mocks and spies in tests

Preparation

Before the session, please:

  • Review Module 4 content on testing
  • Familiarize yourself with Jest and React Testing Library
  • Understand the concept of testing user behavior vs. implementation details

Resources

Code-Along Repositories

Solutions

How to Join a Code-Along

  1. Log in to your BloomTech platform account
  2. Navigate to the "Live Events" section
  3. Look for available Web Development code-along sessions
  4. If no sessions are currently scheduled, please reach out to the Web Development team to request one
Access Live Events

Preparation Checklist

  • Review the module content before attending
  • Set up your development environment
  • Have your questions ready
  • Test your audio and video setup

Contact the Web Development Team

Need to schedule a code-along session? Have questions? Contact the Web Development team:

  • Use the #help-web channel in Slack
  • Reach out to your Team Lead
  • Contact your Section Lead