Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Understanding React
Introduction
Introduction (1:48)
Setup (1:53)
A Basic React App (2:07)
The React Source Code (2:06)
The DOM and Declarative Programming
The DOM and Declarative Programming (0:20)
HTML and Trees (2:00)
HTML, The Browser, and the DOM (4:02)
DOM Manipulation (6:32)
Conceptual Aside: Imperative vs. Declarative Programming (3:00)
The DOM and Imperative Programming (3:12)
The DOM and Declarative Programming (4:08)
React Elements
React Elements (0:26)
Conceptual Aside: Recursion (4:17)
Conceptual Aside: POJOs (12:52)
Creating React Elements (11:36)
React Element Trees (5:25)
Conceptual Aside: DOM Element References (1:31)
React Elements and DOM Elements (6:03)
React DOM Updates (12:11)
Components (6:01)
Components and Reusability (11:07)
Conceptual Aside: Pure Functions (5:18)
Props (12:24)
Template Logic (14:11)
Element Properties (7:18)
JSX
JSX (0:21)
Conceptual Aside: Markup and Tree Creation Shorthand (1:56)
Conceptual Aside: Transformation (1:48)
React Elements and JSX (19:40)
JSX and Thinking In Elements (12:00)
Conceptual Aside: HTML Authoring (2:47)
Fragment and HTML Authoring (10:04)
Fiber and Reconciliation
Fiber and Reconciliation (0:42)
Root Creation and render (8:57)
Conceptual Aside: Trees and Linked Lists (4:22)
Fiber, Fiber Nodes, and Fiber Trees (6:57)
Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem (3:44)
Work-In-Progress Nodes (9:28)
Reconciliation and Work (5:48)
Execution Contexts and Pausing Work
Execution Contexts (0:21)
Conceptual Aside: Execution Contexts and the Event Loop (3:42)
Fiber and Custom Execution Contexts (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)
React DOM and Rendering
React DOM and Rendering (0:14)
Committing Work and The Renderer (2:55)
Mounting, Updating, and Unmounting (4:48)
Events
Events (0:23)
DOM Events (11:36)
React Event Objects (7:52)
Synthetic Event Properties and Methods (5:43)
State
State (0:16)
Conceptual Aside: State Machines (6:36)
Conceptual Aside: Pure Functions (again) (2:41)
UI: A Function of State (2:46)
Conceptual Aside: Reducers (6:31)
Actions and State (8:56)
Hooks, State, and Reducers
Hooks and State (0:24)
Fibers, Hooks, and State (4:04)
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:37)
Conceptual Aside: Shallow Equality and Object.is (8:11)
Immutable State (7:46)
Adding Your Own Side Effects: useEffect
Adding Your Own Side Effects: useEffect (0:15)
Conceptual Aside: Pure Functions and Side Effects (1:31)
Adding Your Own Effects (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)
useRef and forwardRef
useRef and forwardRef (0:23)
useRef (4:26)
useRef and the DOM (5:15)
forwardRef (4:15)
Custom Hooks
Custom Hooks (0:24)
Extracting Custom Hooks (12:30)
Component Design
Component Design (0:21)
Real World Complexity and Loops (18:30)
Lifting State Up (28:51)
&&, 0, and Ternary Operators (12:27)
Children (6:01)
useContext
useContext (0:50)
Prop Drilling (4:28)
Context (39:22)
Context with Caution (2:20)
useId and Key
useId and Key (0:30)
useId (8:48)
Key (15:28)
memo, useMemo, and useCallback
memo, useMemo, and useCallback (0:18)
Conceptual Aside: Memoization (7:31)
memo (16:00)
useMemo (20:15)
useCallback (10:32)
React Forget (1:37)
useContext and Reducer
useContext and Reducer (0:21)
useContext + Reducer (27:22)
3rd Party State Management (6:14)
Toolchains
Toolchains (0:49)
Conceptual Aside: Toolchains (3:49)
Conceptual Aside: ES Modules (6:01)
Create React App (1:52)
Vite (18:45)
Frameworks (3:51)
Strict Mode
Strict Mode (0:32)
Adding Strict Mode (3:33)
Extra Re-render (10:27)
Extra Effect Re-run (9:13)
Forms
Forms (0:17)
Reorganizing Our App (15:04)
Uncontrolled Inputs (5:28)
Controlled Inputs (13:44)
form (8:00)
textarea, select, and More (11:16)
3rd Party Form Help (1:57)
Future Form Features (2:12)
React Dev Tools
React Dev Tools (0:16)
Using Dev Tools (3:21)
useDebugValue (1:46)
CSS and Components
CSS and Components (0:23)
CSS and React (3:15)
Toolchains and CSS (4:10)
CSS Modules and more (4:11)
Class Project
Class Project (0:23)
Spelling Bee (1:58)
HTML Authoring (3:21)
Getting the Data (6:21)
Header (8:48)
Honeycomb (14:33)
Shuffle (9:29)
Words and Letters (12:09)
Word List (14:49)
Score (6:06)
Highlighted Letter (6:08)
Final Thoughts (3:29)
Things to Try
Meta-Frameworks
Meta-Frameworks (0:20)
NextJS (3:41)
Remix (2:26)
Suspense
Suspense (0:30)
Suspense and Frameworks (3:44)
Suspense and Remix (10:15)
React Server Components
React Server Components (0:52)
Server Components (11:54)
Client Components and 'use client' (5:28)
RSC Payload (7:58)
Composing Client and Server Components (7:29)
Conclusion
Conclusion (1:36)
Thank you!
React Elements and JSX
Links to for this lecture
The JSX specification:
https://facebook.github.io/jsx/
Babel:
https://babeljs.io/repl
Complete and Continue
Discussion
5
comments
Load more
5 comments