COURSE OUTLINE

Day 1: Scalable Architecture and Component Patterns

·      Session 1: Component Design for Maintainability

o  Presentational vs. container components

o  Compound component pattern

o  Controlled vs uncontrolled components

o  Custom hooks for logic reuse

·      Session 2: Advanced React Patterns

o  Render props, higher-order components (HOC)

o  Memoization: React.memo, useMemo, useCallback

o  Context API in complex component trees

·      Session 3: Modular Architecture & Folder Structure

o  Feature-based project organization

o  Reusable components and shared utilities

o  Building a scalable design system

·      Lab Activities:

o  Refactor a monolithic React component into modular, reusable parts

o  Create and reuse custom hooks

o  Organize a project using a scalable folder structure

Day 2: State Management, Routing & Data Fetching

·      Session 1: Scalable State Management

o  When to use Context, Redux, Zustand, or Jotai

o  Redux Toolkit best practices

o  Normalizing and persisting state

o  Cross-component state with Zustand or Recoil

·      Session 2: React Router & Navigation Strategies

o  Nested routes and dynamic routing

o  Route guards and role-based access

o  Layout components and lazy-loading routes

·      Session 3: Data Fetching and API Integration

o  Fetching strategies: fetch, Axios, React Query

o  Caching, pagination, and optimistic updates

o  Error boundaries and fallback UIs

·      Lab Activities:

o  Build and configure Redux with slices and selectors

o  Implement protected routes and lazy-loaded components

o  Integrate a REST API using React Query

Day 3: Performance Optimization, Testing & Deployment

·      Session 1: Performance Optimization Techniques

o  Avoiding re-renders with memoization and key strategies

o  Virtualized lists with react-window

o  Code splitting and dynamic imports

·      Session 2: Testing React Applications

o  Unit testing with Jest and React Testing Library

o  Integration tests and mocking API calls

o  CI/CD integration for test automation

·      Session 3: Deployment and Production Practices

o  Environment-based configuration

o  Static vs dynamic hosting (Vercel, Netlify, Firebase, etc.)

o  Monitoring and error logging (Sentry, LogRocket)

·      Lab Activities:

o  Profile a React app and eliminate unnecessary re-renders

o  Write tests for components and hooks

o  Deploy a production-ready app using Vercel or Firebase