React
Components, JSX and props; state, events and forms; effects, context and your own hooks; performance; and a full project at the end. Every example runs in a live preview you can edit.
Every chapter is an island. Finish its lessons, beat its challenge, and sail on ⛵
Island 1
Components and JSX
- Why React?UI as a function of data, components, and your first App.7 min2 🎮
- JSX rulesOne parent element, className, {} for JavaScript, and style as an object.8 min3 🎮
- PropsPassing data into components, children, and default values.8 min2 🎮
- Rendering lists and keysmap and filter inside JSX, why keys matter, and why the index is usually wrong.9 min2 🎮
- Conditional renderingif before return, the ternary, &&, and the zero trap.7 min2 🎮
Island 2
State and events
- Handling eventsonClick and onChange, passing a function rather than calling it, and the event object.7 min2 🎮
- useState: a component's memoryWhy a plain variable doesn't work, re-rendering, and updater functions.10 min2 🎮
- Objects and arrays in stateDon't mutate, make a new copy: spread, map and filter.10 min2 🎮
- Forms and controlled inputsvalue and onChange, submitting, validation, and when to go uncontrolled.10 min2 🎮
- Lifting state upWhen two components need the same data: a single source of truth.9 min2 🎮
Island 3
Effects and essential hooks
- useEffectSyncing with the outside world, dependencies, and cleanup.11 min2 🎮
- Fetching dataLoading, error and data, race conditions, and why libraries help.11 min2 🎮
- useRefReaching the DOM, and a remembered value that doesn't re-render.8 min2 🎮
- Context: data for the whole treecreateContext, Provider and useContext, and the end of prop drilling.9 min2 🎮
- useReducerAll state changes in one function, with clear names.10 min2 🎮
Island 4
Professional React
- Writing your own hooksPull repeated logic into a use… function and reuse it anywhere.9 min2 🎮
- Performance: memo, useMemo and useCallbackWhen components re-render, and when memoization actually helps.11 min2 🎮
- Suspense and error boundariesLoading and errors at the tree level, and lazy-loading components.10 min2 🎮
- What's new in React 19Actions, useActionState, use, ref as a prop, and the Compiler.9 min1 🎮
- Thinking in ReactFrom a design to components: split, build static, find minimal state, place it.9 min2 🎮
- Project: a complete to-do appAdd, delete, complete, filter and count, step by step.15 min3 🎮