Was ist eine Komponente?

Eine Komponente in der Frontend-Entwicklung ist ein unabhängiger, wiederverwendbarer Baustein der Benutzeroberfläche. Sie kapselt ihre Struktur (HTML), ihren Stil (CSS) und ihr Verhalten (JavaScript). Komponenten helfen dabei, komplexe Schnittstellen in kleinere, handhabbare Teile zu zerlegen, was die Lesbarkeit des Codes verbessert, die Wartung erleichtert und das Testen unterstützt.

Hauptmerkmale:

• Kapselung: Logik, Markup und Styling sind innerhalb der Komponente verbunden.
• Wiederverwendbarkeit: Die Komponente kann in verschiedenen Teilen der Anwendung oder sogar in anderen Projekten verwendet werden.
• Unabhängigkeit: Änderungen an einer Komponente wirken sich kaum auf andere aus.
• Zustand und Props: Komponenten können einen internen Zustand (Daten, die sich ändern können) haben und externe Daten über Props (Eigenschaften) erhalten.

Beispiel für eine Komponentenstruktur (React):

// Komponente Button.js
import React from 'react';
import './Button.css'; // Stile importieren

function Button(props) {
  return (
    <button className="button-style" onClick={props.onClick}>
      {props.label}
    </button>
  );
}

export default Button;

/* Stile in Button.css */
.button-style {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

// Verwendung der Komponente
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Button geklickt!');
  };

  return (
    <div>
      <h1>Meine Anwendung</h1>
      <Button label="Klick mich" onClick={handleClick} />
    </div>
  );
}

export default App;

Das Konzept der Komponenten ist zentral in modernen JavaScript-Frameworks und -Bibliotheken wie React, Vue und Angular.