What is it?
React is a library for building UIs out of components — small functions that return what to render. The core idea is one-way data flow: state lives somewhere, components receive it as props, and re-render when it changes. JSX is the markup-like syntax that compiles to function calls.
Why it matters
React holds the largest mindshare in frontend hiring. Even teams using other frameworks usually want React-fluent juniors because the mental model translates. Skip React fundamentals and Next.js, hooks, and Server Components will all read as magic.
What to learn
- Components: function components and what they return
- JSX: how it compiles to
React.createElementcalls - Props: passing data down, including children
- State:
useState, the rules of "lift state up" - Conditional rendering and lists
- Keys in lists: why they matter, what
key={i}breaks - Composition over inheritance — the React way
Common pitfall
Mutating state directly. state.items.push(x) doesn't trigger a
re-render because React compares by reference. Always create a new
value: setItems([...state.items, x]). The "immutable update" reflex
is the single biggest beginner adjustment.
Resources
Primary (free):
- React docs — Quick Start · docs
- React docs — Thinking in React · docs
- JSX in depth — Kent C. Dodds · article
Practice
Build a small UI from scratch — a search box that filters a list of
items as you type. Use only function components, useState, and
props-down communication. No external libraries. Done when typing
filters the list and clearing the input restores it.
Outcomes
- Read a JSX block and predict the rendered HTML.
- Pick state location ("lift state up") for any UI hierarchy.
- Pass functions as props to communicate child-to-parent.
- Avoid mutating state — every update creates a new value.