Introduction

Setup

A Basic React App

The React Source Code

SECTION: The DOM and Declarative Programming

HTML and Trees

HTML, The Browser, and the DOM

DOM Manipulation

Conceptual Aside: Imperative vs Declarative Programming

The DOM and Imperative Programming

The DOM and Declarative Programming

SECTION: React Elements

Conceptual Aside: Recursion

Conceptual Aside: POJOs

Creating React Elements

React Element Trees

Conceptual Aside: DOM Element References

React Elements and DOM Elements

React DOM Updates

Components

Components and Reusability

Conceptual Aside: Pure Functions

Props

Template Logic

Element Properties

SECTION: JSX

Conceptual Aside: Markup and Tree Creation Shorthand

Conceptual Aside: Transformation

React Elements and JSX

JSX and Thinking In Elements

Conceptual Aside: HTML Authoring

Fragment and HTML authoring

SECTION: Fiber and Reconciliation

Root Creation and render

Conceptual Aside: Trees and Linked Lists

Fiber, Fiber Nodes, and Fiber Trees

Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem

Work-In-Progress Nodes

Reconciliation and Work

SECTION: Execution Contexts

Conceptual Aside: Execution Contexts and the Event Loop

Fiber and Custom Execution Contexts

Units of Work and The Work Loop

Conceptual Aside: Equality

Beginning, Completing, Bailing Out and Pausing Work

Lanes and Priority

SECTION: React DOM and Rendering

Committing Work and The Renderer

Mounting, Updating, and Unmounting

SECTION: Events

DOM Events

React Event Objects

Synthetic Event Properties and Methods

SECTION: State

Conceptual Aside: State Machines

Conceptual Aside: Pure Functions (again)

UI: A Function of State

Conceptual Aside: Reducers

Actions and State

SECTION: Hooks and State

Fibers, Hooks, and State

Conceptual Aside: Queues

Update Queues

State and Re-renders

useReducer (Part 1)

useReducer (Part 2)

useState (Part 1)

useState (Part 2)

Rules of Hooks

Enroll in the Full Course

Tony Alicea

Get lifetime access to the full 16.5 hour course here!: https://understandingreact.com

Section "useReducer (Part 2)" at 5:39:02 has no sound (the rest of the video does!). You can watch that section with sound here: https://dontimitateunderstand.com/courses/understanding-react/lectures/46000855

PPP Request form: https://anthonyalicea.com/courses/understanding-react-ppp/

0:00 Introduction
2:52 Setup
4:43 A Basic React App
6:50 The React Source Code
8:56 SECTION: The DOM and Declarative Programming
9:17 HTML and Trees
11:17 HTML, The Browser, and the DOM
15:20 DOM Manipulation
21:53 Conceptual Aside: Imperative vs Declarative Programming
24:53 The DOM and Imperative Programming
28:05 The DOM and Declarative Programming
32:13 SECTION: React Elements
32:39 Conceptual Aside: Recursion
36:56 Conceptual Aside: POJOs
49:49 Creating React Elements
1:01:25 React Element Trees
1:06:50 Conceptual Aside: DOM Element References
1:08:22 React Elements and DOM Elements
1:14:23 React DOM Updates
1:26:37 Components
1:32:39 Components and Reusability
1:43:45 Conceptual Aside: Pure Functions
1:49:04 Props
2:01:28 Template Logic
2:15:40 Element Properties
2:22:58 SECTION: JSX
2:23:19 Conceptual Aside: Markup and Tree Creation Shorthand
2:25:13 Conceptual Aside: Transformation
2:27:02 React Elements and JSX
2:46:44 JSX and Thinking In Elements
2:58:43 Conceptual Aside: HTML Authoring
3:01:32  Fragment and HTML authoring
3:11:36 SECTION: Fiber and Reconciliation
3:12:18 Root Creation and render
3:21:15 Conceptual Aside: Trees and Linked Lists
3:25:36 Fiber, Fiber Nodes, and Fiber Trees
3:32:33 Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem
3:36:18 Work-In-Progress Nodes
3:45:49 Reconciliation and Work
3:51:35 SECTION: Execution Contexts
3:51:56 Conceptual Aside: Execution Contexts and the Event Loop
3:55:39 Fiber and Custom Execution Contexts
3:59:54 Units of Work and The Work Loop
4:02:53 Conceptual Aside: Equality
4:06:27 Beginning, Completing, Bailing Out and Pausing Work
4:13:28 Lanes and Priority
4:16:04 SECTION: React DOM and Rendering
4:16:19 Committing Work and The Renderer
4:19:13 Mounting, Updating, and Unmounting
4:24:02 SECTION: Events
4:24:26 DOM Events
4:36:03 React Event Objects
4:43:54 Synthetic Event Properties and Methods
4:49:38 SECTION: State
4:49:55 Conceptual Aside: State Machines
4:56:32 Conceptual Aside: Pure Functions (again)
4:59:13 UI: A Function of State
5:01:59 Conceptual Aside: Reducers
5:08:31 Actions and State
5:17:26 SECTION: Hooks and State
5:17:51 Fibers, Hooks, and State
5:21:57 Conceptual Aside: Queues
5:25:50 Update Queues
5:28:37 State and Re-renders
5:31:15 useReducer (Part 1)
5:39:02 useReducer (Part 2)
5:45:08 useState (Part 1)
5:49:24 useState (Part 2)
6:00:10 Rules of Hooks
6:07:55 Enroll in the Full Course

Understanding React: The First 6 Hours

Understanding React: The First 6 Hours

Understanding React: The First 6 Hours

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path