React — Fundamentals, Hooks & Modern Patterns
Build reactive UIs with React 19, hooks, Tanstack Query, React Router, and modern state management
React is the world's most popular frontend library. This course teaches React from first principles — JSX, components, props, state — then progressively covers the complete modern React toolkit: hooks (useState, useEffect, useContext, useReducer, useMemo, useCallback, custom hooks), React Router v6, Tanstack Query for server state, Zustand for client state, and React 19's new concurrent features and Server Components concepts.
Course Prerequisites
- JavaScript & TypeScript Foundations: JavaScript & TypeScript Foundations
Part of Academy Track:
What You Will Master
Curriculum Modules (5 Modules)
Explore the structured module breakdown, lesson outcomes, and practical lab exercises.
Module 1: React Core — Components, JSX & Rendering
5 Lessons • ~4.8 Study Hours (0.48 CEUs)Module 1: React Core — Components, JSX & Rendering. Understand React's position in the frontend ecosystem, compare it to Vue and Angular, and set up a React + TypeScript project with Vite.. Understand JSX as syntactic sugar for React.createElement, how the Virtual DOM diffs and reconciles, and the rules of JSX (single root, className, camelCase props).
Course Introduction — React in the Modern Ecosystem
Understand React's position in the frontend ecosystem, compare it to Vue and Angular, and set up a React + TypeScript project with Vite.
JSX & the Virtual DOM
Understand JSX as syntactic sugar for React.createElement, how the Virtual DOM diffs and reconciles, and the rules of JSX (single root, className, camelCase props).
Functional Components & Props
Write functional components, pass typed props with TypeScript interfaces, use prop destructuring, optional props with defaults, and children props for composition.
Rendering Lists & Conditional Rendering
Render arrays with .map() and the key prop requirement, implement conditional rendering patterns: &&, ternary, early return, and the element variable pattern.
Event Handling & Synthetic Events
Handle user events with React's SyntheticEvent system, understand event delegation, prevent default, stop propagation, and type event handlers correctly in TypeScript.
Module 2: State & Core Hooks
5 Lessons • ~5.4 Study Hours (0.54 CEUs)Module 2: State & Core Hooks. Master useState for local component state, understand state updates are asynchronous, use the functional updater pattern, and model complex state correctly.. Use useEffect for side effects: data fetching, subscriptions, timers. Understand the dependency array, cleanup functions, and how to avoid infinite re-render loops.
useState & State Management Fundamentals
Master useState for local component state, understand state updates are asynchronous, use the functional updater pattern, and model complex state correctly.
useEffect & the Component Lifecycle
Use useEffect for side effects: data fetching, subscriptions, timers. Understand the dependency array, cleanup functions, and how to avoid infinite re-render loops.
useRef & Imperative DOM Access
Use useRef to access DOM nodes imperatively (focus, measurements, animations), store mutable values that don't trigger re-renders, and forward refs to child components.
useContext & the Context API
Solve prop drilling with the Context API: createContext, Provider, useContext. Understand when Context is appropriate vs external state management, and how to optimise re-renders.
useReducer for Complex State Logic
Use useReducer when state logic is too complex for useState: action/reducer pattern, typed actions with discriminated unions, combining useReducer with useContext for global state.
Module 3: Advanced Hooks & Component Patterns
5 Lessons • ~5.5 Study Hours (0.55 CEUs)Module 3: Advanced Hooks & Component Patterns. Prevent unnecessary re-renders with useMemo for computed values and useCallback for stable function references. Understand when to optimise and when it's premature.. Extract and share stateful logic with custom hooks: useLocalStorage, useFetch, useDebounce, useOnClickOutside, useWindowSize. Apply the custom hook naming convention and composability pattern.
useMemo & useCallback — Performance Optimisation
Prevent unnecessary re-renders with useMemo for computed values and useCallback for stable function references. Understand when to optimise and when it's premature.
Custom Hooks — Reusable Stateful Logic
Extract and share stateful logic with custom hooks: useLocalStorage, useFetch, useDebounce, useOnClickOutside, useWindowSize. Apply the custom hook naming convention and composability pattern.
Compound Components & Render Props
Design flexible, composable component APIs with the compound component pattern (Tabs, Accordion, Select) and render props for injecting rendering logic into parent components.
React.memo, lazy() & Code Splitting
Prevent unnecessary component re-renders with React.memo, implement route-based code splitting with React.lazy and Suspense, and understand the bundle size implications.
Forms with React Hook Form & Zod Validation
Build performant, validated forms with React Hook Form (zero re-renders), integrate Zod schema validation via @hookform/resolvers, and implement field arrays and nested forms.
Module 4: Routing & Server State Management
5 Lessons • ~5.5 Study Hours (0.55 CEUs)Module 4: Routing & Server State Management. Set up React Router v6 with createBrowserRouter, define nested routes, use useParams, useSearchParams, useNavigate, Link, NavLink, and Outlet for nested UI.. Replace useEffect data fetching with Tanstack Query's useQuery: automatic caching, background refetching, stale-while-revalidate, loading/error states, and query invalidation.
React Router v6 — Routes, Params & Navigation
Set up React Router v6 with createBrowserRouter, define nested routes, use useParams, useSearchParams, useNavigate, Link, NavLink, and Outlet for nested UI.
Tanstack Query — Data Fetching & Caching
Replace useEffect data fetching with Tanstack Query's useQuery: automatic caching, background refetching, stale-while-revalidate, loading/error states, and query invalidation.
Tanstack Query — Mutations & Optimistic Updates
Use useMutation for POST/PUT/DELETE operations, implement optimistic UI updates that immediately reflect changes before server confirmation, and handle rollback on failure.
Tanstack Query — Infinite Queries & Pagination
Implement infinite scroll with useInfiniteQuery, build traditional pagination with useQuery and page params, and prefetch data for faster navigation.
Axios & API Client Architecture
Build a typed Axios API client with interceptors for auth tokens, error normalisation, request cancellation, and retry logic — wrapping it cleanly for use with Tanstack Query.
Module 5: Global State Management & React 19
4 Lessons • ~5 Study Hours (0.5 CEUs)Module 5: Global State Management & React 19. Replace Redux boilerplate with Zustand: create stores with actions, use Immer for immutable updates, implement devtools middleware, persist state to localStorage, and slice the store for large apps.. Explore React 19's new APIs: useTransition for non-blocking UI updates, useOptimistic for instant feedback, use() for promise unwrapping, and the new form actions model.
Zustand — Lightweight Global State Management
Replace Redux boilerplate with Zustand: create stores with actions, use Immer for immutable updates, implement devtools middleware, persist state to localStorage, and slice the store for large apps.
React 19 — useTransition, useOptimistic & New Hooks
Explore React 19's new APIs: useTransition for non-blocking UI updates, useOptimistic for instant feedback, use() for promise unwrapping, and the new form actions model.
Suspense, Error Boundaries & Concurrent Features
Use Suspense for data fetching and code splitting, wrap components in ErrorBoundary for graceful error recovery, and understand React's concurrent rendering model.
Capstone Project: Full Dashboard with Auth, Charts & Real-Time
Build a complete React dashboard with JWT authentication (Tanstack Query + Axios), Zustand state, React Router protected routes, Recharts data visualisation, and a Socket.IO real-time feed.
Frontend Engineering Progression
Continue advancing through the sequential curriculum stages of this academy track: