Understand React visually

The React syntax for declaring UI structure inside JavaScript

JSX is the syntax React uses to describe UI structure inside JavaScript. Browsers do not read it directly. Build tools transform it into the object structure React uses during rendering.

React's basic unit for dividing UI into isolated responsibilities

A component is the basic unit React uses to build screens. It takes input through props, may keep local state, and returns JSX describing one responsibility in the interface.

Inputs passed from a parent component down to a child

Props are the inputs a parent component passes to a child. A child reads them to decide what to render, but does not directly mutate them.

The current value a component remembers across renders

State is the value a component remembers between renders. When user input, timers, or async results change something important, React stores the new state and uses it to calculate the next UI.

The way React connects user input to logic and state changes

Event handling is how React connects browser events like clicks, typing, and submit actions to application code. In JSX, handlers are passed as functions so the component can declare how it should react to user input.

Choosing different UI branches based on current values

Conditional rendering is the React pattern for showing different UI depending on current conditions. Rather than introducing a separate template language, React uses normal JavaScript branching to choose which UI branch remains in the result.

Rendering arrays as repeated UI items and identifying them with keys

List rendering is the pattern of turning array data into repeated UI items. The key attached to each item tells React how to match the same logical item across renders.

React's internal model for comparing render results and minimizing real DOM work

Virtual DOM is the way React represents render output in memory, compares the previous and next results, and applies only the necessary changes to the real DOM. Developers write as if the whole UI is recalculated, but React narrows the actual updates.

The React phase for synchronizing with external systems after rendering

Effect is the React mechanism for synchronizing with systems outside the render calculation after the screen has updated. That includes subscriptions, timers, browser APIs, and external libraries.

A shared delivery channel for values needed deep in a component tree

Context is React's way to let deep descendants read shared values directly. A Provider supplies the value to a subtree, and components inside that subtree can read it with useContext without every middle layer manually forwarding props.

React's escape hatch for remembering mutable values and touching DOM nodes directly

A ref is a mutable container React preserves across renders. It can point to a DOM node or hold a value that should stay available without causing another render.

The pattern where React state is the single source of truth for form inputs

Controlled components are the React pattern where form elements such as input, textarea, and select derive their current value from React state. User input updates that state, and the new state is rendered back into the form field.