Component-based architecture is the dominant way modern user interfaces are built: the screen is decomposed into self-contained pieces called components, each responsible for a slice of the interface, and larger interfaces are assembled by composing smaller components. Each component encapsulates its own markup, behavior, and often its own styling, exposes a set of inputs, and can hold internal state. This is the model shared, with local variations in terminology, by React, Vue, Angular, and the browser-native Web Components standards.
The frameworks describe the idea in nearly identical terms. Vue’s component basics guide states that “components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation.” React’s documentation introduces components as the building blocks from which user interfaces are assembled, reusable units of markup and logic that can be combined and nested to form whole pages and applications. The common promise is that you can reason about, build, and test one component in isolation, then reuse it wherever its behavior is needed.
Components communicate primarily through inputs, called props in React and Vue and inputs in Angular. Vue’s guide defines props as “custom attributes you can register on a component,” used to pass data from a parent down to a child. This establishes a clear data-flow contract: a parent supplies values, and the child renders from them. Each use of a component creates a fresh instance with its own state, which is why, as Vue’s docs note, two instances of the same counter component each keep their own separate count. Encapsulation of state per instance is what makes reuse safe.
Composition is the other half of the model. Components nest inside other components to form a tree, with a root component at the top and increasingly specific components toward the leaves. Data generally flows down the tree through props, and events or callbacks flow back up, giving a predictable, traceable structure. This tree pairs naturally with the virtual DOM in React and with reactive rendering in Vue, since the framework can render and update the interface by walking the component tree.
The approach has deep roots in software engineering’s long-standing interest in modularity and reuse, but its arrival in mainstream web development came with the JavaScript framework era of the 2010s. Its influence runs deep enough that the browser platform itself adopted it through Web Components, standardizing custom elements with encapsulated internals. Whether implemented by a framework’s virtual DOM or by native browser APIs, component-based architecture is now the default mental model for constructing user interfaces on the web.