React Foundations

Build the mental model first. Nine lessons on components, props, rendering, and the small set of rules that explain everything else.

~ 140 min·9 lessons·updated apr 2026

What you'll learn

Lessons

Read in order. Each lesson stands on its own, but the order is deliberate.

9 lessons · ~128 min total

01
What React is, and isn't
A UI library, not a framework. The render loop in one paragraph. Where Next.js fits.
11 min
02
Components and JSX
Components are functions. JSX is createElement in disguise. The few rules JSX adds.
16 min
03
Props
Passing data down, children, the spread, defaults, and why props don't change.
15 min
04
Conditional rendering
&&, ternaries, early returns, and the values React refuses to draw.
13 min
05
Lists and keys
Rendering arrays, what key actually does, and why index-as-key bites.
15 min
06
Composition over configuration
Children and named slots beat boolean prop explosions every time.
15 min
07
Render vs commit
Two phases, one mental model. Why render is just a calculation.
16 min
08
Strict mode and double rendering
Why dev React runs your component twice — and why you want it to.
13 min
09
The component file, in practice
File layout, naming, when to split, and when to leave JSX inline.
14 min