Hello World in JS
A product card built with the raw DOM API: created in memory, then appended. What React automates, and why textContent is safe.
ReadModule 1 of 7
React builds on a handful of plain ideas: DOM nodes, function calls that return objects, functions that return those objects, and the browser's own forms. This module peels them back one layer at a time, starting from a product card built by hand with the DOM and ending with lists that keep the right state on the right item. By the end, nothing in React's core API should feel like magic.
Every example comes from one small product store app (examples/product-store in the site's repository). The outputs you see (console logs, HTML, URLs, request bodies, warnings, TypeScript errors) were recorded by running it in Chrome, not written by hand.
Read the notes in order: each one removes one layer of sugar. JSX → createElement → plain objects → DOM is the thread that runs through all of them.
Read them in order. Each one builds on the ones before it.
A product card built with the raw DOM API: created in memory, then appended. What React automates, and why textContent is safe.
ReadcreateElement returns a plain, frozen object; createRoot().render() turns it into DOM later. React vs ReactDOM, and why key isn’t a prop.
ReadA component is a function React calls for you. The recorded call order proves it, and why capital letters and props matter.
ReadTyping props like any function: literal unions, deriving types with typeof/keyof, satisfies, and the errors tsc reports.
ReadWhy try/catch can’t catch render errors, how a boundary contains them, what it can’t catch, and how reset works.
ReadKeys give list items an identity. A cart with gift notes shows what goes wrong with index keys, and how a key resets an input.
ReadTen questions, one per note, with quiz mode, plus flashcards for every React API in this module.
Read