React Tutorial Teil 4: Übergeordnete und untergeordnete Komponenten

Wir veröffentlichen den nächsten Teil der Übersetzung des React-Schulungskurses. Unser heutiges Thema wird die Beziehung zwischen Eltern- und Kinderkomponenten sein.



→ Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX
→ Teil 2: Funktionskomponenten
→ Teil 3: Komponentendateien, Projektstruktur
→ Teil 4: übergeordnete und untergeordnete Komponenten
→ Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings
→ Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript
→ Teil 7: Inline-Stile
→ Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten
→ Teil 9: Komponenteneigenschaften
→ Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling
→ Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode
→ Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung
→ Teil 13: Klassenbasierte Komponenten
→ Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus
→ Teil 15: Komponentengesundheitsworkshops
→ Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung
→ Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten
→ Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung
→ Teil 19: Methoden des Komponentenlebenszyklus
Teil 20: Die erste Lektion in bedingtem Rendern
→ Teil 21: Zweite Lektion und Workshop zum bedingten Rendern
→ Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden
→ Teil 23: Erste Lektion zum Arbeiten mit Formularen
→ Teil 24: Lektion der zweiten Form
→ Teil 25: Workshop zum Arbeiten mit Formularen
→ Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster
→ Teil 27: Kursprojekt

Lektion 9. Übergeordnete und untergeordnete Komponenten

→ Original

Heute werden wir über übergeordnete und untergeordnete Komponenten sprechen. Die Verwendung solcher Konstrukte macht unsere Anwendung viel komplexer als wenn nur eine Komponente im DOM ausgegeben wurde, z. B. MyInfo . Anstelle dieser einfachen Struktur kann die Anwendung eine komplexe Hierarchie von Komponenten aufweisen, die als Ergebnis in JSX-Elemente konvertiert wird.

Beginnen wir mit der Anwendungsvorlage, die Sie bereits kennen. Um sich an das zu erinnern, was Sie index.js , können Sie aus dem Speicher einen Code in die leere Datei index.js schreiben, um die index.js der ersten Ebene mit dem Text Hello World! Werkzeuge reagieren. So könnte der Code aussehen:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <h1>Hello World!</h1>, document.getElementById("root") ) 

Das letzte Mal, als sich die Beschreibung des <h1> -Elements im obigen Code befindet, gab es Code zum Anzeigen der MyInfo Komponente. Jetzt erstellen wir die App Komponente und zeigen sie an. Dazu benötigen wir einen Code der folgenden Form:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <App />, document.getElementById("root") ) 

Die App Komponente ist der Einstiegspunkt in unsere Anwendung. Sie haben wahrscheinlich bereits bemerkt, dass im Code des vorherigen Beispiels etwas fehlte. Dies ist wahr - wir haben die App hier noch nicht importiert. Lass es uns tun:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

Ein solcher Code bleibt jedoch weiterhin funktionsunfähig. Wir benötigen die App Komponentendatei ( App.js ) im selben Ordner wie index.js . Dies ist die Datei, auf die wir in der Importbefehls- import App from "./App" . Denken Sie daran, dass die Namen der React-Komponenten im Kamelstil geschrieben sind und mit einem Großbuchstaben beginnen. Erstellen Sie die benötigte Datei und beschreiben Sie die darin enthaltene App Komponente. Versuche es selbst zu machen. Schreiben Sie nämlich den Code, dank dessen die App Komponente Hello again auf der Seite anzeigt.

So sieht dieser Code aus:

 import React from "react" function App(){ return (   <h1>Hello again</h1> ) } export default App 

Hier gibt die App Funktion ein einzelnes Element zurück, erinnert sich jedoch daran, dass komplexere Strukturen von ähnlichen Funktionen zurückgegeben werden können. Das Wichtigste ist, nicht zu vergessen, dass Sie nur ein Element zurückgeben können. Wenn Sie tatsächlich mehrere Elemente anzeigen müssen, ist dies ein Container, der diese enthält. So würde beispielsweise eine Markup-Rückgabe aussehen, die eine Überschrift und eine Aufzählungsliste der ersten Ebene beschreibt:

 import React from "react" function App(){ return (   <div>     <h1>Hello a third time!</h1>     <ul>       <li>Thing 1</li>       <li>Thing 2</li>       <li>Thing 3</li>     </ul>   </div> ) } export default App 

Vielleicht entscheiden wir jetzt, dass das, was mittels der App Komponente gebildet wird, eine Website sein soll. Es wird einen Navigationsblock ( <nav></nav> ) und einen Hauptinhaltsbereich ( <main></main> ) haben. Diese Lösung führt zur Bildung des folgenden Codes:

 import React from "react" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>   </div> ) } export default App 

So sieht es in einem Browser aus.


Anwendung im Browser

Hier können Sie die Liste immer noch so stilisieren, dass sie eher einer Navigationsleiste ähnelt.

Möglicherweise stellen Sie fest, dass der Komponentencode bereits ziemlich groß geworden ist. Dies widerspricht dem Zweck, für den wir React verwenden. Früher haben wir darüber gesprochen, dass Fragmente von HTML-Code als separate Komponenten dargestellt werden können und in unserer Komponente alles auf einem Haufen gestapelt ist. Daher erstellen wir jetzt Komponenten für jedes unabhängige Fragment des Markups.

Schauen Sie sich dieses Diagramm an, um besser zu verstehen, worum es geht.


Die App-Komponente zeigt die MyInfo-Komponente an, die Ausgabe des <div> -Elements

Hier zeigen wir die App Komponente auf der Seite. In diesem Fall beschließt die App Komponente, eine andere Komponente anzuzeigen - MyInfo . Und die MyInfo Komponente zeigt bereits ein bestimmtes JSX-Element an. Achten Sie auf den Unterschied zwischen den Konzepten „Komponente“ und „Element“. Elemente sind Entitäten, die sich in regulären HTML-Code verwandeln. In dem am unteren Rand des Diagramms dargestellten Element wird ein einfaches <div> -Tag verwendet. Der Name beginnt mit einem kleinen Buchstaben, der besagt, dass dies ein gewöhnliches Element ist und keine der von uns erstellten Komponenten. Andererseits beginnt der Name MyInfo mit einem Großbuchstaben. Dies hilft zu verstehen, dass wir eine Komponente haben.

Möglicherweise haben Sie gehört, dass das DOM (Document Object Model, oft als „Baum“ bezeichnet). Das Stammelement dieses Baums ist das <html> -Element. In unserem Fall ist das Stammelement des im Diagramm dargestellten Baums die App Komponente. Die Funktionen dieser Komponente sind nicht auf die Ausgabe einer anderen Komponente beschränkt, in unserem Fall MyInfo . Es kann beispielsweise eine andere Komponente anzeigen, nämlich eine "Fußzeile" am unteren Rand der Seite. AwesomeFooter , diese Komponente heißt AwesomeFooter .


Die Komponenten-App gibt zwei Komponenten aus

Diese Komponente kann wiederum ein <footer> -Element ausgeben, das den HTML-Code am Ende der Seite enthält.

Wenn wir eine "Fußzeile" einer Seite haben, kann sie auch eine "Kopfzeile" enthalten, die ihren oberen Teil bildet.


Die Komponenten-App gibt drei Komponenten aus

Der obere AwesomeHeader der Seite wird in unserem Diagramm durch die AwesomeHeader Komponente dargestellt. Diese Komponenten werden diesen Komponenten gegeben, um sie nicht mit den Elementen zu verwechseln. Die AwesomeHeader Komponente kann wie die App Komponente nicht nur JSX-Markups, sondern auch andere Komponenten ausgeben. Beispielsweise kann es sich um eine NavBar Komponente handeln, bei der es sich um eine Navigationsleiste handelt, und um eine Logo Komponente, bei der ein Logo angezeigt wird. Und diese Komponenten zeigen bereits gewöhnliche Elemente an - wie <img /> und <nav> .

Wenn Sie dieses Schema überprüfen, werden Sie möglicherweise feststellen, dass eine sich entwickelnde React-Anwendung immer komplexer werden kann. Und was wir hier untersucht haben, ist tatsächlich ein Beispiel für eine extrem einfache Anwendungsstruktur.

Erstellen wir nun eine Komponente in unserer Trainingsanwendung, die eine Fußzeile der Seite darstellt.

Erstellen Sie dazu im selben Ordner wie die Datei index.js eine neue Datei. Footer.js es Footer.js und geben Sie den folgenden Code ein:

 import React from "react" function Footer() {   return (       <footer>           <h3><font color="#3AC1EF">▍This is my footer element</font></h3>       </footer>   ) } export default Footer 

Bitte beachten Sie, dass der Name der Funktionskomponente mit einem Großbuchstaben ( Footer ) und der Name des Elements (<footer> ) mit einem kleinen Buchstaben beginnt. Wie bereits erwähnt, hilft dies, Elemente von Komponenten zu unterscheiden.

Wenn Sie die Seite jetzt aktualisieren, wird das von der Footer generierte Markup nicht im unteren Teil angezeigt. Dies wird vollständig erwartet, da Sie zum Anzeigen die entsprechenden Änderungen am Code der App Komponente vornehmen müssen.

Wir sprechen nämlich von der Tatsache, dass Sie im Code der Datei der App Komponente die Footer Komponente importieren und eine Instanz davon erstellen müssen. Bearbeiten Sie den Code für die Datei App.js :

 import React from "react" import Footer from "./Footer" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>     <Footer />   </div> ) } export default App 

Nun sieht die Seite, auf der sich die Antragsformulare befinden, wie unten gezeigt aus.


Die App-Komponente zeigt das Markup an, das von einer anderen Komponente am unteren Rand der Seite gebildet wird - Fußzeile

Möglicherweise stellen Sie fest, dass jetzt in der von der App Komponente ausgegebenen Code eine seltsame Mischung aus gewöhnlichen JSX-Elementen und Komponenten vorhanden ist. Es wäre viel besser, wenn die App Komponente wie ein Inhaltsverzeichnis in einem Buch angezeigt würde, sodass sie hauptsächlich Komponenten enthält. Der Punkt ist nämlich, dass der Komponentencode ungefähr so ​​aussehen würde:

 import React from "react" import Footer from "./Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

Wenn die Anwendung eine ähnliche Struktur hat (in unserem Fall MainContent der Code nicht, da die MainContent und MainContent Komponentendateien noch nicht erstellt wurden), befindet sich die Beschreibung der Elemente, aus denen die verschiedenen Teile der Seite bestehen, in den Dateien der entsprechenden Komponenten. Gleichzeitig können in die App Komponente importierte Komponenten andere verschachtelte Komponenten enthalten. So können ziemlich umfangreiche Strukturen gebildet werden, deren Abmessungen von den Anforderungen einer bestimmten Anwendung bestimmt werden.

Hier haben wir darüber gesprochen, wie man mit verschachtelten Komponenten arbeitet. Sie können in der Praxis sehr gut versuchen, was Sie gerade gelernt haben, indem Sie das Projekt, dessen App.js Datei wie oben gezeigt aussieht, in einen funktionsfähigen Zustand App.js .

Lektion 10. Workshop. Übergeordnete und untergeordnete Komponenten

→ Original

»Job

Erstellen Sie eine React-Anwendung von Grund auf neu. Zeigen Sie die Stammkomponente der App (in einer separaten Datei definiert) auf der Seite an. Drucken Sie die folgenden Komponenten in dieser Komponente:

1. Navbar
2. MainContent
3. Footer

Die von der App angezeigten Komponenten sollten in separaten Dateien beschrieben werden. Jede dieser Komponenten sollte einige JSX-Elemente ausgeben.

▍Lösung

Als Grundlage für die Lösung dieses Problems wird ein Standardprojekt verwendet, das mit den Tools zum create-react-app (wenn Sie nicht wissen, wie ein solches Projekt erstellt wird, schauen Sie sich dieses Material an). Es wird die Standard- index.html .

Der Code für die Datei index.js :

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

Hier ist der Code für die Datei App.js Bitte beachten Sie, dass wir den components zum Speichern der Komponentendateien verwenden.

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

Der Code für die Datei Header.js :

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

MainContent.js :

 import React from "react" function MainContent() {   return (       <main>This is the main section</main>   ) } export default MainContent 

Code der Datei Footer.js :

 import React from "react" function Footer() {   return (       <footer>This is the footer</footer>   ) } export default Footer 

Sie können die Arbeit mit Komponenten nach Ihren Wünschen organisieren. Das heißt, Sie können beispielsweise zuerst den gesamten erforderlichen Code in die Datei App.js schreiben, die die Komponenten importiert und ihre Instanzen anzeigt, und dann die Komponentendateien erstellen. Sie können das Gegenteil tun: Erstellen Sie zuerst Komponentendateien mit Code und arbeiten Sie dann an der Datei App.js Das Wichtigste ist, dass Sie am Ende eine funktionierende Anwendung haben.

So sieht das Projekt in VSCode aus.


Projekt in VSCode

Und hier ist die Seite, die diese Anwendung gebildet hat.


Anwendungsseite im Browser

Unsere React-Anwendung funktioniert, aber was auf der Seite angezeigt wird, sieht irgendwie völlig uninteressant aus. Sie können dies beheben, indem Sie den Inhalt der Seite gestalten.

Zusammenfassung

Heute haben wir über Eltern- und Kinderkomponenten gesprochen. Das nächste Mal werden wir mit der Arbeit an unserem ersten großen Schulungsprojekt beginnen und über das Styling von Seitenelementen sprechen.

Liebe Leser! Wenn Sie an diesem Kurs teilnehmen, teilen Sie uns bitte mit, wie Sie praktische Übungen durchführen. Nämlich - schreiben Sie den Code, der "vom Kopf" heißt, oder sehen Sie sich den Text der vorherigen Lektion an? Oder versuchen Sie im Internet zu finden, was Sie vergessen haben?