Komponenten

Was ist eine Komponente?

Kennst du Legosteine? Jeder Stein hat eine bestimmte Form und Funktion. Du kannst sie einzeln verwenden oder zusammenstecken, um etwas Größeres zu bauen. Genau so funktionieren React-Komponenten: Sie sind eigenständige, wiederverwendbare Bausteine für deine Benutzeroberfläche. Ein Button, eine Navigationsleiste, ein Eingabefeld — alles kann eine Komponente sein.

Aber Komponenten können mehr als Legosteine. Denk an ein Haus: Es besteht aus Wänden, Fenstern, Türen und einem Dach. Jedes dieser Teile ist selbst wieder zusammengesetzt — ein Fenster hat einen Rahmen, Glas und einen Griff. Und wenn du ein Fenster einmal entworfen hast, kannst du es in jedem Zimmer wiederverwenden. Komponenten funktionieren genauso: Du setzt kleine Teile zu größeren zusammen, und jedes Teil kann selbst aus kleineren Teilen bestehen.

Eine Komponente schreiben

Eine React-Komponente ist eine JavaScript-Funktion, die JSX zurückgibt. Dabei sind drei Dinge wichtig:

1. Eine Funktion definieren, die JSX zurückgibt

function StudentCard() {
  return <h1>Dan Abramov</h1>;
}

Das ist schon eine vollständige Komponente — eine Funktion, die ein Stück UI beschreibt.

2. Den Namen in PascalCase schreiben

React unterscheidet Komponenten von normalen HTML-Elementen anhand der Groß- und Kleinschreibung:

<studentCard> → React sucht nach einem HTML-Element
<StudentCard> → React rendert deine Komponente

Deshalb beginnen Komponentennamen immer mit einem Großbuchstaben (PascalCase).

3. Klammern bei mehrzeiligem JSX

Wenn dein JSX über mehrere Zeilen geht, musst du Klammern um den Rückgabewert setzen:

function StudentCard() {
  return (
    <div>
      <h1>Dan Abramov</h1>
      <p>Fachrichtung: Informatik</p>
    </div>
  );
}

Ohne die Klammern ignoriert JavaScript alles nach return in der nächsten Zeile!

// Fehler! Gibt `undefined` zurück:
function StudentCard() {
  return
    <div>
      <h1>Dan Abramov</h1>
    </div>;
}

Komposition: Komponenten zusammensetzen

Die eigentliche Stärke von Komponenten zeigt sich, wenn du sie zusammensetzt. Statt alles in eine große Funktion zu packen, zerlegst du die UI in kleine, fokussierte Bausteine.

Nehmen wir an, eine StudentCard soll ein Bild und Infos anzeigen. Statt alles in eine Komponente zu schreiben, erstellen wir dafür eigene Komponenten:

function StudentImage() {
  return <img src="dan.jpg" alt="Dan Abramov" />;
}

function StudentInfo() {
  return (
    <div>
      <h2>Dan Abramov</h2>
      <p>Fachrichtung: Informatik</p>
    </div>
  );
}

Jetzt kann StudentCard diese Bausteine zusammensetzen:

function StudentCard() {
  return (
    <div>
      <StudentImage />
      <StudentInfo />
    </div>
  );
}

Das ist Komposition — kleine Komponenten werden zu größeren zusammengesetzt. StudentCard ist die Elternkomponente von StudentImage und StudentInfo.

Wiederverwendung

Eine Komponente, die einmal definiert ist, kann beliebig oft verwendet werden. So entsteht aus einer einzelnen StudentCard eine ganze Liste:

function StudentList() {
  return (
    <div>
      <h1>Unsere Studenten</h1>
      <StudentCard />
      <StudentCard />
      <StudentCard />
    </div>
  );
}

Der gesamte Komponentenbaum sieht so aus:

StudentList
├── StudentCard
│   ├── StudentImage
│   └── StudentInfo
├── StudentCard
│   ├── StudentImage
│   └── StudentInfo
└── StudentCard
    ├── StudentImage
    └── StudentInfo

Beachte den Unterschied in JSX:

Kleinbuchstaben wie <div>, <h1>, <img> → eingebaute HTML-Elemente
Großbuchstaben wie <StudentCard>, <StudentList> → deine React-Komponenten

Exportieren und Importieren

Bisher standen alle Komponenten in einer Datei. In der Praxis verteilst du sie auf mehrere Dateien und verbindest sie über Exports und Imports.

Default Export — eine Komponente pro Datei

Wenn eine Datei genau eine Komponente bereitstellt, verwendest du einen Default Export:

export default function StudentCard() {
  return (
    <div>
      <StudentImage />
      <StudentInfo />
    </div>
  );
}

Der Import braucht dann keine geschweiften Klammern:

import StudentCard from './StudentCard.jsx';

Benannte Exports — mehrere Komponenten pro Datei

Wenn eine Datei mehrere Komponenten exportiert, verwendest du benannte Exports:

export function StudentImage() {
  return <img src="dan.jpg" alt="Dan Abramov" />;
}

export function StudentInfo() {
  return (
    <div>
      <h2>Dan Abramov</h2>
      <p>Fachrichtung: Informatik</p>
    </div>
  );
}

Benannte Exports werden mit geschweiften Klammern importiert. So nutzt StudentCard die beiden Bausteine aus der anderen Datei:

import { StudentImage, StudentInfo } from './StudentParts.jsx';

export default function StudentCard() {
  return (
    <div>
      <StudentImage />
      <StudentInfo />
    </div>
  );
}

Alles zusammen

So sieht die fertige StudentList aus, wenn die Komponenten über Dateien verteilt sind:

import StudentCard from './StudentCard.jsx';

export default function StudentList() {
  return (
    <div>
      <h1>Unsere Studenten</h1>
      <StudentCard />
      <StudentCard />
      <StudentCard />
    </div>
  );
}