Grundlagen von React-Komponenten

React revolutionierte die Webentwicklung durch ein fundamental anderes Verständnis dessen, was eine Benutzeroberfläche ist. Anstatt HTML, CSS und JavaScript als getrennte Technologien zu betrachten, führt React das Konzept der Komponente ein – eine in sich geschlossene Einheit, die Struktur, Styling und Verhalten zusammenführt.

In diesem Kapitel entwickeln Sie ein tiefes Verständnis dafür, was React-Komponenten ausmacht, wie sie strukturiert sind und warum sie so mächtig sind. Wir beginnen mit den absoluten Grundlagen und bauen systematisch das Fundament auf, das Sie für alle weiteren Kapitel benötigen.

5.1 Was ist eine React-Komponente?

Eine React-Komponente ist im Kern eine JavaScript-Funktion, die eine Beschreibung dessen zurückgibt, was auf dem Bildschirm erscheinen soll. Diese Beschreibung wird in JSX geschrieben – einer Syntaxerweiterung für JavaScript, die HTML-ähnlich aussieht, aber die volle Macht von JavaScript bietet.

function Welcome() {
  return <h1>Willkommen bei React!</h1>;
}

Was hier geschieht, ist bemerkenswert: Wir definieren eine JavaScript-Funktion, die scheinbar HTML zurückgibt. Tatsächlich handelt es sich um JSX, das React in entsprechende JavaScript-Aufrufe übersetzt. Diese Funktion beschreibt, was gerendert werden soll, anstatt direkt das DOM zu manipulieren.

5.2 Die Anatomie einer Komponente

Jede React-Komponente folgt bestimmten Konventionen, die sowohl technische Notwendigkeiten als auch bewährte Praktiken widerspiegeln:

Funktionsdeklaration: React-Komponenten sind JavaScript-Funktionen. Der Name muss mit einem Großbuchstaben beginnen – dies ist keine Konvention, sondern eine technische Anforderung. React unterscheidet anhand der Großschreibung zwischen benutzerdefinierten Komponenten und nativen HTML-Elementen.

Return-Statement: Jede Komponente muss etwas zurückgeben, was React rendern kann. Dies kann JSX sein, ein String, eine Zahl, oder null falls nichts gerendert werden soll.

JSX-Syntax: Die HTML-ähnliche Syntax ermöglicht es, die Struktur der Benutzeroberfläche deklarativ zu beschreiben. Wichtig zu verstehen ist, dass JSX nicht HTML ist – es ist syntaktischer Zucker für React-Funktionsaufrufe.

function UserGreeting() {
  return (
    <div>
      <h2>Guten Tag!</h2>
      <p>Schön, dass Sie unsere Anwendung nutzen.</p>
    </div>
  );
}

5.3 JSX – Mehr als nur HTML

JSX mag wie HTML aussehen, bringt aber wichtige Unterschiede mit sich, die Sie von Anfang an verstehen sollten:

Attribut-Namen: Viele HTML-Attribute haben in JSX andere Namen. Das class-Attribut wird zu className, da class ein reserviertes Wort in JavaScript ist. For-Schleifen verwenden htmlFor statt for.

Inline-Styles: Styles werden nicht als Strings, sondern als JavaScript-Objekte definiert:

function StyledComponent() {
  return (
    <div style={{ backgroundColor: 'blue', padding: '10px' }}>
      Gestylter Inhalt
    </div>
  );
}

Beachten Sie die doppelten geschweifte Klammern: Die äußeren markieren einen JavaScript-Ausdruck in JSX, die inneren definieren das Objekt.

JavaScript-Ausdrücke: Innerhalb von JSX können Sie JavaScript-Ausdrücke in geschweifte Klammern einbetten:

function DynamicContent() {
  const userName = "Max Mustermann";
  const currentTime = new Date().toLocaleTimeString();
  
  return (
    <div>
      <h3>Hallo {userName}!</h3>
      <p>Aktuelle Zeit: {currentTime}</p>
    </div>
  );
}

5.4 Komponenten-Komposition

Der wahre Wert von React-Komponenten zeigt sich in ihrer Kompositionsfähigkeit. Komponenten können andere Komponenten verwenden, wodurch komplexe Benutzeroberflächen aus einfachen, wiederverwendbaren Bausteinen entstehen.

function Header() {
  return <h1>Meine Anwendung</h1>;
}

function Navigation() {
  return (
    <nav>
      <ul>
        <li>Home</li>
        <li>Über uns</li>
        <li>Kontakt</li>
      </ul>
    </nav>
  );
}

function App() {
  return (
    <div>
      <Header />
      <Navigation />
      <main>
        <p>Hauptinhalt der Anwendung</p>
      </main>
    </div>
  );
}

Diese Komposition ermöglicht es, komplexe Anwendungen in kleine, verständliche und testbare Einheiten zu unterteilen. Jede Komponente hat eine klar definierte Verantwortlichkeit.

5.5 Warum Komponenten so mächtig sind

React-Komponenten lösen fundamentale Probleme der traditionellen Webentwicklung:

Wiederverwendbarkeit: Eine einmal geschriebene Komponente kann an beliebig vielen Stellen verwendet werden. Änderungen müssen nur an einer Stelle vorgenommen werden.

Kapselung: Jede Komponente kapselt ihre Logik und ihren Zustand. Dies reduziert die Komplexität und macht Code wartbarer.

Komposition statt Vererbung: Komplexe Benutzeroberflächen entstehen durch Zusammensetzen einfacher Komponenten, nicht durch komplexe Vererbungshierarchien.

Deklarative Programmierung: Sie beschreiben, was die Benutzeroberfläche zeigen soll, nicht wie sie manipuliert werden muss. React kümmert sich um die Details der DOM-Manipulation.

5.6 Praktische Organisationstipps

Für größere Projekte empfiehlt sich eine strukturierte Organisation der Komponenten:

Dateistruktur: Jede Komponente sollte in ihrer eigenen Datei liegen. Der Dateiname sollte den Komponentennamen widerspiegeln.

Benennung: Verwenden Sie aussagekräftige Namen, die die Funktion der Komponente beschreiben. UserProfileCard ist besser als Card.

Kleine Komponenten: Halten Sie Komponenten klein und fokussiert. Eine Komponente sollte idealerweise nur eine Sache tun.

5.7 Häufige Einstiegsfehler vermeiden

Vergessene Return-Statements: Jede Komponente muss etwas zurückgeben. Ein vergessenes return führt zu undefined und Fehlern.

Mehrere Root-Elemente: JSX erfordert ein einziges Root-Element. Verwenden Sie <div> oder React Fragments (<>...</>), um mehrere Elemente zu gruppieren.

Falsche Attribut-Namen: Denken Sie daran, dass JSX JavaScript ist. Verwenden Sie className statt class und htmlFor statt for.

5 Grundlagen von React-Komponenten