UI Component
User Interface Component
- In Turkish
- UI Bileşeni
In short
A UI component is a self-contained, reusable piece of an interface, such as a button, a form or a card, that bundles its markup, style and behavior.
What is a UI component?
Modern interfaces are built from components: small pieces that each draw one part of the screen and can be combined into bigger ones. A button, a search box and a product card are components, and a page is a component made of many others. Each component takes inputs, often called props, and renders the same way for the same inputs, so it can be reused in many places.
A component bundles what belongs together: its markup, its styles and its behavior, such as what happens on a click. In React, Vue, Svelte and Angular, a component is a function or a file that returns markup; the browser's own Web Components standard lets you define custom HTML elements such as <user-card> that work with or without a framework. A component can keep its own state, such as whether a menu is open, and pass data down to the components inside it.
Components work like building blocks: each has a clear shape and a few ways to connect, and the same block turns up in many places. Teams collect their components in a design system or component library, so that a button looks and works the same on every page. A good component does one job, takes only the inputs it needs and can be tested on its own.
Key takeaways
- A UI component is a reusable, self-contained piece of an interface.
- It takes inputs, called props, and renders its markup, styles and behavior from them.
- Pages are built by nesting components inside each other.
- Design systems collect components so they look and work the same everywhere.
Example
function Badge({ label, tone = "neutral" }) {
return <span className={`badge badge-${tone}`}>{label}</span>;
}
function ProductStatus({ product }) {
return (
<p>
{product.isNew && <Badge label="New" tone="success" />}
{product.stock === 0 && <Badge label="Sold out" tone="danger" />}
</p>
);
}Readers ask
What is the difference between a component and a module?
A module is a unit of code: a file that exports functions or values. A component is a unit of interface: something that draws part of the screen. A component usually lives in a module, but many modules, such as one full of date helpers, contain no components.
What are props?
Props, short for properties, are the inputs a parent passes to a component, like arguments to a function. A component reads its props but doesn't change them; a value that changes over time belongs in its own state.
See also
- ReactWeb Development, p. 36React is an open-source JavaScript library for building user interfaces from reusable components that update automatically when their data changes.
- FrontendWeb Development, p. 17The frontend is the part of an application that runs in front of the user, usually in the browser, drawing the interface and responding to clicks and typing.
- VueWeb Development, p. 55Vue is an open-source JavaScript framework for building user interfaces from components, known for its gentle learning curve and reactive data.
- SvelteWeb Development, p. 45Svelte is a front-end framework that compiles components into small, efficient JavaScript at build time instead of running a large framework in the browser.
- AngularWeb Development, p. 2Angular is a complete, TypeScript-based web framework from Google with components, routing, forms, an HTTP client and dependency injection built in.
- JSXWeb Development, p. 26JSX is a JavaScript syntax extension for writing HTML-like markup inside code, used mainly with React to describe what the user interface should look like.
- React HooksWeb Development, p. 37React hooks are functions such as useState and useEffect that let a function component keep state, run side effects and share logic with others.
- State ManagementWeb Development, p. 44State management is how an application stores, updates and shares the data that changes while it runs, and keeps the interface in sync with it.
Sources
Spotted a mistake or something missing on this page?Suggest an edit