Beschreibung der Benutzeroberfläche

React ist eine JavaScript-Bibliothek zum Rendern von Benutzeroberflächen (UI). Eine Benutzeroberfläche besteht aus kleinen Einheiten wie Schaltflächen, Text und Bildern. React ermöglicht es Ihnen, diese zu wiederverwendbaren, verschachtelbarenKomponentenzu kombinieren. Von Websites bis hin zu Handy-Apps kann alles auf dem Bildschirm in Komponenten zerlegt werden. In diesem Kapitel lernen Sie, React-Komponenten zu erstellen, anzupassen und bedingt anzuzeigen.

Ihre erste Komponente

React-Anwendungen werden aus isolierten Teilen der Benutzeroberfläche aufgebaut, dieKomponentengenannt werden. Eine React-Komponente ist eine JavaScript-Funktion, die Sie mit Markup versehen können. Komponenten können so klein wie eine Schaltfläche oder so groß wie eine gesamte Seite sein. Hier ist eineGallery-Komponente, die dreiProfile-Komponenten rendert:

Importieren und Exportieren von Komponenten

Sie können viele Komponenten in einer Datei deklarieren, aber große Dateien können schwierig zu navigieren sein. Um dies zu lösen, können Sie eine Komponente in ihre eigene Dateiexportierenund dann diese Komponente aus einer anderen Dateiimportieren:

Markup mit JSX schreiben

Jede React-Komponente ist eine JavaScript-Funktion, die etwas Markup enthalten kann, das React im Browser rendert. React-Komponenten verwenden eine Syntaxerweiterung namens JSX, um dieses Markup darzustellen. JSX sieht HTML sehr ähnlich, ist aber etwas strenger und kann dynamische Informationen anzeigen.

Wenn wir bestehendes HTML-Markup in eine React-Komponente einfügen, funktioniert das nicht immer:

Wenn Sie bestehendes HTML wie dieses haben, können Sie es mit einemKonverterbeheben:

JavaScript in JSX mit geschweiften Klammern

JSX ermöglicht es dir, HTML-ähnliches Markup in einer JavaScript-Datei zu schreiben und so Rendering-Logik und Inhalt an einem Ort zu halten. Manchmal möchtest du ein wenig JavaScript-Logik hinzufügen oder auf eine dynamische Eigenschaft innerhalb dieses Markups verweisen. In diesem Fall kannst du in deinem JSX geschweifte Klammern verwenden, um ein „Fenster“ zu JavaScript zu öffnen:

Props an eine Komponente übergeben

React-Komponenten kommunizieren überPropsmiteinander. Jede übergeordnete Komponente kann Informationen an ihre untergeordneten Komponenten weitergeben, indem sie ihnen Props übergibt. Props erinnern dich vielleicht an HTML-Attribute, aber du kannst jeden JavaScript-Wert durch sie übergeben, einschließlich Objekte, Arrays, Funktionen und sogar JSX!

Bedingtes Rendering

Deine Komponenten müssen oft unterschiedliche Dinge anzeigen, je nach verschiedenen Bedingungen. In React kannst du JSX bedingt rendern, indem du JavaScript-Syntax wieif-Anweisungen, den&&- und den? :-Operator verwendest.

In diesem Beispiel wird der JavaScript-&&Operator verwendet, um bedingt ein Häkchen zu rendern:

Listen rendern

Oft möchtest du mehrere ähnliche Komponenten aus einer Datensammlung anzeigen. Du kannst JavaScriptsfilter()undmap()mit React verwenden, um dein Datenarray zu filtern und in ein Array von Komponenten umzuwandeln.

Für jedes Array-Element musst du einenkeyangeben. Normalerweise verwendest du eine ID aus der Datenbank alskey. Keys ermöglichen es React, den Platz jedes Elements in der Liste zu verfolgen, selbst wenn sich die Liste ändert.

Komponenten rein halten

Einige JavaScript-Funktionen sindrein.Eine reine Funktion:

• Kümmert sich um ihre eigenen Angelegenheiten.Sie ändert keine Objekte oder Variablen, die vor ihrem Aufruf existierten.
• Gleiche Eingaben, gleiche Ausgabe.Bei gleichen Eingaben sollte eine reine Funktion immer das gleiche Ergebnis zurückgeben.

Indem du deine Komponenten strikt nur als reine Funktionen schreibst, kannst du eine ganze Klasse verwirrender Fehler und unvorhersehbaren Verhaltens vermeiden, wenn deine Codebasis wächst. Hier ist ein Beispiel für eine unreine Komponente:

Du kannst diese Komponente rein machen, indem du eine Prop übergibst, anstatt eine bestehende Variable zu ändern:

Deine Benutzeroberfläche als Baum

React verwendet Bäume, um die Beziehungen zwischen Komponenten und Modellen zu modellieren.

Ein React-Renderbaum ist eine Darstellung der Eltern-Kind-Beziehung zwischen Komponenten.

Ein Beispiel für einen React-Renderbaum.

Komponenten nahe der Spitze des Baums, nahe der Wurzelkomponente, gelten als Komponenten der obersten Ebene. Komponenten ohne Kindkomponenten sind Blattkomponenten. Diese Kategorisierung von Komponenten ist nützlich, um den Datenfluss und die Renderleistung zu verstehen.

Die Modellierung der Beziehung zwischen JavaScript-Modulen ist eine weitere nützliche Methode, um deine App zu verstehen. Wir bezeichnen sie als Modulabhängigkeitsbaum.

Ein Beispiel für einen Modulabhängigkeitsbaum.

Ein Abhängigkeitsbaum wird oft von Build-Tools verwendet, um den gesamten relevanten JavaScript-Code für den Client zum Herunterladen und Rendern zu bündeln. Eine große Bundle-Größe verschlechtert die Benutzererfahrung für React-Apps. Das Verständnis des Modulabhängigkeitsbaums ist hilfreich, um solche Probleme zu debuggen.

Was kommt als Nächstes?

Gehe weiter zuDeine erste Komponente, um dieses Kapitel Seite für Seite zu lesen!

Oder, wenn du mit diesen Themen bereits vertraut bist, warum liest du nicht überInteraktivität hinzufügen?