---
title: "Component"
description: "A component is a self-contained, reusable building block of an application. Learn how components work, their interface and where they are used in practice."
url: "https://nodea.io/en/glossary/component"
lang: "en"
updated: "2026-07-13"
---

# Component

> A component is a self-contained, reusable unit of an application that bundles view, behaviour and state behind a well-defined interface, so it can be composed like a building block.

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](https://nodea.io/en/glossary/react), [Vue.js](https://nodea.io/en/glossary/vue-js) and [Angular](https://nodea.io/en/glossary/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.

### What is the difference between a component and a module?

A component is usually a single visual or functional piece of an interface — a button, a form, a card — that you can drop into many places. A module is a larger organizational unit that groups related components, services and logic into one logical part of the application. In practice, a module is built out of several components.

## Related

- [React](https://nodea.io/en/glossary/react)
- [Vue.js](https://nodea.io/en/glossary/vue-js)
- [Angular](https://nodea.io/en/glossary/angular)
- [Frontend](https://nodea.io/en/glossary/frontend)
- [Framework](https://nodea.io/en/glossary/framework)

---

Languages: [pl](https://nodea.pl/pl/slownik-pojec/komponent.md)  
Site index: [llms.txt](https://nodea.io/en/llms.txt)