Mini Map
Search
⌘ K
Log In
Learn React 19: The Complete Guide to Modern Web Apps*
0%
1.
Before We Begin
Welcome to React 19
Phase 1: The Warm Up
Phase 2: Core Fundamentals
Phase 3: Hooks & Patterns
The Toolkit You Need
Start your journey
2.
JavaScript for React: A Quick Refresher
JavaScript: The React Engine
Let vs. Const vs. Var
Understanding Block Scope
Function Evolution Steps
Step 1: Regular Function
Step 2: Arrow Syntax
Step 3: Implicit Return
Arrow Functions and This
Callbacks Made Simple
Closures as Backpacks
Array Power Trio
Map Transform Items
Filter Pick Some
Reduce Combine All
Quiz: Choosing Methods
Sync vs Async Flow
Visualizing Event Loop
Async/Await Upgrade
Modules as JS Legos
Optional Chaining Magic
DOM as a Tree
JS for React Recap
Ready for React!
3.
Introduction to React
The Pain of Plain JavaScript
A Better Way: Declarative UI
The Component Revolution
What is React?
The React Ecosystem
React Router
Redux and State
React Native
Why Components Win
The Real vs. Virtual DOM
How React Updates
Step 1: The Change
Step 2: Diffing
Step 3: Patching
Meet JSX
Quiz: JSX Rules
The Power of Curly Braces
Bridging to the Browser
Strict Mode Assistant
Quiz: Building Dynamic Profiles in React
The Key to Lists
React Basics Recap
4.
React Components
Thinking in Components
Anatomy of a Component
The Hierarchy: Root
The Hierarchy: Children
The Hierarchy: Expansion
Quiz: Identify the Parent
Components are Functions
Convert a Function into a React Component
Export a Component
Understanding Props
One Way Data Flow
Props Make UIs Dynamic
Global Style
Inline Styles
CSS Modules
Inline Style Gotcha
Benefits of CSS Modules
CamelCase Event Handlers
The Parenthesis Trap
Functions as Props
What Is Stateless UI?
Power of Stateless Components
Putting It All Together
React Fundamentals Recap
5.
Hooks: Managing States and Effects in React Components
What are Hooks?
Before vs. After Hooks
Making Memories with useState
Anatomy of useState Syntax
How React Knows to Re-render
Side Effects and useEffect
How Dependency Arrays Work
No Dependency Array Behavior
Empty Dependency Array Behavior
Watching Specific Dependencies
Choosing the Right Dependency Array
Example: Search with State and Effects
Example: Search with State and Effects (continued)
Example: Search with State and Effects (continued)
Example: Search with State and Effects (continued)
What Is Prop Drilling?
The useContext to Skip the Chain
The useRef for Persistent Values
The useState vs useRef
Speeding Up with useMemo
Core Hooks Recap
6.
React Router and Navigations
The Single Page Magic
Manual vs. React Router
Setting the Map
Stop Using Anchor Tags!
Knowing Where You Are
The 100 Page Problem
Dynamic Routing Flow
Dynamic Route: The URL
Dynamic Route Pattern
Reading URL Params
Check Your Params
Layouts and Dashboards
The Outlet Plug
Visualizing the Outlet
Outlet Waiting for Content
Profile in the Outlet
Settings in the Outlet
The 404 Safety Net
Wildcard Rules
Navigating with Code
Using useNavigate
Quiz: Route Matching Logic
Router Recap
7.
Advanced Hooks in Practice
The Juggling Act
Beyond Basic Hooks
Visualizing useReducer
The Scattered Approach
The Centralized Hub
How Dispatch Works
Quiz: When to Switch?
The Re-Render Trap
Callback vs. Memo
Quiz: Performance Check with Hooks
The Stealth Container
State vs. Ref
Don't Repeat Yourself
The Golden Rule
Advanced Hooks Recap
8.
Concurrency for Smooth UIs
The Problem: Laggy UIs
The useTransition Hook
How useTransition Keeps the UI Responsive
The useDeferredValue Hook
useTransition vs. useDeferredValue
Concurrency Toolkit Recap
9.
Handling Forms in React (Controlled and Uncontrolled Components)
Why Forms Matter
Messy Vanilla JS Forms
Controlled Component
Controlled Components 101
The Controlled Data Loop
Step 1: React Renders
Step 2: User Types
Step 3: State Updates
Quiz: Who Owns Input Data?
One State for Many Fields
Single Form State Object
Declarative Validation Basics
Showing Errors the React Way
When Inputs Are Uncontrolled
Controlled vs Uncontrolled
Reusable Inputs FTW
Parent to Input Data Flow
Labels, IDs, and Reuse
Unique IDs with useId
React 19 Form Actions
Automatic Pending State
Handling Results with useActionState
Modern Form Lifecycle
Optimistic UI in React
Step 1: Instant Feedback
Step 2: Sync with Server
Optimistic UI Flow
React Forms Recap
10.
Data Fetching and API Integration
The Chaos of Manual Fetching
ImperativeUI vs. Declarative UI
The React Formula
React data fetching lifecycle
Step 1: Mount & Initial State
Step 2: The Effect Runs
Step 3: State Update & Re-render
Hadling Loading and Errors Gracefully
Fetch vs Axios
Axios Instances to Reuse Config
Interceptors as Gatekeepers
Avoiding Race Conditions
React Query’s vs. useQuery
The React Query cache cycle
Instant Cache Hits
Fetching in the Background
Smooth Cache Updates
Optimistic UI Updates
Quiz: Data Fetching
Recap: Data Fetching and API Integration
11.
Conclusion
Course Complete
Home
Courses
Learn React 19: The Complete Guide to Modern Web Apps*
Stop Using Anchor Tags!
We'll cover the following...
This component is not supported in the current context
...