Introduction

HTML and Trees

The React Source Code

A Basic React App

Setup

The DOM and Declarative Programming -

HTML, The Browser, and the DOM

React Elements -

DOM Manipulation

Conceptual Aside Imperative vs. Declarative Programming

The DOM and Imperative Programming

The DOM and Declarative Programming

Conceptual Aside Recursion

Conceptual Aside DOM Element References

React Element Trees

Conceptual Aside POJOs

Creating React Elements

React Elements and DOM Elements

React DOM Updates

Components

Components and Reusability

Conceptual Aside Pure Functions

JSX -

Element Properties

Props

Conceptual Aside Transformation

Conceptual Aside Markup and Tree Creation Shorthand

Template Logic

Conceptual Aside HTML Authoring

Fiber and Reconciliation -

JSX and Thinking In Elements

React Elements and JSX Links to for this lecture

Fragment and HTML Authoring

Conceptual Aside Trees and Linked Lists

Conceptual Aside Tree Reconciliation and the Tree Edit Distance Problem

Root Creation and render

Fiber, Fiber Nodes, and Fiber Trees

Execution Contexts -

Work-In-Progress Nodes

Reconciliation and Work

Conceptual Aside Execution Contexts and the Event Loop

Fiber and Custom Execution Contexts

Units of Work and The Work Loop

Conceptual Aside Equality

React DOM and Rendering -

Lanes and Priority

Committing Work and The Renderer

Beginning, Completing, Bailing Out and Pausing Work

Mounting, Updating, and Unmounting

Events -

DOM Events

React Event Objects

State -

Synthetic Event Properties and Methods

Conceptual Aside Pure Functions (again)

Conceptual Aside State Machines

UI A Function of State

Hooks and State -

Fibers, Hooks, and State Extra Notes

Conceptual Aside Reducers

Conceptual Aside Queues

Actions and State

Update Queues

State and Re-renders

useState (Part 1)

useReducer (Part 1)

Rules of Hooks

useReducer (Part 2)

useState (Part 2)

useState (Part 3)

Adding Your Own Side Effects useEffect -

Conceptual Aside Shallow Equality and Object.is

Conceptual Aside Pure Functions and Side Effects

Immutable State

A Game of Ping Pong

Adding Your Own Effects

Dependencies

Conceptual Aside Stale Closures

Unmounting and Effects

useEffect and Stale Closures

useRef and forwardRef -

Fetching Data...or not

What Not to Do

useRef and the DOM

forwardRef

useRef

Custom Hooks -

Component Design -

useContext

&&, 0, and Ternary Operators

Extracting Custom Hooks

Children

Real World Complexity and Loops

Lifting State Up

Context with Caution

useId and Key -

Prop Drilling

memo, useMemo, and useCallback -

Key

useId

Conceptual Aside Memoization

React Forget

memo

useContext and Reducer -

Context

useCallback

Toolchains

useMemo

Conceptual Aside Toolchains

Conceptual Aside ES Modules

useContext + Reducer

rd Party State Management

Create React App

Frameworks

Strict Mode -

Adding Strict Mode

Forms -

Extra Re-render

Uncontrolled Inputs

Extra Effect Re-run

Vite

Reorganizing Our App

rd Party Form Help

form

textarea, select, and More

Controlled Inputs

Future Form Features

React Dev Tools Lesson Summary -

Using Dev Tools

CSS and Components -

CSS and React

useDebugValue

Toolchains and CSS

CSS Modules and more

Spelling Bee

Class Project -

HTML Authoring

Getting the Data Promises, Async, and Await free YouTube video on my channel

Header

Shuffle

Honeycomb

Score

Words and Letters

Word List

Highlighted Letter

Meta-Frameworks -

Final Thoughts

NextJS

Suspense and Frameworks

Suspense -

Remix

Suspense and Remix

Composing Client and Server Components

Server Components

Client Components and 'use client'

Conclusion

RSC Payload

UPDATE - 001 - use and Fetching Data (React 19+)

UPDATE - 004 - ref as a prop (React 19+)

UPDATE - 003 - use and Fetching Data (Part 2)

UPDATE - 002 - use and Fetching Data (Part 1)

UPDATE - 006 - use, Reducer, and Context (React 19+)

UPDATE - 005 - use and Context (React 19+)