Component

A component is a reusable building block of a user interface. It packages the markup, logic and often styles for one part of a page, and accepts inputs (commonly called props or attributes) so the same component can render different content. Frameworks like React, Vue, Svelte and Angular, and the browser's own Web Components, are all component-based.

Why it matters

Components let teams build interfaces from small, testable parts instead of one large page. A change in one place updates every use, design stays consistent, and complex screens become compositions of simpler pieces. Good components have a clear interface and do one job. The tree structure also defines how data flows: parents pass data down, and children notify parents through events or callbacks.

Example

function StatusBadge({ up }) {
  return <span className={up ? "badge ok" : "badge down"}>
    {up ? "Online" : "Offline"}
  </span>;
}

<StatusBadge up={true} />
<StatusBadge up={false} />

One definition produces two different results depending on the up prop.

Common mistakes

• Building huge components that fetch data, manage state and render everything.
• Over-abstracting, with components that need a dozen configuration props.
• Copying a component instead of generalizing it.
• Mutating props inside the child.

Related

• JSX
• Web components
• State management
• JavaScript framework

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.