Deine erste Komponente

Komponentensind eines der Kernkonzepte von React. Sie sind das Fundament, auf dem du Benutzeroberflächen (UI) aufbaust, was sie zum perfekten Ausgangspunkt für deine React-Reise macht!

Komponenten: Bausteine der Benutzeroberfläche

Im Web ermöglicht uns HTML, mit seinen eingebauten Tags wie<h1>und<li>strukturierte Dokumente zu erstellen:

Dieses Markup repräsentiert diesen Artikel<article>, seine Überschrift<h1>und ein (gekürztes) Inhaltsverzeichnis als geordnete Liste<ol>. Solches Markup, kombiniert mit CSS für das Styling und JavaScript für Interaktivität, steckt hinter jeder Seitenleiste, jedem Avatar, jedem Modal, jedem Dropdown – hinter jedem UI-Element, das du im Web siehst.

React ermöglicht es dir, dein Markup, CSS und JavaScript in benutzerdefinierte „Komponenten“ zu kombinieren,wiederverwendbare UI-Elemente für deine App.Der obige Code für das Inhaltsverzeichnis könnte in eine<TableOfContents />-Komponente umgewandelt werden, die du auf jeder Seite rendern könntest. Intern verwendet sie weiterhin dieselben HTML-Tags wie<article>,<h1>, usw.

Genau wie mit HTML-Tags kannst du Komponenten kombinieren, anordnen und verschachteln, um ganze Seiten zu gestalten. Zum Beispiel besteht die Dokumentationsseite, die du gerade liest, aus React-Komponenten:

Wenn dein Projekt wächst, wirst du feststellen, dass viele deiner Designs durch die Wiederverwendung bereits geschriebener Komponenten zusammengesetzt werden können, was deine Entwicklung beschleunigt. Unser obiges Inhaltsverzeichnis könnte mit<TableOfContents />zu jedem Bildschirm hinzugefügt werden! Du kannst dein Projekt sogar mit Tausenden von Komponenten beschleunigen, die von der React-Open-Source-Community geteilt werden, wieChakra UIundMaterial UI.

Eine Komponente definieren

Traditionell haben Webentwickler beim Erstellen von Webseiten ihre Inhalte mit Markup versehen und dann Interaktivität hinzugefügt, indem sie etwas JavaScript darüber gestreut haben. Das funktionierte gut, als Interaktivität im Web ein nettes Extra war. Heute wird sie für viele Websites und alle Apps erwartet. React stellt Interaktivität in den Vordergrund, verwendet aber dieselbe Technologie:Eine React-Komponente ist eine JavaScript-Funktion, die dumit Markup bestreuen kannst.So sieht das aus (du kannst das Beispiel unten bearbeiten):

Und so baust du eine Komponente:

Schritt 1: Exportiere die Komponente

Das Präfixexport defaultist eineStandard-JavaScript-Syntax(nicht spezifisch für React). Es ermöglicht dir, die Hauptfunktion in einer Datei zu markieren, damit du sie später aus anderen Dateien importieren kannst. (Mehr zum Importieren inImportieren und Exportieren von Komponenten!)

Schritt 2: Definiere die Funktion

Mitfunction Profile() { }definierst du eine JavaScript-Funktion mit dem NamenProfile.

Schritt 3: Füge Markup hinzu

Die Komponente gibt ein<img />-Tag mit den Attributensrcundaltzurück.<img />sieht aus wie HTML, ist aber eigentlich JavaScript! Diese Syntax heißtJSXund ermöglicht es dir, Markup in JavaScript einzubetten.

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

Wenn dein Markup jedoch nicht in derselben Zeile wie das Schlüsselwortreturnsteht, musst du es in ein Klammerpaar einschließen:

Eine Komponente verwenden

Nachdem du deineProfile-Komponente definiert hast, kannst du sie in andere Komponenten verschachteln. Du kannst beispielsweise eineGallery-Komponente exportieren, die mehrereProfile-Komponenten verwendet:

Was der Browser sieht

Beachte den Unterschied in der Schreibweise:

• <section>ist kleingeschrieben, daher weiß React, dass wir auf ein HTML-Tag verweisen.
• <Profile />beginnt mit einem großenP, daher weiß React, dass wir unsere Komponente namensProfileverwenden möchten.

UndProfileenthält noch mehr HTML:<img />. Am Ende sieht der Browser Folgendes:

Komponenten verschachteln und organisieren

Komponenten sind normale JavaScript-Funktionen, daher kannst du mehrere Komponenten in derselben Datei halten. Das ist praktisch, wenn Komponenten relativ klein sind oder eng miteinander verwandt. Wenn die Datei zu voll wird, kannst duProfilejederzeit in eine separate Datei verschieben. Wie das geht, erfährst du gleich auf derSeite über Imports.

Da dieProfile-Komponenten innerhalb vonGallerygerendert werden – sogar mehrmals! – können wir sagen, dassGalleryeineElternkomponente ist,die jedeProfileals „Kind“ rendert. Das ist Teil der Magie von React: Du kannst eine Komponente einmal definieren und sie dann an so vielen Stellen und so oft verwenden, wie du möchtest.

Zusammenfassung

Sie haben gerade Ihren ersten Eindruck von React erhalten! Lassen Sie uns einige wichtige Punkte zusammenfassen.

• React ermöglicht es Ihnen, Komponenten zu erstellen,wiederverwendbare UI-Elemente für Ihre App.
• In einer React-App ist jedes Stück der Benutzeroberfläche eine Komponente.
• React-Komponenten sind reguläre JavaScript-Funktionen, mit folgenden Ausnahmen:
  1. Ihre Namen beginnen immer mit einem Großbuchstaben.
  2. Sie geben JSX-Markup zurück.