Web Unit 3 Sprint 9 - Class Components & Testing

Sprint Challenge

Test your knowledge and skills by completing this sprint challenge. You'll demonstrate your understanding of class components, custom hooks, and testing in React applications.

The sprint challenge is designed to assess your ability to apply the concepts you've learned throughout this sprint. You'll need to combine your knowledge of class components, React lifecycle methods, custom hooks, and testing to create a functional, well-tested React application.

This challenge provides an opportunity to showcase your React skills and demonstrate your understanding of component architecture, state management, and testing best practices.

Setup Instructions

Fork and Clone the Repository

Start by forking and cloning the sprint challenge repository:

Challenge Requirements

Core Requirements

  • Implement class components with proper lifecycle methods
  • Create and use custom hooks
  • Write comprehensive tests for components and hooks
  • Handle asynchronous operations and side effects

Stretch Goals

  • Implement advanced testing scenarios
  • Create complex custom hooks
  • Optimize component performance

Technical Requirements

  • Class Components: Implement at least one class component that uses state and lifecycle methods appropriately
  • Lifecycle Methods: Correctly implement and use componentDidMount and other lifecycle methods
  • Custom Hooks: Create at least one custom hook to extract and reuse stateful logic
  • Testing: Write tests for components and hooks using React Testing Library and Jest
  • Asynchronous Logic: Handle asynchronous operations, like API calls, correctly

Evaluation Criteria

  • Functionality: Does the application work as expected?
  • Code Quality: Is the code clean, well-organized, and properly commented?
  • Component Structure: Are components logically organized with proper prop-typing?
  • State Management: Is state managed correctly in class components and hooks?
  • Testing: Are components and hooks properly tested?
  • Error Handling: Does the application handle errors gracefully?

Challenge Steps

  1. Fork and clone the repository
  2. Read the README carefully for detailed instructions
  3. Implement the required components and hooks
  4. Write tests for your implementation
  5. Ensure all tests pass
  6. Submit your solution via PR and the Portal

Tips for Success

  • Start by understanding the project requirements fully before coding
  • Plan your component structure and state management approach
  • Test incrementally as you implement each feature
  • Use the React Developer Tools for debugging
  • Reference the module materials and code-along solutions as needed
  • Manage your time effectively—focus on core requirements before stretch goals

Module Review

Before attempting the sprint challenge, review the key concepts from each module:

Module 1: Class Components

  • Creating class components by extending React.Component
  • Using constructor to initialize state and bind methods
  • Implementing render method
  • Updating state with setState

Module 2: React Lifecycle

  • Understanding the three phases: mounting, updating, unmounting
  • Using componentDidMount for initialization
  • Implementing componentDidUpdate for updates
  • Cleaning up with componentWillUnmount

Module 3: Custom Hooks

  • Creating hooks for reusable stateful logic
  • Following hook naming conventions
  • Composing hooks together
  • Testing custom hooks

Module 4: Testing

  • Using React Testing Library
  • Testing component rendering and behavior
  • Testing user interactions
  • Testing asynchronous code

Additional Resources

Documentation

Code Repositories

Resources

Challenge Repository

Documentation

Solution Repositories

Support

Submission

  • Submit your code through the Portal
  • Ensure all tests pass
  • Include a README with setup instructions
  • Document any stretch goals completed