ReactJS Course Built for AI-Paired Learning

This chapter focuses on What React is and the problem it solves, Declarative against imperative UI, Setting up a project with Vite and the practice needed to use these concepts confidently in real projects.

• What React is and the problem it solves
• Declarative against imperative UI
• Setting up a project with Vite
• Project structure and conventions
• The root render and StrictMode
• JSX syntax and its rules
• Expressions inside JSX
• JSX attributes and camelCase props
• Fragments and why they exist
• Components as functions
• Composing components
• Props and one-way data flow
• Default and derived props
• The children prop
• Conditional rendering patterns
• Rendering lists and the key prop
• Why index keys cause bugs
• The virtual DOM and reconciliation
• Render, commit and effects phases
• Pure components and render purity
• The React DevTools component tree
• Reading React error messages

This chapter focuses on What state is and when to use it, useState and the state setter, Functional updates and stale state and the practice needed to use these concepts confidently in real projects.

• What state is and when to use it
• useState and the state setter
• Functional updates and stale state
• State batching
• State as a snapshot
• Objects and arrays in state
• Immutable update patterns
• Lifting state up
• Deriving values instead of storing them
• Choosing state structure
• useReducer for complex transitions
• Reducer patterns and action design
• Comparing useState and useReducer
• Event handlers and synthetic events
• Passing handlers as props
• Preventing default and stopping propagation
• Controlled inputs
• Uncontrolled inputs and refs
• Form submission handling
• Keyboard and focus events
• Debouncing user input
• Resetting state with the key prop

This chapter focuses on What an effect is for, useEffect and the dependency array, Cleanup functions and the practice needed to use these concepts confidently in real projects.

• What an effect is for
• useEffect and the dependency array
• Cleanup functions
• Effects running twice in development
• Synchronising with external systems
• Subscribing to browser events
• Timers and intervals in effects
• Fetching data in an effect and its pitfalls
• Race conditions and ignoring stale responses
• AbortController with effects
• Effects you do not need
• Deriving state during render instead
• Event handlers instead of effects
• useLayoutEffect and when it matters
• useInsertionEffect overview
• Refs with useRef
• Refs for DOM access
• Refs for mutable values
• Forwarding refs
• useImperativeHandle
• useSyncExternalStore
• Debugging dependency array problems

This chapter focuses on The rules of hooks, Why hooks cannot be conditional, Extracting a custom hook and the practice needed to use these concepts confidently in real projects.

• The rules of hooks
• Why hooks cannot be conditional
• Extracting a custom hook
• Naming and API design for hooks
• A useToggle hook
• A useLocalStorage hook
• A useDebounce hook
• A useFetch hook
• A useMediaQuery hook
• A usePrevious hook
• Composing hooks together
• Sharing logic without sharing state
• Testing custom hooks
• Typed hooks in TypeScript
• Generic hooks
• Hooks and closures over stale values
• Returning tuples against objects
• Documenting hook contracts
• Publishing a hooks library
• When a hook should be a component
• When a hook should be a service
• Refactoring duplicated component logic

This chapter focuses on Prop drilling and its cost, Creating a context, The provider and consumer model and the practice needed to use these concepts confidently in real projects.

• Prop drilling and its cost
• Creating a context
• The provider and consumer model
• useContext in practice
• Default context values
• Typing context safely
• Splitting value and dispatch contexts
• Context re-render behaviour
• Memoising context values
• Multiple providers and composition
• Context against a state library
• Local, shared and server state
• Choosing where state should live
• Reducer plus context pattern
• External stores and subscriptions
• Zustand-style stores overview
• Redux Toolkit overview
• Selecting slices without over-rendering
• Normalising entities in the client
• Persisting state between sessions
• Undo and redo patterns
• Refactoring towards a clear state layer

This chapter focuses on Why server state is different, Loading, error, empty and success states, Designing a request lifecycle and the practice needed to use these concepts confidently in real projects.

• Why server state is different
• Loading, error, empty and success states
• Designing a request lifecycle
• Typed API clients
• Handling HTTP errors well
• Retrying and backoff
• Cancellation on unmount and navigation
• Caching fetched data
• Stale-while-revalidate thinking
• Query libraries and what they provide
• Query keys and invalidation
• Pagination and cursors
• Infinite scrolling
• Optimistic updates
• Rollback on failure
• Mutations and cache updates
• Polling and real-time updates
• WebSocket integration
• Suspense for data fetching
• Streaming and progressive rendering
• Error boundaries around data
• Offline behaviour and retries

This chapter focuses on Presentational and container split, Composition over configuration, Compound components and the practice needed to use these concepts confidently in real projects.

• Presentational and container split
• Composition over configuration
• Compound components
• Context inside compound components
• Render props
• Higher-order components and their decline
• Headless component design
• Slot-based APIs
• Polymorphic components and the as prop
• Controlled and uncontrolled component APIs
• Prop naming and API ergonomics
• Sensible defaults and escape hatches
• Error boundaries
• Portals for overlays
• Modals, drawers and focus trapping
• Accessible menus and comboboxes
• Tabs, accordions and disclosure widgets
• Toasts and notification queues
• Virtualised lists
• Drag and drop basics
• Design system component contracts
• Documenting components for consumers

This chapter focuses on Client-side routing concepts, Route configuration, Nested routes and layouts and the practice needed to use these concepts confidently in real projects.

• Client-side routing concepts
• Route configuration
• Nested routes and layouts
• Route parameters
• Search parameters as state
• Programmatic navigation
• Link components and prefetching
• Route guards and protected routes
• Redirects after authentication
• Loading states during navigation
• Error routes and not-found pages
• Scroll restoration
• Code splitting per route
• Lazy routes and Suspense fallbacks
• Form libraries and their trade-offs
• Schema-based validation
• Field arrays and dynamic forms
• Multi-step form state
• File uploads with progress
• Accessible error messaging
• Preventing double submission
• Persisting drafts

This chapter focuses on Measuring before optimising, The React Profiler, Identifying unnecessary re-renders and the practice needed to use these concepts confidently in real projects.

• Measuring before optimising
• The React Profiler
• Identifying unnecessary re-renders
• Referential equality and props
• memo and when it helps
• useMemo for expensive computation
• useCallback for stable handlers
• The React Compiler and automatic memoisation
• Splitting components to limit re-render scope
• Colocating state near where it is used
• Deferring work with useDeferredValue
• useTransition and non-urgent updates
• Concurrent rendering concepts
• Suspense boundaries and placement
• List virtualisation
• Image loading strategy
• Bundle analysis
• Dynamic imports and lazy components
• Reducing dependency weight
• Avoiding layout thrash
• Core Web Vitals for React apps
• A performance review checklist

This chapter focuses on Testing philosophy for components, React Testing Library principles, Querying by role and accessible name and the practice needed to use these concepts confidently in real projects.

• Testing philosophy for components
• React Testing Library principles
• Querying by role and accessible name
• Simulating user interaction
• Testing forms and validation
• Testing asynchronous UI
• Mocking network requests
• Testing hooks
• Testing context providers
• Snapshot tests and their limits
• End-to-end testing overview
• Accessibility testing in CI
• Linting and formatting setup
• TypeScript configuration for React
• Typing props, children and events
• Error tracking in production
• Feature flags and gradual rollout
• Environment configuration
• Build and deployment pipeline
• Monitoring and real user metrics
• Project: building the full application
• Project: review, hardening and walkthrough