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 - Practice implementing class components and state management
  • Code-Along 2: React Lifecycle Methods - Implement and use lifecycle methods in class components
  • Code-Along 3: Custom Hooks - Create and compose custom hooks for reusable logic
  • Code-Along 4: Testing React Applications - Write tests for components and hooks

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
  • Install Jest and React Testing Library
  • Familiarize yourself with the Jest API and testing patterns

Additional Resources

React.Component Documentation Building Your Own Hooks React Testing Library Jest Documentation