React Mastery Docs
•91 modules•Frontend

React Mastery Course

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. Learn to create interactive UIs with component-based architecture, manage state effectively, and build single-page applications that scale.

Your Progress

0%

Track your journey through the React course. Complete topics to increase your progress.

Course Completion0 of 91 topics

0/17

Beginner Done

0/30

Intermediate Done

0/31

Advanced Done

0/13

Expert Done

0

Hours Completed

Beginner Level

Foundational concepts to get you started withReact

Easy

JavaScript You Need Before React

Start Learning
Easy

NPM, npx and Package Management

Start Learning
Easy

ES Modules and the Modern Build Toolchain

Start Learning
Easy

What is React 19? Introduction and Setup

Start Learning
Easy

Choosing a Setup: Vite vs a React Framework

Start Learning
Easy

Project Structure and Files

Start Learning
Easy

JSX Syntax and Expressions

Start Learning
Easy

Rendering Elements with createRoot

Start Learning
Easy

Fragments

Start Learning
Easy

Function Components

Start Learning
Easy

Props, Children and Default Values

Start Learning
Easy

Conditional Rendering

Start Learning
Easy

Lists and Keys

Start Learning
Easy

State and the useState Hook

Start Learning
Easy

Handling Events

Start Learning
Easy

Forms and Controlled Components

Start Learning
Easy

Styling: CSS, CSS Modules and Inline Styles

Start Learning

Intermediate Level

Deep dive into core React concepts and patterns

Intermediate

The Rules of Hooks

Start Learning
Intermediate

useEffect: Synchronising with External Systems

Start Learning
Intermediate

useEffect Dependencies and Cleanup

Start Learning
Intermediate

You Might Not Need an Effect

Start Learning
Intermediate

useRef and DOM Refs

Start Learning
Intermediate

ref as a Prop and ref Cleanup Functions

Start Learning
Intermediate

useReducer

Start Learning
Intermediate

useContext and the Context API

Start Learning
Intermediate

Context as a Provider

Start Learning
Intermediate

useId, useSyncExternalStore and useDebugValue

Start Learning
Intermediate

useEffectEvent for Non-reactive Logic

Start Learning
Intermediate

Custom Hooks

Start Learning
Intermediate

Actions and Async Transitions

Start Learning
Intermediate

useTransition and Pending UI

Start Learning
Intermediate

useActionState

Start Learning
Intermediate

Form Actions and useFormStatus

Start Learning
Intermediate

Optimistic Updates with useOptimistic

Start Learning
Intermediate

Reading Resources with the use API

Start Learning
Intermediate

Fetching with fetch and AbortController

Start Learning
Intermediate

Suspense for Data Fetching

Start Learning
Intermediate

Loading, Error and Empty States

Start Learning
Intermediate

Error Boundaries and Error Handling Options

Start Learning
Intermediate

React Router: Setup and Basics

Start Learning
Intermediate

React Router: Nested Routes and Layouts

Start Learning
Intermediate

React Router: Navigation, Loaders and Actions

Start Learning
Intermediate

Lifting State Up

Start Learning
Intermediate

Prop Drilling and Component Composition

Start Learning
Intermediate

Portals

Start Learning
Intermediate

Document Metadata: title, meta and link

Start Learning
Intermediate

Stylesheets, Async Scripts and Resource Preloading

Start Learning

Advanced Level

Master advanced React patterns and modern features

Advance

React Server Components: The Mental Model

Start Learning
Advance

Server and Client Components with use client

Start Learning
Advance

Server Functions and use server

Start Learning
Advance

Streaming SSR and Selective Hydration

Start Learning
Advance

Next.js App Router with Server Components

Start Learning
Advance

Next.js Rendering Strategies: SSG, ISR and PPR

Start Learning
Advance

Next.js Route Handlers and Middleware

Start Learning
Advance

Redux Toolkit and RTK Query

Start Learning
Advance

Zustand

Start Learning
Advance

Jotai and Atomic State

Start Learning
Advance

TanStack Query for Server State

Start Learning
Advance

React Compiler: Automatic Memoization

Start Learning
Advance

memo, useMemo and useCallback in the Compiler Era

Start Learning
Advance

Code Splitting with lazy and Suspense

Start Learning
Advance

Activity for Pre-rendering and State Preservation

Start Learning
Advance

View Transitions

Start Learning
Advance

useDeferredValue

Start Learning
Advance

React DevTools, Profiler and Performance Tracks

Start Learning
Advance

List Virtualisation

Start Learning
Advance

Forms with React Hook Form

Start Learning
Advance

Schema Validation with Zod

Start Learning
Advance

Tailwind CSS Integration

Start Learning
Advance

Headless and Component Libraries

Start Learning
Advance

TypeScript with React

Start Learning
Advance

Testing with Vitest and React Testing Library

Start Learning
Advance

End-to-End Testing with Playwright

Start Learning
Advance

Accessibility in React

Start Learning
Advance

Class Components and Lifecycle Methods

Start Learning
Advance

Higher-Order Components

Start Learning
Advance

Render Props

Start Learning
Advance

Migrating from React 18 to React 19

Start Learning

Expert Level

High-performance and production-grade React expertise

Expert

Authentication and Authorization Patterns

Start Learning
Expert

Sessions, JWTs and Secure Cookies

Start Learning
Expert

Real-time UIs with WebSockets and SSE

Start Learning
Expert

Caching, Revalidation and Data Freshness

Start Learning
Expert

Internationalisation

Start Learning
Expert

Security: XSS, CSP and Safe Rendering

Start Learning
Expert

SEO and Core Web Vitals

Start Learning
Expert

Deployment and CI/CD

Start Learning
Expert

Monorepos and Design Systems

Start Learning
Expert

Micro-frontends and Module Federation

Start Learning
Expert

Concurrent Rendering Internals: Fiber and Lanes

Start Learning
Expert

Custom Renderers with react-reconciler

Start Learning
Expert

React Native: Reusing React Skills on Mobile

Start Learning