Learn React 19: The Complete Guide to Modern Web Apps*

Learn React 19: The Complete Guide to Modern Web Apps**

Beginner

189 Lessons

1h

Certificate of Completion

Learn React 19: The Complete Guide to Modern Web Apps**

AI-POWERED

Explanations

AI-POWERED

Explanations
Course Overview
Course Content

Course Overview

Learn React 19: The Complete Guide to Modern Web Apps**

Course Content

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

23 Lessons

7.

Advanced Hooks in Practice

15 Lessons

8.

Concurrency for Smooth UIs

6 Lessons

9.

Handling Forms in React (Controlled and Uncontrolled Components)

28 Lessons

10.

Data Fetching and API Integration

20 Lessons

11.

Conclusion

1 Lesson

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath