/

React

React 19

Project PDF

React: 0% done

Module 1 · How a web page works

A web page is a text file the browser draws

Loading the slide…

A line of words about as long as a slide’s first line, and its second.

Another line, shorter.

1 / 204 · How a web page works

Course progress

0%

A web page is a text file the browser draws
HTML describes a page with tags
, 1 to practiseCSS says how things look
The browser turns HTML into a tree called the DOM
JavaScript changes the page by changing the DOM
, 2 to practiseCheck: what happens on a click
Changing the DOM by hand gets hard fast
React: describe the page, and let it do the changes
Recap

Three tools come before any React
Vite makes a new project in one command
, 1 to practiseCheck: the steps to a running project
What is in the new project
One HTML page, one empty box, and React fills it
TypeScript: JavaScript with labels
, 1 to practiseSave a file and the page updates
, 1 to practiseErrors are messages, so read them
Recap

JSX lets you write markup inside JavaScript
Each tag becomes a plain object called an element
Curly braces open a window back to JavaScript
Try it: braces in a live preview
, 2 to practiseCheck: what ends up on the page
Attributes are written in camelCase
Return one thing: wrap siblings in a fragment
, 1 to practiseEvery tag must be closed
, 1 to practiseYour first component returns JSX
, 1 to practiseTry it: a recipe card
Recap

A page is built from components inside components
Define a component once, use it as a tag
Try it: add a component
, 1 to practiseOne component per file, shared with import and export
, 1 to practiseThe same component can appear many times
, 1 to practiseTry it: five stars
Define components at the top level of a file
, 1 to practiseComponents must be pure
, 1 to practiseStrict Mode renders twice to catch impure code
, 1 to practiseCheck: from a design to components
Recap

Props are a component’s inputs
Unpack props right in the function’s brackets
, 2 to practiseCheck: write a component with props
A prop can be any JavaScript value
Try it: one component, different props
Give optional props a default value
, 1 to practiseTry it: a greeting with a default
children: what goes between the tags
, 1 to practiseProps are read-only
, 1 to practiseData flows one way: down
Recap

Keep the data in an array, not in the markup
map turns each item into an element
, 1 to practiseKeys tell React which row is which
, 1 to practiseFilter first, then map
Try it: filter and map
Use a normal if to return something else
, 1 to practiseInside JSX: the ternary and &&
, 1 to practiseA component can return null to show nothing
, 1 to practiseTry it: a list with an empty state
Recap

, 1 to practisePass a function to onClick
Parents pass handlers down as props
Handlers get an event object
, 1 to practiseA plain variable can’t make the page change
useState gives a component memory
, 1 to practiseTry it: a counter
Call Hooks at the top level, every render
, 1 to practiseTrigger, render, commit
, 1 to practiseEach copy of a component has its own state
Try it: two counters, two memories
Recap

, 1 to practiseState is a snapshot for one render
React batches updates and renders once
, 1 to practiseTo build on the latest value, pass a function
Try it: snapshot or updater
Replace objects, don’t change them
Add and remove items with new arrays
, 1 to practiseChange one item with map
, 1 to practiseTry it: tick and delete
Nested data: copy every level you change
, 1 to practiseDon’t store what you can work out
Recap

A controlled input shows state and reports changes
Try it: state follows every key
, 1 to practiseCheck: a frozen input
Handle the form’s submit, not the button’s click
, 1 to practiseTry it: a form that adds to-dos
, 1 to practiseCheckboxes, selects and text areas
Every input needs a label
Uncontrolled inputs and FormData
, 1 to practiseEditing a to-do in place
Recap

Two components need the same data
Lift state up to the closest common parent
, 1 to practiseThe child becomes controlled by its parent
, 1 to practiseTry it: lift the search up
Deciding where a piece of state lives
, 1 to practiseCheck: lift some state
, 1 to practiseState belongs to a position in the tree
Change the key to start fresh
Recap

Effects keep something outside React in step
useEffect runs after the screen updates
, 1 to practiseCheck: when does it run
, 1 to practiseTry it: keep the tab’s title in step
Return a cleanup to undo what the effect did
Try it: see a cleanup at work
, 1 to practiseCheck: a leaking listener
You don’t need an effect to compute a value
, 1 to practiseYou don’t need an effect to respond to an event
Read the latest value without re-running: useEffectEvent
Recap

A ref is a box React keeps but doesn’t watch
, 1 to practiseState or ref?
, 1 to practisePass a ref to an element to reach its DOM node
, 1 to practiseTry it: put the cursor back
In React 19, ref is just a prop
Ref callbacks can clean up
, 1 to practiseReach for the DOM only for what React can’t do
, 1 to practiseExpose a small API with useImperativeHandle
Recap

When updates are spread across many handlers
A reducer turns the state and an action into the next state
, 1 to practiseuseReducer: dispatch actions instead of setting state
, 1 to practiseTry it: a cart reducer
, 1 to practiseuseState or useReducer?
Passing props through layers that don’t use them
Context lets any child below read a value
, 1 to practiseTry it: read a context
Together: a provider for the to-dos
, 1 to practiseContext is not free: use it for wide, slow-changing data
Recap

A custom Hook is a function that calls Hooks
, 1 to practiseUse it like a built-in Hook
, 1 to practiseRules for your own Hooks
fetch asks a server for data
Show loading, error and data
, 1 to practiseIgnore answers that arrive too late
, 1 to practiseWrap it in a Hook
, 1 to practiseTry it: a Hook that loads recipes
In real apps, use a data library or your framework
Recap

Accessibility means everyone can use it
Use the real element: a button is a button
, 1 to practiseEverything you can use needs a name
, 1 to practiseTry it: name every control
, 1 to practiseARIA describes what HTML can’t
, 1 to practiseTry it: a disclosure that says if it’s open
Announce changes that happen out of sight
Manage focus when the page changes under it
, 2 to practiseCheck: testing accessibility
Recap

Measure before you optimise
, 1 to practiseWhy a component renders
The cheapest fix: move state down
memo skips a render when props are the same
, 1 to practiseTry it: stop the chart redrawing
, 1 to practiseNew objects and functions defeat memo
, 1 to practiseThe React Compiler memoises for you
Long lists and big bundles
, 1 to practiseCheck: a slow screen
Recap

Some updates are urgent, some can wait
Suspense shows a fallback while children wait
, 1 to practiseTry it: a boundary in the right place
, 1 to practiseWhere you put boundaries decides what the user sees
useTransition marks an update as not urgent
, 1 to practiseCheck: which updates go in a transition
, 1 to practiseuseDeferredValue lets a slow part lag behind
Error boundaries catch what goes wrong while rendering
Recap

An Action is an async transition
Pass a function to a form’s action
, 1 to practiseuseActionState keeps the result of the last submit
Try it: a form with an Action
, 1 to practiseuseFormStatus reads the form a component is inside
useOptimistic shows the result before the server answers
, 1 to practiseTry it: a like that lands at once
use reads a promise or a context while rendering
Server Components render on the server only
, 1 to practiseCheck: server or client
Recap

Every update has a render phase and a commit phase
React keeps a tree of fibers, one per component
, 1 to practiseReconciliation: comparing the new tree with the old
The scheduler decides what to render first
, 1 to practiseCheck: the order of an update
useLayoutEffect: measure before the user sees
, 1 to practiseHydration: taking over HTML drawn on the server
useSyncExternalStore: reading stores React doesn’t own
Recap

Organise by feature, not by kind of file
Each kind of state has a natural home
What to look for when reviewing React code
, 2 to practiseChallenge: the update queue
, 2 to practiseChallenge: an endless loop
, 1 to practiseChallenge: kept or reset
, 1 to practiseChallenge: undo
, 1 to practiseChallenge: write a debounce Hook
, 1 to practiseChallenge: a search that waits for you
, 2 to practiseChallenge: async screens
, 1 to practiseChallenge: accessible tabs
Recap