What is React?
React is a library for building screens out of small reusable pieces called components.
Difficulty 3/5
Mental model
Plain English
React lets you build a screen by composing small components. Each component is a function that returns markup. Components receive props (inputs) and can hold state (local memory). When state changes, React re-renders.
Analogy
React is Lego: small bricks (components) snap together into bigger structures (pages).
Jessica's wedding portal
A <TaskCard task={task}/> component reused for every task in every wedding.
Agentify CRM
A <ConversationRow conv={c}/> reused in every channel filter.
Go deeper
Build screens from small reusable pieces.
Common mistakes
- Mutating state directly instead of using the setter.
- Making every component giant. Split early.
- Fetching in useEffect when a real data layer (Convex/Query) is available.
AI-agent trap
Agents will stuff fetch + state + render into one 300-line component. Ask for split, typed components.
Quick check
What is a React component?
Summary
A component is a function that returns JSX. Props pass data down. State is local. When state changes, React re-renders just that component (and its children).
Confidence: