React-Komponenten 101: Erstellung wiederverwendbarer, wartungsfreundlicher UI-Elemente
Erfahren Sie, warum die Aufteilung von UIs in kleine React-Komponenten die Wiederverwendbarkeit, Lesbarkeit und die Teamzusammenarbeit verbessert, und erstellen Sie anschließend Ihre erste funktionale Komponente.
Ein vertrautes Szenario für jeden Frontend-Entwickler
Stellen Sie sich vor: Es ist Ihre erste Woche in einem neuen Startup.
Ihr Manager kommt an Ihren Schreibtisch und sagt zu Ihnen,
"Die Startseite muss bis Freitag fertig sein."
Sie öffnen das Figma-Design.
Das Design setzt sich aus diesen Abschnitten zusammen:
- Ein oberes Navigationsmenü
- Ein großer Hero-Banner
- Eine Suchleiste
- Ein Bereich zur Präsentation von Highlights-Produkten
- Ein Abschnitt mit Kundenbewertungen
- Eine Preisliste
- Ein Block mit häufig gestellten Fragen
- Ein Formular zur Anmeldung zum Newsletter
- Ein Footer der Website
Die Aufgabe scheint einfach genug zu sein.
Sie erstellen eine einzige HTML-Datei und fangen an, nacheinander jeden Abschnitt zu erstellen.
Bis Freitag ist alles erledigt.
Alles funktioniert einwandfrei.
Sie sind damit sehr zufrieden.
Ein Monat später ist das Produkt gewachsen.
Das Marketingteam wünscht sich ein neues Banner-Design.
Die Designer überarbeiten die Navigationsleiste.
Das Produktteam möchte einen zusätzlichen Abschnitt für Preisstufen.
Kundenbewertungen müssen nun dynamisch geladen werden.
Schnell hat diese eine Datei bereits mehr als 2.000 Zeilen erreicht.
Das Finden einer einzelnen Schaltfläche wird zur Suche durch ein Labyrinth aus Code.
Noch schlimmer: Die leise Anpassung eines Teils der Seite zerstört etwas völlig Unverwandtes.
Klingt das vertraut?
Genauso diese Probleme haben Entwickler dazu gebracht, einen anderen Ansatz bei der Erstellung von Benutzeroberflächen zu verfolgen.
Anstatt eine riesige Seite zu erstellen – was, wenn man sie stattdessen aus vielen kleinen, wiederverwendbaren Elementen zusammensetzt?
In React werden diese Elemente Komponenten genannt.
Warum eine einzige riesige Datei zusammenbricht
Stellen Sie sich eine typische Webseite vor, die auf die alte Weise erstellt wurde.
Homepage.html
---------------------------------------------------
Navigation
Hero Section
Featured Products
About Us
Testimonials
Pricing
FAQ
Newsletter
Footer
---------------------------------------------------
Jeder Bestandteil der Seite befindet sich in dieser einen Datei.
Sobald das Projekt wächst, werden Sie folgendes feststellen:
- Die Datei wird immer größer.
- Es wird schwieriger, im Team zu arbeiten.
- Es kann eigentlich nichts wiederverwendet werden.
- Fehler tauchen häufiger auf.
- Die Wartung des Codes wird anstrengend.
Schauen Sie sich nun an, wie React dieselbe Seite handhabt.
App
│
├── Navbar
├── Hero
├── Products
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
├── Testimonials
├── FAQ
└── Footer
Anstatt alles in eine einzige Datei zu packen, wird jeder Abschnitt zu einer eigenständigen Einheit.
Dieses Muster wird als componentbasierte Architektur bezeichnet.
Definieren einer React-Komponente
Im Grunde genommen ist eine Komponente nichts anderes als ein wiederverwendbarer Teil der Benutzeroberfläche.
Man kann sie sich als eine JavaScript-Funktion vorstellen, die JSX zurückgibt.
Anstatt die gesamte Seite in eine einzige Datei zu packen, teilt man sie in kleinere, fokussierte Teile auf.
Jeder Teil übernimmt genau eine Aufgabe.
Zum Beispiel:
Die Navigationsleiste wird zu einem eigenen Komponenten.
Der Fußbereich ist eine weitere Komponente.
Eine Produktkarte ist wiederum eine weitere Komponente.
Auch der Bereich für das Benutzerprofil wird zu einer Komponente.
Anschließend werden diese Komponenten zusammengefügt, um die vollständige Anwendung zu erstellen.
Das Ergebnis ist eine Codebasis, die viel leichter zu lesen, zu testen und im Laufe der Zeit zu warten ist.
Die Denkweise zur Benutzeroberfläche ändern
Das ist einer der wichtigsten Denkwechsel, den Sie durchmachen werden, wenn Sie React erlernen.
Hören Sie auf, in Begriffen von ganzen Seiten zu denken.
Fangen Sie an, in Begriffen von einzelnen Teilen zu denken.
Anstatt zu fragen:
"Wie soll ich diese Startseite bauen?"
Probieren Sie es mit folgender Frage:
"Welche kleineren Bestandteile bilden zusammen diese Startseite?"
Sobald dieser Gedankensprung gelingt, wirkt React viel intuitiver.
Eine alltägliche Vergleich
Stellen Sie sich das Zusammenbauen einer LEGO-Stadt vor.
Man formt nicht jedes Mal einen völlig neuen Stein, wenn man einen benötigt.
Stattdessen verwendet man die Steine, die man bereits hat.
Einige Steine bilden Wände.
Andere werden zu Fenstern.
Weitere bilden Dächer.
Durch das Mischen und Kombinieren dieser wiederverwendbaren Steine kann man unzählige verschiedene Gebäude errichten.
React-Komponenten funktionieren genauso.
Eine einzige Button-Komponente kann zum Beispiel erscheinen:
- Auf dem Anmeldescreen
- In einem Modal-Fenster
- Auf der Zahlenseite
- In der Navigationsleiste
Man erstellt sie nur einmal.
Dann fügen Sie es einfach dorthin ein, wo es benötigt wird.
Darin liegt der wahre Wert von Komponenten.
Die Logik hinter Reacts Komponentenmodell
React setzt auf Komponenten, weil sie echte, praktische Probleme lösen.
1. Wiederverwendbarkeit
Bauen Sie es einmal.
Wiederverwenden Sie es endlos.
Anstatt denselben Button-Code zwanzigmal einzeln zu erstellen, definieren Sie eine einzige Button-Komponente und verwenden sie überall im Programm, wo sie benötigt wird.
2. Lesbarkeit
Betrachten Sie zwei Szenarien nebeneinander.
Eine Datei mit 2.000 Zeilen.
Gegenüber...
zwanzig separaten Dateien, jede mit einem klaren, eindeutigen Zweck.
Zu welcher würden Sie sich lieber in sechs Monaten wieder wenden?
Kleinere Komponenten sind einfach leichter zu verstehen.
3. Wartbarkeit
Stellen Sie sich eine Situation vor, in der Ihr Unternehmen beschließt, die Farbe seiner Hauptschaltfläche zu ändern.
Hätten Sie Ihre Benutzeroberfläche nicht in Komponenten aufgeteilt, würde diese Änderung bedeuten, Dutzende von Dateien suchen und bearbeiten zu müssen.
Doch mit einer einzigen wiederverwendbaren Button-Komponente können Sie die Änderung an einem Ort vornehmen.
Jede Ansicht, die diese Schaltfläche verwendet, spiegelt die Aktualisierung sofort wider.
4. Teamzusammenarbeit
Stellen Sie sich fünf Entwickler vor, die für denselben Codebase zuständig sind.
Eine Person kümmert sich um das Navbar.
Eine andere übernimmt den Hero-Bereich.
Eine dritte erstellt die Produktkarten.
Eine vierte arbeitet am Footer.
Die Aufgabe des fünften Entwicklers besteht darin, all diese Teile zusammenzufügen.
Da jede Funktion in ihrer eigenen Komponente vorhanden ist, muss niemand in die Arbeit eines anderen eingreifen oder auf freie Dateien warten.
Genau wegen dieser Art von parallelem Arbeitsablauf sind Komponenten in Entwicklerteams der Realwelt so wichtig.
Funktionale Komponenten
Die heutigen React-Codebasen stützen sich fast ausschließlich auf Funktionale Komponenten.
Im Grunde genommen ist eine Funktionskomponente nichts anderes als eine JavaScript-Funktion, die JSX zurückgibt.
Hier ist die einfachste Version, die man schreiben kann:
function Welcome() {
return <h1>Hello, React!</h1>;
}
Auf den ersten Blick wirkt das wie eine gewöhnliche JavaScript-Funktion – denn das ist sie auch.
Was sie auszeichnet, ist, dass anstelle von Zahlen oder Zeichenketten JSX zurückgegeben wird, und React verwendet dieses JSX, um zu bestimmen, was auf dem Bildschirm angezeigt werden soll.
Lassen Sie uns das Schritt für Schritt durchgehen:
function Welcome()
Hier deklarieren wir eine Funktion namens Welcome.
Achten Sie auf den großen „W“ am Anfang des Namens.
React achtet speziell auf den großen Anfangsbuchstaben, um zu erkennen, dass eine Funktion als Komponente behandelt werden sollte.
Dann kommt diese Zeile:
return <h1>Hello, React!</h1>;
Die Aufgabe der Funktion besteht darin, JSX zurückzugeben.
Deshalb wird jedes Mal, wenn React Welcome rendernt, dieser Überschriftstext angezeigt.
Das ist alles.
Ihre erste Komponente ist soeben erstellt worden.
Erstellen Ihrer ersten Komponente
Sobald ein Projekt an Größe gewinnt, geben Entwickler in der Regel jeder Komponente eine eigene Datei.
Eine typische Ordnerstruktur könnte wie folgt aussehen:
src
├── App.jsx
└── components
└── Welcome.jsx
Das ist der Inhalt von Welcome.jsx:
function Welcome() {
return <h1>Welcome to React!</h1>;
}
export default Welcome;
Durch das Aufteilen der Komponenten in eigene Dateien bleibt Ihre Codebasis übersichtlich und lässt sich bei zunehmender Größe viel leichter durchforsten.
Exportieren von Komponenten
Vielleicht fragen Sie sich nach dem Zweck dieser Zeile:
export default Welcome;
Nehmen wir an, Sie haben gerade ein solides, wiederverwendbares Komponenten geschrieben.
Solange es nur in seiner eigenen Datei existiert, kann nichts anderes in Ihrer Anwendung darauf zugreifen.
Durch das Exportieren wird es für die Verwendung an anderen Stellen zugänglich.
Es ist etwas wie das Veröffentlichen eines Manuskripts.
Sobald es veröffentlicht ist, kann jeder es nehmen und lesen.
Dieselbe Logik gilt hier – sobald Sie eine Komponente exportieren, kann jede andere Datei in Ihrem Projekt sie importieren und nutzen.
Es gibt weitere Möglichkeiten, Komponenten zu exportieren, die wir in einem späteren Teil dieser Serie behandeln werden, aber export default ist die gängige Wahl, wenn Sie gerade anfangen.
Komponenten importieren
Lassen Sie uns Welcome in App.jsx einbinden und es nutzen.
import Welcome from "./components/Welcome";
Diese Zeile instruiert im Grunde React:
„Holen Sie den
Welcome-Komponenten aus dieser Datei, damit ich sie direkt hier verwenden kann.“
Sobald er importiert wurde, kostet es fast keine Mühe, ihn darzustellen:
function App() {
return (
<>
<Welcome />
</>
);
}
Betrachten Sie sich diesen Syntax-Abschnitt genauer:
<Welcome />
Auch wenn Welcome ursprünglich als einfache JavaScript-Funktion entstanden ist, können wir sie genauso wie eine native HTML-Tag verwenden.
Das ist einer der elegantesten Aspekte der Arbeit mit React – Ihre benutzerdefinierten Funktionen werden zu wiederverwendbaren Bausteinen für die Benutzeroberfläche.
Wie React eine Komponente sieht
Wenn React auf diese Zeile stößt:
<Welcome />
interpretiert er sie nicht als Markup.
Stattdessen sieht es im Hintergrund eher so aus:
Call the Welcome() function
↓
Receive JSX
↓
Convert JSX
↓
Update the Virtual DOM
↓
Render the UI
Einfach ausgedrückt reduziert sich jede Komponente auf einen Funktionsaufruf, der einen Teil der Benutzeroberfläche zurückgibt.
Sobald diese Idee klar wird, wirken Komponenten nicht mehr wie eine Art besonderer Zauber.
Namensregeln
Es gibt einige Namenskonventionen, die man sich aneignen sollte.
Gute Namen:
- Navbar
- Footer
- Hero
- ProductCard
- UserProfile
Namen, die man vermeiden sollte:
- navbar
- footer
- component
- abc
Warum ist das so?
React nutzt die Großschreibung als Signal, um eigene Komponenten von eingebauten HTML-Taggen zu unterscheiden.
Nehmen wir folgendes Beispiel:
<Navbar />
React interpretiert dies als Verweis auf eine eigene, benutzerdefinierte Komponente.
Vergleichen Sie das mit:
<div>
das React als standardmäßiges, eingebautes HTML-Element interpretiert.
Die Wahl klarer, beschreibender Namen lohnt sich auch dann, wenn später andere Entwickler Ihren Code lesen und verstehen müssen.
Kernpunkte
Hier ist eine kurze Zusammenfassung dessen, was bisher behandelt wurde.
- Ein Component ist ein selbstständiger, wiederverwendbarer Teil der Benutzeroberfläche.
- Das Erstellen einer React-Anwendung bedeutet im Grunde nur das Zusammenfügen von Components.
- Funktionale Components sind einfache JavaScript-Funktionen, die JSX zurückgeben.
- Die Aufteilung einer Anwendung in Components verbessert die Lesbarkeit, Wiederverwendbarkeit und langfristige Wartbarkeit.
- Ein gut gestalteter Component konzentriert sich darauf, eine einzige Aufgabe zu erledigen.
- Es ist übliche Praxis, jeden Component in einer eigenen Datei zu halten und ihn dort einzubinden, wo er benötigt wird.
- Durch die Großschreibung unterscheidet React Ihre benutzerdefinierten Components von gewöhnlichen HTML-Elementen.
Zusätzliche Literatur
- Ein mentales Modell für React: Reconciliation, State und Hooks — Erhalten Sie Einblicke in die Logik hinter den Kernkonzepten von React – Reconciliation, Komponenten, Props, State und Hooks – um Intuition zu entwickeln anstelle von API-Auswendiglernen.
- Umgang mit UI-Zuständen in der Praxis mithilfe von Reacts bedingtem Rendering — Lernen Sie, wie Sie in React Authentifizierungs-, Rollen-, Berechtigungs-, Lade-, Fehler- und leere-Status-UIs mit praktischen Mustern des bedingten Renderings erstellen.
catch () in JavaScript einen SyntaxError auslöst — Erfahren Sie, warum eine leere Parameterliste in einem catch-Block die JavaScript-Parsing-Funktion vollständig stört, und sehen Sie sich die beiden grammatikalisch korrekten Möglichkeiten an, einen parameterlosen catch-Block zu schreiben.