Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Inside React: Learn How React Really Works
Section 0: Introduction
Introduction (1:44)
Exercise: Meet Your Classmates and Instructor
Understanding Your Video Player
Set Your Learning Streak Goal
Course Resources
Section 1: Inside React
Setup: Getting Ready to Learn (1:53)
A Basic React App (2:07)
The React Source Code (2:05)
Section 2: The Document Object Model (DOM) and Declarative Programming
Introduction (0:20)
HTML and Trees (2:00)
HTML, the Browser, and the DOM (4:02)
DOM Manipulation (6:31)
Conceptual Aside: Imperative vs Declarative Programming (3:00)
The DOM and Imperative Programming (3:11)
The DOM and Declarative Programming (3:56)
Let's Have Some Fun (+ More Resources)
Section 3: React Elements
Introducing React Elements (0:27)
Conceptual Aside: Recursion (4:17)
Conceptual Aside: POJOS (Plain Old Javascript Objects) (12:52)
Creating React Elements (11:36)
React Element Trees (5:23)
Conceptual Aside: DOM Element References (1:31)
React Elements and DOM Elements (6:03)
React DOM Updates: React's Imperative Code (12:10)
Components (6:01)
Components and Reusability (11:05)
Conceptual Aside: Pure Functions (5:18)
Props: Function Arguments (12:24)
Template Logic: Logic and Building Trees (14:11)
Element Properties (7:17)
Unlimited Updates
Section 4: JSX (Java Script XML) - React
Introducing JSX (0:21)
Conceptual Aside: Markup and Tree Creation Shorthand (1:56)
Conceptual Aside: Transformation and Transpilation (1:48)
React Elements and JSX (19:40)
JSX and Logic (12:00)
Conceptual Aside: HTML Authoring (2:47)
Fragment and HTML Authoring (10:03)
Implement a New Life System
Section 5: Fiber and Reconciliation
Introducing Fiber and Reconciliation (0:43)
Root Creation and Render (8:57)
Conceptual Aside: Trees and Linked Lists (4:23)
Fiber Nodes and Fiber Trees (6:57)
Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem (3:44)
Work-in-Progress Nodes (9:27)
Reconciliation and Work (5:48)
Course Check-In
Section 6: Execution Context
Introducing Execution Context (0:21)
Conceptual Aside: Execution Contexts and the Event Loop (3:32)
Fiber and Custom Execution Context (4:14)
Units of Work and the Work Loop (3:00)
Conceptual Aside: Equality (3:34)
Beginning, Completing, Bailing Out, and Pausing Work (7:01)
Lanes and Priority (2:35)
Section 7: React DOM and Rendering
Introducing React DOM and Rendering (0:13)
Commiting Work and the Renderer (2:55)
Mounting, Updating, and Unmounting (4:48)
Section 8: Events
Introducing Events (0:23)
DOM Events (11:36)
React Event Objects (7:52)
Synthetic Event Properties and Methods (5:43)
Exercise: Imposter Syndrome (2:55)
Section 9: State in Programming
Introducing State (0:16)
Conceptual Aside: State Machines (6:35)
Conceptual Aside: Pure Functions (2:41)
User Interface (UI): a Function of State (2:46)
Conceptual Aside: Reducers (6:31)
Actions and State (8:54)
Section 10: Hooks and State
Introducing Hooks and State (0:24)
Fiber, Hooks, and State (4:03)
Conceptual Aside: Queues (3:54)
Update Queues (2:46)
State and Re-Renders (2:38)
useReducer - Part 1 (7:48)
useReducer - Part 2 (6:04)
useState - Part 1 (4:16)
useState - Part 2 (10:47)
Rules of Hooks (7:43)
useState - Part 3 (10:36)
Conceptual Aside: Shallow Equality and Object.is (8:10)
Immutable State (7:46)
Section 11: Adding Your Own Side Effects: useEffect
Introduction (0:15)
Conceptual Aside: Pure Functions and Side Effects (1:30)
Adding Your Own Effects: useEffect (11:46)
Dependencies (8:06)
A Game of Ping Pong (2:34)
Unmounting and Effects (9:54)
Fetching Data ...or Not (10:26)
Conceptual Aside: Stale Closures (4:08)
useEffect and Stale Closures (9:51)
What Not To Do (10:25)
Use (0:25)
Fetching Data - Part 1 (8:57)
Fetching Data - Part 2 (7:25)
Section 12: useRef and forwardRef
Introduction (0:23)
useRef (4:26)
useRef and the DOM (5:15)
forwardRef (4:15)
Ref as a Prop (2:23)
Section 13: Custom Hooks
Introduction (0:24)
Extracting Custom Hooks (12:30)
Section 14: Component Design
Introduction (0:21)
Real World Complexity and Loops (18:12)
Lifting State Up (28:51)
&&, 0 and Ternary Operators (12:27)
.children (6:01)
Section 15: Context and useContext Hooks
useContext (0:50)
Prop Drilling (4:27)
Context (39:22)
Context with Caution (2:18)
Use and Context (5:10)
Section 16: useID and Key
Introduction (0:30)
useID (8:48)
Key (15:28)
Section 17: Memo, useMemo, and useCallback
Introduction (0:18)
Conceptual Aside: Memoization (7:31)
Memo (16:00)
useMemo (20:15)
useCallback (10:32)
React Forget (1:37)
Section 18: useContext and Reducer
Introduction (0:21)
useContext + useReducer (27:22)
Third Party State Management (6:14)
Use, Reducer, and Context (1:30)
Section 19: Toolchains
Intoduction (0:49)
Conceptual Aside: Toolchain (3:49)
Conceptual Aside: ES Modules (6:01)
Create-React-App (1:52)
Vite (18:45)
Frameworks (3:50)
Section 20: Strict Mode
Introduction (0:32)
Adding Strict Mode (3:33)
Extra Re-Render (10:27)
Extra Effect Re-Run (9:13)
Section 21: Forms
Introduction (0:17)
Reorganizing Our App (15:04)
Uncontrolled Inputs (5:28)
Controlled Inputs (13:43)
Form (7:59)
Textarea, Select, and More (11:16)
Third Party Form Help (1:57)
Future Form Futures (2:12)
Section 22: React Developer Tools
Introduction (0:16)
Using Dev Tools (3:21)
useDebugValue (1:46)
Section 23: CSS and Components
Introduction (0:23)
CSS and React (3:15)
Toolchains and CSS (4:10)
CSS Modules and More (4:11)
Section 24: Class Project - Spelling Bee
Introduction (0:23)
Spelling Bee (1:58)
XTML Authoring (3:21)
Getting the Data (5:54)
Header (8:40)
Honeycomb (14:33)
Shuffle (9:29)
Words and Letters (12:09)
Word List (14:49)
Final Thoughts (6:06)
Score (6:08)
Highlighted Letter (3:29)
Section 25: Meta-Frameworks
Introduction (0:20)
Next.js (3:41)
Remix (2:25)
Section 26: Suspense
Introduction (0:30)
What is Suspense? (3:44)
Suspense and Remix (10:10)
Section 27: React Server Components (RSC)
Introduction (0:52)
Server Components (11:53)
Client Components (5:28)
RSC Payload (7:57)
Composing Server and Client components (7:29)
Section 28: Conclusion
Congratulations! (1:36)
Section 29: Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures