Deine Erste Komponente

Komponenten: UI Bausteine

Im Web erlaubt HTML uns strukturierte Dokumente mit den eingebauten Tags wie <h1> und <li> zu erstellen:

<article>
  <h1>Meine Erste Komponente</h1>
  <ol>
    <li>Komponenten: UI Bausteine</li>
    <li>Eine Komponente Definieren</li>
    <li>Eine Komponente Nutzen</li>
  </ol>
</article>

Dieses Markup repräsentiert diesen Artikel <article>, seine Überschrift <h1>, und ein (abgekürztes) Inhaltsverzeichnis als eine geordnete Liste <ol>. Kombiniert mit CSS für das Styling und JavaScript für die Interaktivität, liegt Markup wie dieses hinter jeder Sidebar, jedem Avatar, jedes Modals, jedes Dropdown - jedes Stück UI, das du im Web siehst.

React lässt dich Markup, CSS, und JavaScript in benutzerdefinierte “Komponenten”, wiederverwendbare UI Elemente für deine Anwendung kombinieren. Der Code für das Inhaltsverzeichnis, das du oben gesehen hast, könnte in eine <TableOfContents /> Komponente umgewandelt werden, die du auf jeder Seite rendern könntest. Unter der Haube werden immer noch die gleichen HTML Tags wie <article>, <h1>, etc. verwendet.

Genau wie mit HTML Tags, kannst du Komponenten kombinieren, ordnen und verschachteln um ganze Seiten zu designen. Zum Beispiel ist die Dokumentationsseite, die du gerade liest, aus React Komponenten aufgebaut:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

Wenn den Projekt wächst, wirst du meken, dass viele deiner Designs durch das Wiederverwenden von Komponenten, die du bereits geschrieben hast, zusammengesetzt werden können was deinen Entwicklungsprozess beschleunigt. Unser Inhaltsverzeichnis oben könnte zu jeder Seite mit <TableOfContents /> hinzugefügt werden! Du kannst deinem Projekt sogar mit tausenden Komponenten, die von der React Open Source Community geteilt werden, auf die Sprünge helfen, wie Chakra UI und Material UI.

Eine Komponente definieren

Traditionell haben Webentwickler ihre Inhalte strukturiert und haben dann Interaktivität hinzugefügt, indem sie etwas JavaScript “drüber gestreut” haben. Das hat gut funktioniert, als Interaktionen eine nette Ergänzung im Web waren. Jetzt wird es von vielen Seiten und allen Apps erwartet. React stellt Interaktivität an erste Stelle, während es immer noch die gleiche Technologie verwendet: eine React Komponente ist eine JavaScript Funktion, die du mit Markup bestreuen kannst. So sieht das aus (du kannst das Beispiel unten bearbeiten):

Und so erstellst du eine Komponente:

Schritt 1: Exportiere die Komponente

The export default prefix is a standard JavaScript syntax (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in Importing and Exporting Components!) Das export default Präfix ist eine Standard JavaScript Syntax (nicht spezifisch für React). Es lässt dich die Hauptfunktion in einer Datei markieren, damit du sie später von anderen Dateien importieren kannst. (Mehr über das Importieren in Importieren und Exportieren von Komponenten!)

Schritt 2: Definiere die Funktion

Mit function Profil() { } definierst du eine JavaScript Funktion mit dem Namen Profil.

Schritt 3: Markup hinzufügen

Die Komponente gibt ein <img /> Tag mit src und alt Attributen zurück. <img /> ist wie HTML geschrieben, aber unter der Haube handelt es sich eigentlich um JavaScript. Diese Syntax wird JSX genannt und sie erlaubt es dir Markup in JavaScript einzubetten.

Return Statements können in einer Zeile geschrieben werden, wie in dieser Komponente:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

Aber falls nicht dein gesamtes Markup in der gleichen Zeile wie das return keyword ist, musst du das Markup in ein Paar Klammern einschließen:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

Eine Komponente nutzen

Da du nun deine Profil Komponente definiert hast, kannst du sie in anderen Komponenten nutzen. Zum Beispiel kannst du eine Galerie Komponente exportieren, die mehrere Profil Komponenten nutzt:

Was der Browser sieht

Beachte den Unterschied in der Groß- und Kleinschreibung:

• <section> wird klein geschrieben, damit React weiß, dass wir uns auf einen HTML Tag beziehen.
• <Profil /> beginnt mit einem Großbuchstaben P, damit React weiß, dass wir unsere Komponente Profil nutzen wollen.

Und Profil enthält sogar noch mehr HTML: <img />. Am Ende sieht der Browser das:

<section>
  <h1>Großartige Wissenschaftlerinnen</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Verschachteln und Organisieren von Komponenten

Komponenten sind normale JavaScript Funktionen, also kannst du mehrere Komponenten in der gleicen Datei haben. Das ist praktisch, wenn Komponenten relativ klein sind oder eng miteinander verbunden sind. Falls diese Datei zu voll wird, kannst du Profil immer in eine separate Datei verschieben. Du wirst gleich auf der Seite über das Importieren lernen wie das geht.

Weil die Profil Komponenten - sogar mehrmals! - innerhalb der Galerie Komponente gerendert werden, können wir sagen, dass Galerie eine Übergeordnete Komponente ist, die jede Profil Komponente als “untergeordnete Komponente” rendert. Das ist ein Teil der Magie von React: du kannst eine Komponente einmal definieren und sie dann so oft und an so vielen Stellen nutzen wie du möchtest.

export default function Galerie() {
  // 🔴 Definiere niemals eine Komponente innerhalb einer anderen!
  function Profil() {
    // ...
  }
  // ...
}

export default function Galerie() {
  // ...
}

// ✅ Definiere Komponenten in der obersten Ebene
function Profil() {
  // ...
}