Log In
Learn React 19: The Complete Guide to Modern Web Apps
0%
1.
Before We Begin
Introduction to Course
2.
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
3.
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
4.
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
5.
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
6.
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
7.
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
Mock Interview
Test Your React Skills
8.
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
9.
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
10.
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
11.
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
Project
Project: Task Manager Dashboard
12.
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
13.
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
14.
Conclusion
Conclude Your React Journey
Home
Courses
Learn React 19: The Complete Guide to Modern Web Apps
Quiz: Advanced Hooks in Practice
Test your understanding of advanced Hooks.
We'll cover the following...