Crashkurs für Anfänger, Teil 2

In Teil eins dieser Tutorialserie haben wir die Create-React-App Tool zum Erstellen einer funktionierenden Beispiel-App als Ausgangspunkt für unsere Galerie-Movie-Movie-Mojo-App.

In Teil zwei werden wir uns damit befassen, unsere erste benutzerdefinierte Komponente für die Anzeige einzelner Filmkarten hinzuzufügen. Wir werden auch sehen, wie wir mithilfe von Requisiten das Erscheinungsbild von Komponenten anpassen können, indem Daten übergeben werden, statt sie fest zu codieren.

Dies zeigt die Flexibilität und Wiederverwendbarkeit von Komponenten und wie sie als leistungsstarke Bausteine in Ihren React-Apps verwendet werden können.

Unsere erste Komponente

OK, lass uns eine Komponente erstellen! Zu Beginn halten wir die Dinge ziemlich einfach und gestalten den Header-HTML-Code in seine eigene Komponente um.

In den bewährten Vorgehensweisen von Modern React wird empfohlen, jede Komponente in Ihrer App in einer separaten Datei aufzuteilen. Wir folgen diesem Prinzip also in Ihren Projekten / src / components / Erstellen Sie eine neue Datei mit dem Namen Header.js und öffnen Sie es in einem Texteditor.

Am Anfang von Komponentendateien importieren wir immer die erforderlichen Bibliotheken, andere Komponenten (da Komponenten verschachtelt werden können) und zusätzliche Assets (z. B. Stile). Das einführen statement ist Teil von ES6 und ermöglicht es uns, unsere Projekte hochgradig modular zu halten.

Für unser

Komponente brauchen wir nur die React-Bibliothek zu importieren, was wir mit dieser Anweisung machen können:

importieren Sie React, Component aus 'reagieren';

Dadurch wird die gesamte React-Bibliothek importiert und über die Reagieren Variable. Es importiert auch die Komponente Objekt direkt, damit wir es verwenden können, ohne es speziell mit einem Vorgänger zu qualifizieren Reagieren. Objektreferenz.

Mit anderen Worten, wenn wir das nicht explizit importiert haben Komponente Objekt dann müssten wir wie folgt darauf zugreifen:

React.Component

Aber weil wir importiert haben Komponente Direkt können wir es einfach ohne den Hinweis auf die Reagieren Variable. Es spielt keine Rolle, welche Sie verwenden, und hängt von der Präferenz ab.

Um die Komponente tatsächlich zu erstellen, erweitern wir die Erweiterung Komponente Objekt erstellen, um eine neue Klasse zu erstellen, die unsere definiert

Komponente. Nach dem einführen Anweisung, Typ:

Klasse Header erweitert Komponente  Export-Standardanwendung;

Hier verwenden wir eine ES6-Klasse als Komponentencontainer. Klassen sind eine großartige Möglichkeit, den gesamten Code zu beschreiben, der zur Beschreibung Ihrer Komponente erforderlich ist.

Möglicherweise haben Sie auch festgestellt, dass die Komponentendatei mit einer Exportanweisung endet. Dies exportiert erwartungsgemäß die Komponente und macht sie für andere Dateien in unserem Projekt verfügbar.

Zumindest müssen alle React-Komponenten über eine Render-Methode verfügen, die etwas Markup zurückgibt. Dies kann HTML, andere React-Komponenten oder eine Mischung aus beiden sein.

Fügen Sie dies in Ihre Komponentenklasse ein:

render () return React.createElement ('div', null, 'Hallo, das ist eine React-Komponente!');

Das React.createElement () Methode erstellt ein HTML-Element (a

in diesem Fall) und fügt etwas Inhalt hinzu. Änderungen speichern in Header.js und öffne dich App.js.

Um eine React-Komponente in einer anderen Komponente zu verwenden, müssen Sie sie zuerst importieren. Fügen Sie diese also der Liste der Importanweisungen oben in hinzu App.js:

Header aus './Header' importieren;

Beachten Sie, wie Sie das nicht hinzufügen müssen .js Dateierweiterung, da davon ausgegangen wird. Auch weil das

Komponente befindet sich im selben Ordner wie unsere Komponente müssen wir nicht den vollständigen Pfad angeben.

In der Tat, wenn Sie versuchen, zu verwenden Header aus './components/Header' importieren; von innen App.js, Sie erhalten einen Kompilierungsfehler.

Wir können jetzt das hinzufügen

Komponente innerhalb der return-Anweisung wie jedes HTML-Element. Es gibt jedoch einen Vorbehalt. Sie können nur Gibt ein Element der obersten Ebene in einer Komponentenrückgabemethode zurück.

Das ist also nicht erlaubt:

render () return ( 
 
 );

Wenn Sie mehrere Elemente zurückgeben möchten, müssen Sie sie alle in einem einzigen Wrapper-Element zusammenfassen:

render () return (  
 
 
 );

Stellen Sie also sicher, dass Sie das hinzufügen

Komponente innerhalb der

Element, um Fehler zu vermeiden.

Die Klasse App erweitert die Komponente render () return (    Entdecken Sie Ihren Film Mojo!
 
  Willkommen bei der 'Movie Mojo' React App! 
 
 );

Dies wird zu unserem Ergebnis führen

Komponente wird gerendert.

Um die

Komponente entfernen wir den folgenden HTML-Block von App.js und füge es zu Header.js.

 Entdecken Sie Ihren Film Mojo!

Möglicherweise haben Sie jedoch festgestellt, dass ein Problem vorliegt. Im App.js das Component-Render-Methode gibt zurück, was wie HTML aussieht. Noch in Header.js Es gibt nur einen einzigen Anruf React.createElement (). Was ist los?

Die Antwort lautet JSX. Im App.js Wir verwenden JSX, um HTML-artige Syntax zu schreiben, um unsere Komponentenausgabe zu definieren. Vergleichen Sie dies mit unserer Komponentendefinition für Header.js.

React.createElement ('div', null, 'Hallo, das ist eine React-Komponente!');

So müssen wir React-Komponenten ohne JSX schreiben. Unter der Haube ist dies das, woraus JSX kompiliert wird, bevor es für den Browser gerendert werden kann.

Sie müssen JSX für Ihre React-Komponenten überhaupt nicht verwenden. Es liegt ganz bei Ihnen. Aber fast alle Komponenten, auf die Sie stoßen, werden in JSX geschrieben, weil es einfach zu schreiben ist.

Es ist auch für andere, die in Ihrem Code neu sind, gut lesbar. Stellen Sie sich vor, Sie müssen ein React-Projekt studieren, das Dutzende verschiedener Komponenten enthält, die in reinem JavaScript geschrieben sind!

Es sollte daher nicht überraschen, dass wir JSX für Komponentendefinitionen für den Rest dieser Tutorialserie verwenden werden.

Fahren Sie fort und ersetzen Sie das React.createElement () Aufruf mit dem JSX-Äquivalent, von dem wir kopiert haben App.js. Ihre Header.js Die Datei sollte jetzt so aussehen:

importieren Sie React, Component aus 'reagieren'; class Header erweitert Component render () return (  Entdecken Sie Ihren Film Mojo!
 
 );  Standardheader exportieren;

Während JSX uns beim Schreiben unserer Komponenten viel mehr Flexibilität bietet, denken Sie daran, dass nicht HTML, sondern eine Abstraktion davon geschrieben wird.

Sie können dies im Code-Snippet oben sehen. Beachten Sie in der

tag wir verwendet haben Klassenname eher, als Klasse um anzugeben, wo wir eine CSS-Klasse deklarieren möchten? Dies liegt daran, dass alles JSX auf reines JavaScript und herunterkompiliert wird Klasse ist ein reserviertes Wort in ES6 JavaScript.

Lassen Sie uns auch die Header-Styles anpassen. Öffnen App.css und bearbeiten Sie die .App-Kopfzeile CSS-Klasse zu sein:

.App-Header Hintergrundfarbe: Stahlblau; Höhe: 70px; Polsterung: 20px; Farbe weiß;

Dadurch wird die Hintergrundfarbe der Kopfzeile aktualisiert und die Höhe verringert.

Komponentenrequisiten

Soweit unsere

Komponente ist statisch. Das heißt, es werden feste Inhalte angezeigt, die sich niemals ändern. Komponenten können jedoch auch dynamisch sein und den Inhalt anzeigen, der über Komponentenrequisiten an sie übergeben wird. Dies macht Komponenten plötzlich viel nützlicher, da sie generisch und wiederverwendbar werden.

Stellen Sie sich Komponenten-Requisiten wie HTML-Tags vor. Zum Beispiel a

Tag kann Attribute für haben Ich würde, Klasse, Stil und so weiter, damit wir eindeutige Werte für diese spezifischen Werte vergeben können

Element.

Dasselbe können wir für React-Komponenten tun. Nehmen wir an, wir wollten nicht, dass der Header den festen Text 'Discover Your Movie Mojo!' Ausgibt. die ganze Zeit. Wäre es nicht besser, wenn unsere Kopfzeile Text anzeigen könnte??

Im Gegensatz zu HTML-Attributen können wir unsere Komponentenrequisiten benennen, was immer wir möchten. Innerhalb App.js, Aktualisieren Sie die

Tag zu sein:

Aktualisieren Sie dann die

Komponente zur Verwendung der Text Stütze.

 this.props.text

Dies führt dazu, dass unser Header den Text anzeigt, der dem hinzugefügt wird Text Stütze in App.js.

Schauen wir uns einmal genauer an, wie wir das verwiesen haben Text Stütze im Inneren Header.js mit:

this.props.text

Die geschweiften Klammern sagen JSX einfach an, dass wir JavaScript haben, das wir auswerten möchten. Dies unterscheidet es vom Text. Wenn wir keine geschweiften Klammern verwendet haben, ist das String-Literal this.props.text würde ausgegeben werden, was wir nicht wollen.

Das diese Schlüsselwort bezieht sich auf das Header Komponentenklasse und Requisiten ist ein Objekt, das alle übergebenen Werte enthält

. In unserem Fall die Requisiten Das Objekt enthält nur einen Eintrag. Sie können jedoch beliebig viele Einträge hinzufügen.

Unsere

Die Komponente ist jetzt viel generischer und enthält keine hartcodierte Zeichenfolge. Dies ist eine gute Vorgehensweise beim Schreiben von React-Komponenten. Je generischer Sie sie machen, desto wiederverwendbarer sind sie.

Dies ist eine gute Nachricht bei der Entwicklung zukünftiger React-Apps, da Sie Komponenten aus früheren Projekten wiederverwenden können, sodass Sie nicht alles von Grund auf neu schreiben müssen.

Wir haben Requisiten oben benutzt, um eine feste Saite in die

Komponente, aber Requisiten können auch Variablen, Funktionsreferenzen und Zustände an Komponenten übergeben.

Um eine Variable über Requisiten zu senden, könnten wir Folgendes tun, wo Überschrift ist eine Variable:

Prüfen von Reaktkomponenten

Für den Chrome-Browser steht ein sehr nützliches Tool zur Verfügung, mit dem Sie Informationen zu Ihrer React-App überprüfen können.

Mit den Standard-Entwicklertools können Sie nur normale HTML-Elemente anzeigen. Wenn jedoch die Erweiterung React Developer Tools installiert ist, können Sie durch alle React-Komponenten in Ihrer App navigieren.

Öffnen Sie nach der Installation die Browser-Inspector-Tools und klicken Sie auf die neu verfügbaren Reagieren Tab. Beachten Sie, dass anstelle von HTML-Elementen die Hierarchie der React-Komponenten in Ihrer App angezeigt wird. Klicke auf das Komponente, um es auszuwählen.

Nach der Auswahl werden Informationen zu einer Komponente im Fenster rechts angezeigt. Das Komponente hat keine Requisiten und daher ist das Fenster leer. Aber wenn Sie das auswählen

Komponente im Inneren dann siehst du die "Text" -Stütze, die wir übergeben haben.

Die React-Entwicklertools sind sehr hilfreich für das Debugging, insbesondere wenn Sie komplexere React-Apps entwickeln. Daher sollten Sie sich an einfachere Apps gewöhnen.

Sie können auch die React-Entwicklertools verwenden, um Ihren Anwendungsstatus zu überprüfen, auf den wir im nächsten Lernprogramm eingehen.

Fazit

In diesem Lernprogramm haben Sie erfahren, wie Sie Ihre App in einzelne Komponenten aufteilen, um sie modularer zu gestalten. Mit Komponenten-Requisiten können Sie Werte an einzelne Komponenten übergeben, ähnlich wie Sie Attribute zu HTML-Elementen hinzufügen.

Wir haben auch gesehen, wie man neue Browser-Inspector-Tools zur Untersuchung von Komponenten und Requisiten-Daten einsetzt.

In Teil 3 fügen wir unserer App Status hinzu, damit wir unsere Daten effektiver verwalten können.

Code

Crashkurs für Anfänger, Teil 3

Crashkurs für Anfänger, Teil 1