Introduction to React 19 and the Component Model

React is a JavaScript library for building user interfaces out of components — small, self-contained pieces of UI that you compose into whole applications. Rather than manually manipulating the page when data changes, you describe what the UI should look like for a given state, and React figures out how to update the screen to match. This declarative, component-based model is what made React the dominant way to build web interfaces.

React 19 is the latest major version, building on the same component foundation while adding first-class support for asynchronous data, forms, and server-rendered components. The core mental model you learn here — components, props, state, and one-way data flow — is unchanged and is the foundation everything else in this course rests on.

A React application is a tree of components. A single root component renders child components, which render their own children, and so on, each responsible for a slice of the UI. Data flows down this tree through props, and changes flow up through callbacks. Understanding this tree-and-data-flow model is the key to thinking in React rather than fighting it.

Analogy🏏Cricket

🏏 Think of it like cricket: Just as a captain sketches the desired field on a planning board first, then compares it to the current field to move only the fielders who need to shift — rather than clearing the ground and re-placing all eleven — React builds a new Virtual DOM plan, diffs it against the old, and moves only what changed. The insight is that planning on paper and adjusting the minimum is far cheaper than rearranging everything from scratch, which is exactly what reconciliation achieves.