You write React every day. You type <h1>Hi</h1> and a headline appears in the DOM. Between your JSX and those pixels, something does real work — and if you're honest with yourself, you've never been asked to explain exactly what.
So let's take React away. Over the next seven screens we'll rebuild it from nothing. Each screen hands you a tool you don't have yet and a job that tool can't do. What you invent to get past the wall turns out to be a piece of React — we won't name it until the end.
Start with the crudest render function there is: one line that writes a string into a slot. Below, a small workbench runs that function for you. Tap something in the palette, watch the preview update. Your first job: render a heading, and a paragraph under it, in one view. Only this one line to work with.
// Starting point — one string at a time, nothing nested.function paint(text: string, into: HTMLElement) { into.textContent = text}Tap anything in the palette. The function runs with that value as its argument; the preview swaps to match.
Every tap calls the function again. And every time, whatever the preview was showing — gone. textContent isn't a list you append to; it's a slot. One string in, the same one string showing. Numbers get coerced to text on the way in. No layering, no history of what was there a moment ago.
So try the real thing. You want a heading on top, a paragraph under it, both on screen at the same time. Tap two things from the palette — one right after the other — and see what you actually end up with.