React fundamentals (UI in code)

Goal: get comfortable building UI with components, state, events, lists, and forms.

Use these sources (in order)

React “Learn” (official): https://react.dev/learn
React “Thinking in React” (official): https://react.dev/learn/thinking-in-react
React “Escape Hatches” (reference, when stuck): https://react.dev/learn/escape-hatches

What “good” looks like

UI is broken into small components with clear props.
State lives in the smallest common owner (avoid duplicated state).
Forms handle loading + error states.
Validation is clear and consistent (later we standardize on Zod schemas).
Lists use stable keys (not array index).

Mental model (flow)

Debouncing (generic)

Debouncing is a UI technique that delays work until the user stops typing/clicking for a short time. If new input happens before the delay ends, the timer resets.

It helps:

reduce noisy feedback (errors flashing on every keystroke)
reduce expensive work (validation, filtering, search)
reduce async churn (avoid firing a request per keypress)

Exercises

Exercise 1: content/exercises/01-react/01-form-and-list.mdx
Exercise 2: content/exercises/01-react/02-debouncing-validation-and-search.mdx