Component

A reusable, self-contained piece of UI in frameworks like React, Vue, or Angular that encapsulates structure, behavior, and styling.

Overview

Components are the building blocks of modern web applications. They allow you to split the UI into independent, reusable pieces that can be developed, tested, and maintained separately. Each component represents a part of the user interface and can manage its own state, accept inputs (props), and interact with other components.

Example

javascript
// Function component in React
function Button({ text, onClick }) {
  return (
    <button
      onClick={onClick}
      className="btn-primary"
    >
      {text}
    </button>
  );
}

// Using the component
function App() {
  const handleClick = () => alert('Clicked!');

  return (
    <div>
      <Button text="Click me" onClick={handleClick} />
    </div>
  );
}

Key Points

  • Reusable UI building blocks
  • Encapsulates HTML, CSS, and JavaScript
  • Can be composed to build complex UIs
  • Two types in React: function and class components
  • Modern approach: use function components with hooks

Learn More