React-Grundlagen: Deine erste Komponente

React ist eine der beliebtesten Bibliotheken, um interaktive Benutzeroberflächen zu bauen. Das zentrale Konzept dahinter sind Komponenten: kleine, wiederverwendbare Bausteine, aus denen du deine gesamte Oberfläche zusammensetzt. In diesem Beitrag schreibst du deine erste Komponente, lernst JSX kennen und gibst Daten über Props weiter.

Was ist eine Komponente?

Eine Komponente in React ist im Kern eine Funktion, die etwas Sichtbares zurückgibt. Per Konvention beginnt ihr Name mit einem Großbuchstaben. So sieht die einfachste Komponente aus:

function Begruessung() {
  return <h1>Hallo Welt</h1>;
}

// Verwendung als eigenes Element:
function App() {
  return (
    <div>
      <Begruessung />
    </div>
  );
}

Die Komponente Begruessung kannst du nun wie ein eigenes HTML-Element verwenden. Das macht React so mächtig: Du baust deine eigene Sprache aus Bausteinen.

JSX verstehen

Das, was wie HTML im JavaScript aussieht, nennt sich JSX. Es ist eine Syntaxerweiterung, die React in echte Funktionsaufrufe übersetzt. Ein paar Regeln solltest du kennen:

function Beispiel() {
  return (
    <div>
      {/* Klassen heißen className statt class */}
      <p className="text">Ein Absatz</p>

      {/* JavaScript in geschweiften Klammern */}
      <p>{2 + 3}</p>

      {/* Mehrere Elemente brauchen einen Wrapper */}
    </div>
  );
}

Wichtig: In JSX heißt das Attribut für CSS-Klassen className, weil class in JavaScript ein reserviertes Wort ist. Innerhalb geschweifter Klammern kannst du beliebigen JavaScript-Code einbetten.

Daten mit Props übergeben

Props sind die Eingaben einer Komponente, vergleichbar mit Funktionsargumenten. So machst du deine Komponenten flexibel und wiederverwendbar:

function Begruessung(props) {
  return <h1>Hallo {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Begruessung name="Anna" />
      <Begruessung name="Tom" />
    </div>
  );
}

Dieselbe Komponente erzeugt jetzt zwei verschiedene Begrüßungen, je nachdem, welchen name du übergibst. Oft nutzt man die Kurzschreibweise mit Destrukturierung:

function Begruessung({ name }) {
  return <h1>Hallo {name}</h1>;
}

Listen rendern

Häufig möchtest du eine Liste von Daten anzeigen. Mit der map-Methode wandelst du ein Array in mehrere Elemente um. Jedes Element braucht dabei eine eindeutige key-Eigenschaft:

function Einkaufsliste() {
  const artikel = ["Äpfel", "Brot", "Milch"];

  return (
    <ul>
      {artikel.map((eintrag) => (
        <li key={eintrag}>{eintrag}</li>
      ))}
    </ul>
  );
}

Der key hilft React zu erkennen, welche Einträge sich geändert haben. Verwende dafür möglichst einen eindeutigen Wert, etwa eine ID.

Komponenten zusammensetzen

Die wahre Stärke von React liegt darin, kleine Komponenten zu größeren zu kombinieren. So entsteht aus einfachen Bausteinen eine komplette Oberfläche:

function Kopf({ titel }) {
  return <header><h1>{titel}</h1></header>;
}

function Fuss() {
  return <footer><p>Alle Rechte vorbehalten</p></footer>;
}

function Seite() {
  return (
    <div>
      <Kopf titel="Mein Blog" />
      <main><p>Willkommen auf meiner Seite.</p></main>
      <Fuss />
    </div>
  );
}

Fazit

React denkt in Komponenten, und das ist der Schlüssel zu wartbaren Oberflächen. Du schreibst eine Funktion, die JSX zurückgibt, gibst ihr über Props Daten mit und kombinierst kleine Bausteine zu größeren Strukturen. Mit map renderst du Listen und mit key hilfst du React beim effizienten Aktualisieren. Wenn du diese Grundlagen verinnerlicht hast, bist du bereit für die nächsten Schritte wie State und Effekte. Fang mit kleinen Komponenten an und baue dir Stück für Stück deine erste React-Anwendung zusammen.