Programming · course 21 of 105

React: Read a Component, Predict the Page

Read React code and say what ends up on the page: what JSX turns into, props, children, lists, keys and conditions, and what a counter or list shows after clicks with state.

4 modules

Try a question

Not on sale yet. When sales open: $4.99 USD for this course, paid once, or every course for $9.99 USD a month. Prices

Runs in Claude (claude.ai, the Claude apps or Claude Code) with your own Claude account. A course opens there as soon as your payment goes through; nothing is shipped.

Preview

What it teaches

Reading React code and saying what ends up on the page. React builds web pages from components (JavaScript functions that return markup), written in JSX (HTML-like markup inside JavaScript). The course covers what JSX turns into (className becomes class, style objects, curly braces, Fragments, which are empty <>...</> wrapper tags, why a lowercase name isn’t a component), what props (a component’s inputs), children, lists, keys and conditions render (including the 0 && trap and the arrow function that forgot its return), and what a counter, a toggle or a list shows after clicks, using state (what a component remembers between renders): why setCount(count + 1) three times adds 1, how the update queue works, why push doesn’t update the screen. The AI asks 3 questions, places you, shows a short card per module, then gives you one item at a time (a question in M0, code in M1-M3). For code you answer with the HTML React makes from it.

Not a build-an-app course, and it can’t judge your own project.

How long

32 items. About 15-30 rounds for a confident JavaScript user up to about 45-60 for a beginner, plus a 12-item final: 1-2 sessions (estimate, not timed with a real student; simulated students took 15 rounds as a confident JavaScript user and 57 as a beginner). The tutor gives a one-line save code at the end of each session.

The modules

4 modules, drilled one item at a time.

M0
The words
The words: component, JSX, props, state, Hooks
M1
JSX and what renders
Say what HTML the JSX turns into: className, style objects, curly braces, Fragments, capital-letter names
M2
Props, lists and conditions
Say what props, children, lists, keys and conditions render, including the 0 && trap
M3
State and clicks
Say what the page shows after clicks: counters, toggles, lists and the update queue

Before it teaches, it asks

1
What do you want React for (a job, a project, a class, curiosity), and have you written JavaScript before (never, can read it, write it daily)?
2
What HTML does <App /> render?export default function App() {return <p className="note">Saved</p>;}
3
What HTML does <App /> render?
Show the code it asks about (11 lines)
function Inbox({ count }) {return <div>{count && <p>You have {count} new messages</p>}</div>;} export default function App() {return (<><Inbox count={2} /><Inbox count={0} /></>);}

What’s exact, and what isn’t

Show

Straight from the course’s own notes.

M0 words: The M0 card lines are quoted word for word from react.dev’s “Learn React” pages (docs for React v19.3, read 2026-10-13; the docs are Creative Commons Attribution 4.0, credited to react.dev). A script checks every quote on a saved copy of its page and that every key fact in an M0 answer sits in the quotes listed for it; it does not re-fetch the live pages.
M1 and M2 Keys (16 items) come from really rendering the code printed on the item: First, esbuild 0.28.2 turns the JSX into JavaScript, then react-dom 19.3.0's renderToStaticMarkup (from react-dom/server) makes the HTML, in Node v25.9.0. The same text that is printed goes in; nothing is translated by hand. The key is the HTML that comes out, for example style=”background-color:gold;font-size:24px”.
M3 Keys (8 items) are simulated clicks, not a browser: There is no DOM here. A script compiles the printed component and swaps in a small stand-in for useState. It clicks by calling the component’s own onClick function, then renders the page with react-dom/server. The stand-in follows the rules react.dev’s pages state: a handler sees the state of the render it belongs to; calls to the setter queue up until the handler finishes (a function like n => n + 1 is added to the queue, any other value means “replace with this”); then the queue runs and the component renders again if the state changed. As a self-test, the script runs four of react.dev’s own counter examples through it and checks the results the pages state (1 for +3 with number + 1, 3 with updater functions, 6 and 42 for the two mixed examples). It is not React’s real state code. Anything it doesn’t model is left out: effects, refs, context, typing into inputs, event objects, state inside child components.
Computed by script: Every key and the state trace in every M3 working line (the one-line explanations in the working lines are hand-written from the cards); every listed wrong answer is proven wrong and proven to be its slip: either a variant of the code (the code the student has in mind) renders exactly that wrong answer, or a stated edit of the key gives it. 20 wrong answers are listed, for 20 of the 24 code items.
Honest limits: The course drills what its cards say about React 19.3, on one version of the docs. It can’t tell why your own app misbehaves, and it isn’t connected to Meta or react.dev. A real browser’s view of the HTML may show attribute order or whitespace between tags differently; the grading rule ignores that. React 19.3.0 puts an extra <link rel=”preload”> in front of an <img src=”...”> in its server output, so no item uses <img>.
Not in it yet: Effects (useEffect), refs, context, reducers, forms and typing into inputs, objects in state, state kept or reset by keys, useMemo and useCallback, event objects, data fetching, TypeScript, class components, frameworks such as Next.js.