React's mental model
By the end of today you can explain React as a function from state to UI, predict when a component re-renders, and say why the manual synchronisation problem from yesterday disappears.
YesterdayOn Day 31 you felt the pain of keeping the DOM and your data in agreement by hand. Today that problem is removed rather than managed.
TomorrowTomorrow, Next.js, and the question of which code runs on the server and which in the browser.
Why this matters
React is not a collection of APIs to memorise. It is one idea applied consistently, and engineers who learn the idea can read any React codebase, including ones using patterns they have never seen.
- UI as a function of state
- Components and props
- State in React
- Why a component re-renders
Learn it
80 minCopy this into Claude or ChatGPT. It quizzes you before it explains anything, which is deliberate. The resources under it are how you check what it told you.
Today's Master Prompt
Free · sign inA prompt written for this day alone: your level, the exact scope, what to leave out, and an instruction to quiz you before it explains anything. Paste it into Claude or ChatGPT and it teaches you today's material.
Check it against something that is not a model
An assistant can be fluent and wrong, and on a topic you met today you will not catch it. These cover the same ground and were made by people who do this for a living, so they are what you hold the explanation up against. They are other people's work and we only link to them, so judge them for yourself.
4 hand-picked resources
Free · sign inVideos, official docs and articles covering the same ground, each opened and annotated by hand. They are what you check the assistant against on a day you cannot yet catch it being wrong.
Build it
50 minRebuild yesterday's todo list in React with the same five features. Then add a second counter somewhere else on the page displaying the same number, and note how much work that took compared with the plain DOM version. Finally, use an array index as a key, reorder the list, and observe what breaks.
Recall it
20 minAnswer out loud, reveal, then mark honestly whether you had it. That score is the only thing on this page you do not get to choose.
5 recall questions
Free · sign inQuestions you answer from memory, then grade yourself against the real answer. The score is carried into the mastery rating below it, so an honest miss cannot quietly become a tick.
Rate it
Completion and mastery are tracked separately. Be honest, because an inflated rating only means the concept resurfaces sooner.
Mastery tracking
Free · sign inRate yourself against five named criteria per concept. Completion and mastery are tracked separately, and anything you rate shakily comes back automatically on a spaced schedule.
Recap
- 01The UI is a function of state, and React makes the DOM match
- 02State persists across renders; a plain variable does not
- 03Re-rendering is running the function again, not touching the DOM
- 04Keys identify items across renders, so indexes break on reorder
Your progress
Free · sign inMark days complete, pick up where you left off across devices, and watch completion and mastery diverge. Free, and the account exists only so ninety days of work cannot vanish with a cleared browser.