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
Composing Server and Client components
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