AI Features
Log In
0% completed
All Lessons
Free Lessons (5)
Before We Begin
Introduction to Course
JavaScript for React: A Quick Refresher
Variables and Data Types
Functions, Arrow Functions, and Callbacks
Scope and Closures
Objects and Arrays
JavaScript Asynchronous Programming
Modern JavaScript and ES6+ Features
DOM Essentials for React Developers
Quiz: JavaScript Fundamentals for React
Challenge: Dynamic To-Do List Application
Solution: Dynamic To-Do List Application
Introduction to React
Why React?
What Is React?
Virtual DOM: The Power of React
Understanding JSX Syntax
Rendering JSX Elements in React
Quiz: Introduction to React
Challenge: Displaying a Dynamic Profile Page
Solution: Displaying a Dynamic Profile Page
React Components
Introduction to React Components
Passing Props to Components
Styling Components in React
Handling Events in React Components
Creating Stateless Components
Quiz: React Components
Challenge: Product Listing Page
Solution: Product Listing Page
Hooks: Managing States and Effects in React Components
Understanding Hooks in React
The useState Hook
The useEffect Hook
Combining useState and useEffect for Dynamic Interactions
The useContext Hook
The useRef Hook
The useMemo Hook
Quiz: React Hooks
Challenge: Inventory Management System with Theming
Solution: Inventory Management System with Theming
React Router and Navigations
Introduction to React Router
Defining Routes in React
Navigating Between Pages in React
Dynamic Routing
Nested Routes
404 Page and Wildcard Routes
Programmatic Navigation
Quiz: React Router and Navigation
Challenge: Simplified E-Commerce Application
Solution: Simplified E-Commerce Application
New Improvements in React 19
Ref as a Prop
Cleanup Functions for Refs
Context as a Provider
Support for Document MetaData
Support for Async Scripts
Quiz: React 19 Improvements
Advanced Hooks in Practice
Why Basic Hooks Aren’t Enough
Managing Complex State with useReducer
Optimizing Re-Renders with useCallback and useMemo
Advanced useRef: Persisting Data and Preventing Re-Renders
Custom Hooks: Reusing Logic Across Components
Quiz: Advanced Hooks in Practice
Challenge: Build a Note-Taking App with Advanced Hooks
Solution: Note-Taking App with Advanced Hooks
Concurrency for Smooth UIs
The Problem: Laggy UIs
The useTransition Hook
The useDeferredValue Hook
Choosing Between useTransition and useDeferredValue
Quiz: Concurrency for Smooth UIs
Challenge: Real-Time Stock Dashboard
Solution: Real-Time Stock Dashboard
Handling Forms in React (Controlled and Uncontrolled Components)
The Problem: Managing User Input the Hard Way
Controlled Components in React
Managing Multiple Inputs in React
Handling Form Submission and Validation
Using Refs for Uncontrolled Inputs
Building a Reusable Input Component
Enhancing Forms Accessibility with useId Hook
Managing Form Submission Status with useFormStatus Hook
Managing Form State and Actions with useActionState Hook
Building Instant Feedback with useOptimistic
Quiz: Handling Forms in React
Challenge: Dynamic Registration Form with Optimistic Feedback
Solution: Dynamic Registration Form with Optimistic Feedback
Data Fetching and API Integration
Why Traditional Data Fetching Falls Apart
Fetching Data the React Way
Handling Loading and Errors Gracefully
Simplifying Data Fetching with Axios
Configuring Axios Instances for Reuse
Global Error Handling and Interceptors with Axios
Canceling In-Flight Requests with Axios
React Query: Making Data Fetching Declarative
Caching and Background Updates with React Query
Mutations and Optimistic UI with React Query
Quiz: Data Fetching and API Integration
Challenge: GitHub User Search App
Solution: GitHub User Search
Mini Project
Task Manager Dashboard
Architecting React Apps at Scale
Understanding State Types in Scalable React Apps
State Ownership Philosophy
Context Segmentation for Scalable React Apps
Feature-Based Folder Structures
State Reducer Pattern
Dual-Mode Reducer Components
Reducer-Based Toggle Component
Extending Component Behavior with Reducer Injection
Headless Components: Logic Without UI
Compound Components: Cooperative Child Patterns
Combining Architectural Patterns in React
Case Study: Refactoring a Feature at Scale
Quiz: Architecting React Apps at Scale
Challenge: Build a Theme and Notifications Panel
Solution: Build a Theme and Notifications Panel
React 19 Rendering Internals and Performance Optimization
Understanding the Fiber Architecture
Render and Commit Phases
Concurrent Rendering and Automatic Batching
Profiling React Components
When and Why Memoization Helps
Memoization Pitfalls and Anti-Patterns
React.memo and Shallow Comparison Fundamentals
Selectors and Fine-Grained Reactivity
Case Study: Live Stock Dashboard (Part 1)
Case Study: Live Stock Dashboard (Part 2)
Quiz: React 19 Performance Architecture
Challenge: Refactoring a Slow Comment Viewer App
Solution: Refactored Comment Viewer App
Suspense, Streaming, and Code-Splitting
What Suspense Is and Why It Exists
How Suspense Works Under the Hood
Nested Suspense Boundaries
Error Boundaries and Recovery UX
Understanding Streaming in React 19
Designing Streaming-First UIs
Architectural Lazy Loading with React.lazy
Code-Splitting and Preloading Strategies
Quiz: Suspense, Streaming, and Code-Splitting
Challenge: Build a Streaming Article Viewer with Suspense
Solution: Build a Streaming Article Viewer with Suspense
Server Components (RSC)
Why Server Components Exist
What Server Components Actually Are
Understanding the RSC Rendering Pipeline
Hydration and Client Boundaries in RSC
Designing Components for Server Boundaries
Migrating to RSC Incrementally
Quiz: Server Components (RSC)
Challenge: Keep the Shell Stable with Local RSC Simulation
Solution: Keep the Shell Stable with Local RSC Simulation
Advanced Data Layer with React Query
React Query Cache Deep Dive
Dependent Queries in React Query
Infinite Queries and Pagination Patterns
Mutations and Optimistic Updates
Selective Invalidation and Conditional Refetching
Quiz: Advanced Data Layer with React Query
Challenge: Multi-tab Sync Dashboard
Solution: Multi-tab Sync Dashboard
Real-Time, Background Work and Offline Strategies
Patterns for Real-Time Data
Background Sync and the Stale-While-Revalidate Pattern
Web Workers in React (Offloading Heavy Work)
Offline First UI Strategies
Quiz: Real-Time, Background Work, and Offline Strategies
Challenge: Real-Time Chat Dashboard
Solution: Real-Time Chat Dashboard
Complex Forms and Workflows at Scale
Multi-Step and Wizard Forms
Transactional Forms with React 19
Validation at Scale: Field, Async, and Schema Layers
Accessible Form Patterns for Production-Ready UIs
Quiz: Complex Forms and Workflows at Scale
Challenge: Multi-Step Order Form
Solution: Multi-Step Order Form
Testing Strategies for Confidence
Testing Fundamentals in React
Testing Hooks and Async Logic
Testing Error Boundaries and Suspense
Accessibility Testing with React Testing Library
Quiz: Testing Strategies for Confidence
Challenge: Test a Complex Form Workflow
Solution: Test a Complex Form Workflow
Accessibility, Internationalization, and Design Systems
Accessible UI Architecture
Internationalization (i18n) Patterns
Design Tokens and Theming
Headless Component APIs
Quiz: Accessibility, Internationalization, and Design Systems
Challenge: Accessible, Themeable Component Library
Solution: Accessible, Themeable Component Library
Security, Performance, Budgets and Delivery
Security as a Rendering Boundary in React Applications
Performance Budgets and Monitoring
Error Monitoring and Recovery Hooks
Deployment Best Practices
Quiz: Security, Performance Budgets and Delivery
Challenge: Producton Hardening Audit
Solution: Production Hardening Audit
Conclusion
Conclude Your React Journey
Project
Build a Product Launch Readiness Board Using React 19
Home
Courses
Learn React 19: The Complete Guide to Modern Web Apps
Quiz: Testing Strategies for Confidence
Test your understanding of testing strategies.
We'll cover the following...
...