Week 6: Advanced React & Testing

Frontend

Advanced React patterns, performance optimization, and comprehensive testing strategies.

Learning Objectives

Detailed Schedule

Session 1: Advanced React Features (1 hour)

React Portals (25 minutes)

  • Portal concepts and use cases
  • Creating portals with createPortal
  • Modal and overlay implementations
  • Portal event handling

Error Boundaries (20 minutes)

  • Error boundary components
  • Error handling and recovery
  • Fallback UI strategies

Practice Exercise (15 minutes)

Build modal components using portals and error boundaries

Session 2: React Testing (1 hour)

Testing Fundamentals (25 minutes)

  • Jest testing framework setup
  • React Testing Library basics
  • Component rendering tests
  • User interaction testing

Advanced Testing (20 minutes)

  • Mocking and stubbing
  • Testing async operations
  • Testing custom hooks

Practice Exercise (15 minutes)

Write comprehensive tests for React components and hooks

Session 3: Performance and Optimization (1 hour)

React Profiler (25 minutes)

  • Performance profiling tools
  • Identifying performance bottlenecks
  • Component rendering optimization
  • Memory leak detection

Bundle Optimization (20 minutes)

  • Code splitting strategies
  • Lazy loading components
  • Bundle size analysis

Practice Exercise (15 minutes)

Optimize a React application for performance and bundle size

Key Concepts

Advanced Patterns

  • • Higher-Order Components
  • • Render props pattern
  • • Compound components
  • • Custom hooks patterns

Performance

  • • React.memo and memoization
  • • useMemo and useCallback
  • • Code splitting
  • • Bundle optimization

Testing

  • • React Testing Library
  • • Component testing
  • • Integration testing
  • • Accessibility testing

Error Handling

  • • Error boundaries
  • • Error testing
  • • Graceful degradation
  • • User feedback

Hands-on Activities

Activity 1: Custom Hook Library

Build a collection of custom hooks for common functionality like form handling, API calls, and local storage.

Custom Hooks Reusability Patterns

Activity 2: Performance Optimization

Optimize a large list component with virtual scrolling and memoization techniques.

React.memo useMemo Virtual Scrolling

Activity 3: Component Testing Suite

Write comprehensive tests for React components including user interactions and edge cases.

React Testing Library User Interactions Edge Cases

Activity 4: Error Boundary Implementation

Create error boundaries and test error handling scenarios in React applications.

Error Boundaries Error Testing Graceful Degradation

Weekly Project: Enhanced Dashboard with Testing

Project Overview

Enhance the social media dashboard with advanced React patterns, performance optimizations, and comprehensive testing.

Advanced Features:

  • Custom hooks for data fetching
  • Error boundaries for graceful error handling
  • Performance optimizations with memoization
  • Virtual scrolling for large data sets
  • Code splitting for better performance
  • Comprehensive test coverage

Technical Requirements:

  • Advanced React patterns implementation
  • Performance optimization techniques
  • Comprehensive testing with RTL
  • Error boundary implementation
  • Custom hooks development
  • Test-driven development approach

Enhanced Project Structure: 

src/
├── components/
│   ├── Advanced/
│   │   ├── ErrorBoundary.jsx
│   │   ├── VirtualList.jsx
│   │   └── LazyComponent.jsx
│   └── HOCs/
│       ├── withErrorBoundary.jsx
│       └── withLoading.jsx
├── hooks/
│   ├── useApi.js
│   ├── useLocalStorage.js
│   ├── useDebounce.js
│   └── useInfiniteScroll.js
├── utils/
│   ├── performance.js
│   └── errorHandling.js
├── tests/
│   ├── components/
│   ├── hooks/
│   └── utils/
└── App.jsx

Assessment Criteria

Technical Skills (60%)

  • Advanced React patterns (20%)
  • Performance optimization (15%)
  • Testing implementation (15%)
  • Error handling (10%)

Project Quality (40%)

  • Code quality and patterns (15%)
  • Test coverage and quality (15%)
  • Performance improvements (10%)

Teaching Resources

Code Examples:

Additional Resources: