Manuals / React Basics / Chapter 1

Start · beginner · ~25 min · Chapter 1 of 4

Why React

UI as a function of state — the mental model that unlocks everything else.

Path progress
13%

Step 1 of 2

Key idea

React lets you describe UI from state instead of manually mutating the DOM. Components compose like Lego.

Key ideaDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Key ideadrag · tap →Go deeperdrag · tap →Follow the dashed drag · tap →

Quick check

React is primarily about…

Do this now

Write 3 notes on: Why React.

Was this step clear?
Chapter learning outcomes
  • Components
  • Declarative UI
  • When not to use React

Clear these before you leave