Component

A component is a self-contained, reusable unit of an application that packages the view layer, its behaviour and its own state behind a single, well-defined boundary. Components expose a clear interface — the inputs they accept and the events they emit — so they can be assembled like building blocks to construct complex interfaces without repeating code.

How a component works

The idea rests on encapsulation: each component hides its internal implementation and communicates with the outside world only through an agreed contract. In modern front-end frameworks such as React, Vue.js and Angular, this typically involves:

• props — data passed into the component from outside, configuring its appearance and behaviour;
• state — internal data the component manages on its own;
• events — messages emitted outward when the user interacts;
• rendering — a function describing how state and props translate into a slice of the interface.

When state or props change, only the affected component re-renders, which keeps the application responsive and predictable.

Practical application

Component-based design is the standard for building interfaces today. Teams create a shared library of components — buttons, form fields, modals, tables — and reuse them consistently across many pages and projects. The payoff is a coherent look (a design system), faster development and easier testing, because each component can be verified in isolation.

The term is not limited to the front end. Independent back-end modules, microservices and elements of distributed architectures are also called components — anywhere the goal is a replaceable, loosely coupled part of a larger whole. When deploying a component-based application, effective caching of static assets shortens the time it takes the interface to appear.