v19.2Latest

Schnellstart

Willkommen in der React-Dokumentation! Diese Seite bietet Ihnen eine Einführung in 80 % der React-Konzepte, die Sie täglich verwenden werden.

Sie werden lernen
  • Wie man Komponenten erstellt und verschachtelt
  • Wie man Markup und Stile hinzufügt
  • Wie man Daten anzeigt
  • Wie man Bedingungen und Listen rendert
  • Wie man auf Ereignisse reagiert und den Bildschirm aktualisiert
  • Wie man Daten zwischen Komponenten teilt

Erstellen und Verschachteln von Komponenten

React-Apps bestehen ausKomponenten. Eine Komponente ist ein Teil der Benutzeroberfläche (UI), der über eigene Logik und ein eigenes Erscheinungsbild verfügt. Eine Komponente kann so klein wie ein Button oder so groß wie eine gesamte Seite sein.

React-Komponenten sind JavaScript-Funktionen, die Markup zurückgeben:

Nachdem SieMyButtondeklariert haben, können Sie es in eine andere Komponente verschachteln:

Beachten Sie, dass<MyButton />mit einem Großbuchstaben beginnt. So erkennen Sie, dass es sich um eine React-Komponente handelt. React-Komponentennamen müssen immer mit einem Großbuchstaben beginnen, während HTML-Tags kleingeschrieben sein müssen.

Sehen Sie sich das Ergebnis an:

Die Schlüsselwörterexport defaultgeben die Hauptkomponente in der Datei an. Wenn Sie mit einem bestimmten Stück JavaScript-Syntax nicht vertraut sind, bietenMDNundjavascript.infohervorragende Referenzen.

Markup mit JSX schreiben

Die oben gezeigte Markup-Syntax heißtJSX. Sie ist optional, aber die meisten React-Projekte verwenden JSX aufgrund ihrer Bequemlichkeit. Allevon uns empfohlenen Tools für die lokale Entwicklungunterstützen JSX von Haus aus.

JSX ist strenger als HTML. Sie müssen Tags wie<br />schließen. Ihre Komponente kann auch nicht mehrere JSX-Tags zurückgeben. Sie müssen sie in einen gemeinsamen Eltern-Container einpacken, wie etwa ein<div>...</div>oder einen leeren<>...</>-Wrapper:

Wenn Sie viel HTML in JSX portieren müssen, können Sie einenOnline-Konverter verwenden.

Stile hinzufügen

In React geben Sie eine CSS-Klasse mitclassNamean. Es funktioniert genauso wie das HTML-class-Attribut:

Dann schreiben Sie die CSS-Regeln dafür in einer separaten CSS-Datei:

React schreibt nicht vor, wie Sie CSS-Dateien hinzufügen. Im einfachsten Fall fügen Sie einen<link>-Tag zu Ihrem HTML hinzu. Wenn Sie ein Build-Tool oder ein Framework verwenden, konsultieren Sie dessen Dokumentation, um zu erfahren, wie Sie eine CSS-Datei zu Ihrem Projekt hinzufügen.

Daten anzeigen

JSX ermöglicht es Ihnen, Markup in JavaScript einzufügen. Geschweifte Klammern lassen Sie „zurück in JavaScript entkommen“, sodass Sie eine Variable aus Ihrem Code einbetten und dem Benutzer anzeigen können. Zum Beispiel wird diesuser.nameanzeigen:

Sie können auch aus JSX-Attributen „in JavaScript entkommen“, müssen dabei aber geschweifte Klammernanstelle vonAnführungszeichen verwenden. Zum Beispiel übergibtclassName="avatar"den String"avatar"als CSS-Klasse, abersrc={user.imageUrl}liest den Wert der JavaScript-Variablenuser.imageUrlund übergibt dann diesen Wert alssrc-Attribut:

Sie können auch komplexere Ausdrücke innerhalb der JSX-Geschweiften Klammern verwenden, zum BeispielString-Verkettung:

Im obigen Beispiel iststyle={{}}keine spezielle Syntax, sondern ein reguläres{}Objekt innerhalb derstyle={ }JSX-Geschweiften Klammern. Sie können dasstyleAttribut verwenden, wenn Ihre Stile von JavaScript-Variablen abhängen.

Bedingtes Rendern

In React gibt es keine spezielle Syntax zum Schreiben von Bedingungen. Stattdessen verwenden Sie dieselben Techniken wie beim Schreiben von regulärem JavaScript-Code. Zum Beispiel können Sie eineif-Anweisung verwenden, um JSX bedingt einzufügen:

Wenn Sie kompakteren Code bevorzugen, können Sie denbedingten ?-Operator verwenden.Im Gegensatz zuiffunktioniert er innerhalb von JSX:

Wenn Sie denelse-Zweig nicht benötigen, können Sie auch eine kürzerelogische &&-Syntaxverwenden:

Alle diese Ansätze funktionieren auch für das bedingte Angeben von Attributen. Wenn Sie mit einigen dieser JavaScript-Syntaxen nicht vertraut sind, können Sie zunächst immerif...elseverwenden.

Listen rendern

Sie werden sich auf JavaScript-Funktionen wie diefor-Schleifeund dieArray map()-Funktionverlassen, um Listen von Komponenten zu rendern.

Nehmen wir zum Beispiel an, Sie haben ein Array von Produkten:

Verwenden Sie innerhalb Ihrer Komponente diemap()-Funktion, um ein Array von Produkten in ein Array von<li>-Elementen umzuwandeln:

Beachten Sie, dass<li>einkey-Attribut hat. Für jedes Element in einer Liste sollten Sie eine Zeichenkette oder eine Zahl übergeben, die dieses Element eindeutig unter seinen Geschwistern identifiziert. Normalerweise sollte ein Schlüssel aus Ihren Daten stammen, wie z.B. eine Datenbank-ID. React verwendet Ihre Schlüssel, um zu wissen, was passiert ist, wenn Sie später Elemente einfügen, löschen oder neu anordnen.

Auf Ereignisse reagieren

Sie können auf Ereignisse reagieren, indem SieEreignishandler-Funktionen innerhalb Ihrer Komponenten deklarieren:

Beachten Sie, dassonClick={handleClick}keine Klammern am Ende hat!Rufen Siedie Ereignishandler-Funktion nicht auf: Sie müssen sie nurübergeben. React ruft Ihren Ereignishandler auf, wenn der Benutzer auf die Schaltfläche klickt.

Den Bildschirm aktualisieren

Oft möchten Sie, dass Ihre Komponente sich an einige Informationen „erinnert“ und sie anzeigt. Zum Beispiel möchten Sie vielleicht die Anzahl der Klicks auf eine Schaltfläche zählen. Dazu fügen Sie Ihrer KomponenteStatehinzu.

Importieren Sie zunächstuseStateaus React:

Jetzt kannst du eineState-Variablein deiner Komponente deklarieren:

Du erhältst zwei Dinge vonuseState: den aktuellen State (count) und die Funktion, mit der du ihn aktualisieren kannst (setCount). Du kannst ihnen beliebige Namen geben, aber die Konvention ist,[something, setSomething]zu schreiben.

Wenn der Button zum ersten Mal angezeigt wird, istcount 0, weil du0anuseState()übergeben hast. Wenn du den State ändern möchtest, rufst dusetCount()auf und übergibst den neuen Wert. Ein Klick auf diesen Button erhöht den Zähler:

React wird deine Komponentenfunktion erneut aufrufen. Diesmal wirdcount 1sein. Dann wird es2sein. Und so weiter.

Wenn du dieselbe Komponente mehrmals renderst, erhält jede ihren eigenen State. Klicke jeden Button separat:

Beachte, wie jeder Button seinen eigenencount-State „merkt“ und andere Buttons nicht beeinflusst.

Hooks verwenden

Funktionen, die mitusebeginnen, werdenHooksgenannt.useStateist ein eingebauter Hook von React. Andere eingebaute Hooks findest du in derAPI-Referenz.Du kannst auch eigene Hooks schreiben, indem du bestehende kombinierst.

Hooks sind restriktiver als andere Funktionen. Du kannst Hooks nurganz obenin deinen Komponenten (oder anderen Hooks) aufrufen. Wenn duuseStatein einer Bedingung oder Schleife verwenden möchtest, extrahiere eine neue Komponente und platziere sie dort.

Daten zwischen Komponenten teilen

Im vorherigen Beispiel hatte jederMyButtonseinen eigenen unabhängigencount, und wenn ein Button geklickt wurde, änderte sich nur dercountdes geklickten Buttons:

Diagramm, das einen Baum aus drei Komponenten zeigt: eine Elternkomponente mit der Bezeichnung MyApp und zwei Kinderkomponenten mit der Bezeichnung MyButton. Beide MyButton-Komponenten enthalten einen count mit dem Wert null.Diagramm, das einen Baum aus drei Komponenten zeigt: eine Elternkomponente mit der Bezeichnung MyApp und zwei Kinderkomponenten mit der Bezeichnung MyButton. Beide MyButton-Komponenten enthalten einen count mit dem Wert null.

Anfangs ist derMyButton-count-State für jeden Button0

Das gleiche Diagramm wie zuvor, wobei der count der ersten Kind-MyButton-Komponente hervorgehoben ist, was einen Klick mit dem auf eins erhöhten count-Wert anzeigt. Die zweite MyButton-Komponente enthält weiterhin den Wert null.Das gleiche Diagramm wie zuvor, wobei der count der ersten Kind-MyButton-Komponente hervorgehoben ist, was einen Klick mit dem auf eins erhöhten count-Wert anzeigt. Die zweite MyButton-Komponente enthält weiterhin den Wert null.

Der ersteMyButtonaktualisiert seinencountauf1

Oft müssen Komponenten jedochDaten teilen und sich immer gemeinsam aktualisieren.

Damit beideMyButton-Komponenten denselbencountanzeigen und sich gemeinsam aktualisieren, musst du den State von den einzelnen Buttons „nach oben“ in die nächstgelegene Komponente verschieben, die alle enthält.

In diesem Beispiel ist dasMyApp:

Diagramm, das einen Baum aus drei Komponenten zeigt: eine Elternkomponente mit der Bezeichnung MyApp und zwei Kinderkomponenten mit der Bezeichnung MyButton. MyApp enthält einen count-Wert von null, der an beide MyButton-Komponenten weitergegeben wird, die ebenfalls den Wert null anzeigen.Diagramm, das einen Baum aus drei Komponenten zeigt: eine Elternkomponente mit der Bezeichnung MyApp und zwei Kinderkomponenten mit der Bezeichnung MyButton. MyApp enthält einen count-Wert von null, der an beide MyButton-Komponenten weitergegeben wird, die ebenfalls den Wert null anzeigen.

Anfangs ist derMyApp-count-State0und wird an beide Kinderkomponenten weitergegeben.

Das gleiche Diagramm wie zuvor, wobei der count der Elternkomponente MyApp hervorgehoben ist, um einen Klick anzuzeigen, bei dem der Wert auf eins erhöht wurde. Der Datenfluss zu beiden Kinderkomponenten MyButton ist ebenfalls hervorgehoben, und der count-Wert in jedem Kind ist auf eins gesetzt, was zeigt, dass der Wert weitergegeben wurde.Das gleiche Diagramm wie zuvor, wobei der count der Elternkomponente MyApp hervorgehoben ist, um einen Klick anzuzeigen, bei dem der Wert auf eins erhöht wurde. Der Datenfluss zu beiden Kinderkomponenten MyButton ist ebenfalls hervorgehoben, und der count-Wert in jedem Kind ist auf eins gesetzt, was zeigt, dass der Wert weitergegeben wurde.

Bei einem Klick aktualisiertMyAppseinencount-State auf1und gibt ihn an beide Kinderkomponenten weiter.

Wenn Sie nun auf einen der beiden Buttons klicken, ändert sich dercountinMyApp, was wiederum beide count-Werte inMyButtonändert. So können Sie dies im Code ausdrücken.

Zuerstverschieben Sie den State nach obenvonMyButtoninMyApp:

Danngeben Sie den State nach untenvonMyAppan jedeMyButton-Komponente weiter, zusammen mit dem gemeinsamen Klick-Handler. Sie können Informationen anMyButtonmithilfe der JSX-Geschweiften Klammern übergeben, genau wie Sie es zuvor mit eingebauten Tags wie<img>getan haben:

Die auf diese Weise weitergegebenen Informationen werden alsPropsbezeichnetMyApp-Komponente dencount-State und denhandleClick-Event-Handler undgibt beide als Propsan jeden der Buttons weiter.

Ändern Sie schließlichMyButtonso, dass es die Propsausliest, die Sie von seiner Elternkomponente erhalten haben:

Wenn Sie auf den Button klicken, wird deronClick-Handler ausgelöst. DeronClick-Prop jedes Buttons wurde auf diehandleClick-Funktion innerhalb vonMyAppgesetzt, sodass der darin enthaltene Code ausgeführt wird. Dieser Code ruftsetCount(count + 1)auf, wodurch die State-Variablecounterhöht wird. Der neuecount-Wert wird als Prop an jeden Button übergeben, sodass alle den neuen Wert anzeigen. Dies wird als „State nach oben verschieben“ (lifting state up) bezeichnet. Durch das Verschieben des States nach oben haben Sie ihn zwischen Komponenten geteilt.

Nächste Schritte

Sie kennen nun die Grundlagen, wie man React-Code schreibt!

Sehen Sie sich dasTutorialan, um sie in die Praxis umzusetzen und Ihre erste Mini-App mit React zu erstellen.

下一篇Tic-Tac-Toe