Learn in blocks. Build after every lesson.

React is a JavaScript library by Meta for building user interfaces, using a component-based architecture — each piece of UI is an isolated, reusable function. Key ideas: component tree, Virtual DOM, declarative rendering, one-way data flow.

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Babel compiles it to `React.createElement()` calls.

React apps are trees of components. Each component is a function that takes `props` (inputs) and returns JSX (output).

State is data that changes over time and lives inside a component. When state changes, React re-renders the component with fresh values.

Handling events in React uses `on`-prefixed props (`onClick`, `onChange`, `onSubmit`) that take a function, not a string.

Rendering a list uses `.map()` to turn an array into an array of JSX elements, each needing a unique `key` prop.

A side effect is anything that reaches outside a component — fetching data, setting timers, updating the document title, or subscribing to events.

Context solves prop drilling — passing data through many components that don't need it, just to reach one that does.

`useReducer` is for complex state with multiple related actions — often cleaner than several separate `useState` calls.

Extract stateful logic into a reusable hook function. It must start with `use`, so React's rules-of-hooks tooling recognizes it.

Choose local, lifted, reducer, context, URL, and server state deliberately instead of storing everything in one component.

Model loading, success, empty, stale, and error states while preventing races and unnecessary requests.

Test behavior from the user perspective with accessible queries, interactions, async assertions, and controlled dependencies.

Measure before optimizing, reduce avoidable renders, lazy-load heavy work, and build keyboard- and screen-reader-friendly components.

Combine component architecture, state, data, forms, accessibility, testing, performance, and deployment readiness.