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

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.