React Tutorial, Teil 8: Fortsetzung der Arbeit an einer TODO-Anwendung, Einführung in die Komponenteneigenschaften

Die heutigen Kurse im React-Schulungskurs, den wir veröffentlichen, widmen sich der weiteren Arbeit an den TODO-Anwendungs- und Komponenteneigenschaften.



→ 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 16. Workshop. TODO-Anwendung. Etappe Nummer 2

→ Original

»Job

1. Nach dem vorherigen Workshop haben Sie eine React-Anwendung erstellt, deren App Komponente eine Reihe von Elementpaaren anzeigt - Flags (Elemente <input type="checkbox" /> ) und deren Beschreibungen (Elemente <p> </p> ). Entwerfen Sie die Elemente dieses Satzes als separate Komponente - <TodoItem /> und erstellen Sie damit eine Liste in der App Komponente. Achten Sie gleichzeitig nicht darauf, dass alle Elemente dieser Liste gleich aussehen (später werden wir darüber sprechen, wie Sie sie mit unterschiedlichen Daten füllen können).
2. Stilisieren Sie die Seite nach Ihren Wünschen mithilfe von CSS-Dateien, Inline-Stilen oder einer Kombination dieser Stilmethoden für React-Anwendungen.

▍Lösung

Dies setzt voraus, dass Sie weiterhin an einer Anwendung arbeiten, die auf einem Standardprojekt basiert, das mit create-react-app . So war der App Komponentencode vor dem Job.

 import React from "react" function App() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default App 

Erstellen wir in demselben Ordner, in dem sich diese Datei befindet, die Datei TodoItem.js , in der der Code der TodoItem Komponente gespeichert wird. Importieren Sie diese Datei App.js folgenden Befehl in die Datei App.js :

 import TodoItem from "./TodoItem" 

Sie können dies später tun, wenn es Zeit ist, den TodoItem Komponentencode zu TodoItem (noch nicht geschrieben). Wir kümmern uns jetzt um diesen Code. Folgendes wird es sein:

 import React from "react" function TodoItem() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default TodoItem 

Achten Sie auf zwei Dinge. Erstens gibt diese Komponente zwei Elemente zurück - daher werden sie in ein <div> -Element eingeschlossen. Zweitens wird eine Kopie eines der Paare von Prüf- / Beschreibungselementen aus der Datei App.js .

Jetzt gehen wir wieder zur Datei App.js und verwenden anstelle der Check / Description-Paare Instanzen der TodoItem Komponente in dem von ihr zurückgegebenen Markup:

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

Infolgedessen sieht die Seite, auf der sich die Antragsformulare befinden, wie die unten gezeigte aus.


App-Darstellung im Browser

Tatsächlich hat sich sein Erscheinungsbild im Vergleich zur Vorgängerversion nicht geändert, aber die Tatsache, dass eine Komponente jetzt zur Bildung von Elementpaaren verwendet wird, eröffnet uns große Möglichkeiten, die wir später nutzen werden.

Jetzt erledigen wir die zweite Aufgabe und gestalten die Anwendung mithilfe von CSS-Klassen. Dazu bringen wir den Code der App Komponente in das folgende Formular:

 import React from "react" import TodoItem from "./TodoItem" function App() {   return (       <div className="todo-list">           <TodoItem />           <TodoItem />           <TodoItem />           <TodoItem />       </div>   ) } export default App 

Hier haben wir dem <div> -Element den Klassennamen zugewiesen. In ähnlicher Weise arbeiten TodoItem mit dem TodoItem Komponentencode:

 import React from "react" function TodoItem(){     return (       <div className="todo-item">           <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default TodoItem 

Jetzt index.css wir die CSS-Datei index.css , die sich bereits im Projekt befindet, da sie mit create-react-app in der Datei index.js erstellt wurde:

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

Fügen Sie index.css die folgende Stilbeschreibung index.css :

 body {   background-color: whitesmoke; } .todo-list {   background-color: white;   margin: auto;   width: 50%;   display: flex;   flex-direction: column;   align-items: center;   border: 1px solid #efefef;   box-shadow:   /* The top layer shadow */       0 1px 1px rgba(0,0,0,0.15),           /* The second layer */       0 10px 0 -5px #eee,           /* The second layer shadow */       0 10px 1px -4px rgba(0,0,0,0.15),           /* The third layer */       0 20px 0 -10px #eee,           /* The third layer shadow */       0 20px 1px -9px rgba(0,0,0,0.15);   padding: 30px; } .todo-item {   display: flex;   justify-content: flex-start;   align-items: center;   padding: 30px 20px 0;   width: 70%;   border-bottom: 1px solid #cecece;   font-family: Roboto, sans-serif;   font-weight: 100;   font-size: 15px;   color: #333333; } input[type=checkbox] {   margin-right: 10px;   font-size: 30px; } input[type=checkbox]:focus {   outline: 0; } 

So sieht die Anwendungsseite nun im Browser aus.


App-Darstellung im Browser

Sie können diese Stile selbst analysieren und bearbeiten.

Wenn wir über die Besonderheiten des beim Stylen verwendeten Codes sprechen, beachten Sie, dass das Schlüsselwort className verwendet wird, um Elementen Klassen zuzuweisen, und dass React Inline-Stile unterstützt. So sieht das Projekt unserer Anwendung in VSCode in dieser Phase aus.


Anwendungsprojekt in VSCode

Wenn wir jetzt mit dem experimentieren, was wir haben, stellt sich heraus, dass die Kontrollkästchen auf Benutzerinteraktionen reagieren.


Flags reagieren auf Benutzerinteraktionen.

Gleichzeitig weiß der Anwendungscode nichts über die Änderungen, die bei diesen Flags auftreten. Wenn der Code weiß, was in der Anwendungsoberfläche passiert, können wir seine Reaktion auf verschiedene Ereignisse organisieren. Beispielsweise kann ein Element in der Aufgabenliste, in dem ein Kontrollkästchen aktiviert ist, das angibt, dass die entsprechende Aufgabe abgeschlossen wurde, irgendwie geändert werden. Wir werden in der nächsten Lektion darüber sprechen, wie das geht.

Lektion 17. Eigenschaften, Teil 1. Attribute von HTML-Elementen

→ Original

Lassen Sie uns über das Konzept der Eigenschaften in React sprechen. Beginnen wir mit einem Beispiel-HTML-Code für eine Seite:

 <html>   <head></head>   <body>       <a>This is a link</a>       <input />       <img />   </body> </html> 

Wie Sie sehen können, hat nichts mit Reagieren zu tun. Vor uns liegt das übliche HTML-Markup. Beachten Sie die drei Elemente im Hauptteil der Seite, die durch dieses Markup beschrieben werden: <a> , <input /> und <img /> , und überlegen Sie, was mit ihnen nicht stimmt.

Das Problem hierbei ist, dass alle diese Elemente ihre inhärenten Funktionen nicht erfüllen. Der durch das <a> -Tag beschriebene Link führt nirgendwo hin. Diesem Tag muss ein Attribut (eine Eigenschaft) href zugewiesen werden, das eine bestimmte Adresse enthält, an die Sie weitergeleitet werden, wenn Sie auf den Link klicken. Das gleiche Problem ist typisch für das <img /> aus unserem Beispiel. Es wird nicht das src Attribut zugewiesen, das das Bild angibt, lokal oder über die URL zugänglich ist, die dieses Element anzeigt. Infolgedessen stellt sich heraus, dass zur Sicherstellung des korrekten Betriebs der Elemente <a> und <img> deren Eigenschaften href und src werden müssen. Wenn wir über das <input> -Element sprechen, wird ohne <input> seiner Attribute ein Eingabefeld auf der Seite angezeigt, aber in dieser Form wird es normalerweise nicht verwendet, wobei die Eigenschaften placeholder , name und type . Mit der letzten Eigenschaft können Sie beispielsweise das Erscheinungsbild und Verhalten des <input> -Elements radikal ändern und es von einem Texteingabefeld in ein Flag, ein Optionsfeld oder eine Schaltfläche zum Senden eines Formulars verwandeln. Es ist zu beachten, dass die Begriffe "Attribut" und "Eigenschaft" hier austauschbar sind.

Durch Bearbeiten des obigen Codes können wir ihn in die folgende Form bringen:

 <html>   <head></head>   <body>       <a href="https://google.com">This is a link</a>       <input placeholder="First Name" name="" type=""/>       <img align="center" src=""/>   </body> </html> 

In dieser Form ist dies noch nicht ganz normal, aber hier legen wir zumindest Werte für einige Attribute von HTML-Elementen und bestimmte Stellen fest, an denen Sie Werte für einige weitere Attribute eingeben können.

Wenn Ihnen das oben beschriebene Konzept der Attribute von HTML-Elementen klar ist, können Sie das Konzept der Eigenschaften von React-Komponenten leicht herausfinden. Wir sprechen nämlich von der Tatsache, dass wir in React-Anwendungen Komponenten unserer eigenen Entwicklung verwenden können und nicht nur Standard-HTML-Tags. Bei der Arbeit mit Komponenten können wir ihnen Eigenschaften zuweisen, die bei der Verarbeitung in Komponenten ihr Verhalten ändern können. Mit solchen Eigenschaften können Sie beispielsweise das Erscheinungsbild von Komponenten anpassen.

Lektion 18. Eigenschaften, Teil 2. Wiederverwendbare Komponenten

→ Original

Bevor wir uns mit der Verwendung von Eigenschaften in React befassen, schauen wir uns ein anderes konzeptionelles Konzept an. Schauen Sie sich die YouTube-Homepage an.


YouTube-Homepage

Ich bin sicher, dass React diese Seite nicht verwendet, da Google an der Entwicklung des Angular-Frameworks beteiligt ist, aber die Prinzipien, die wir in diesem Beispiel berücksichtigen werden, sind universell.

Überlegen Sie, wie eine solche Seite mit den Funktionen von React erstellt werden könnte. Vielleicht ist das erste, worauf Sie achten, dass diese Seite in Fragmente unterteilt werden kann, die durch unabhängige Komponenten dargestellt werden. Beispielsweise ist leicht zu erkennen, dass die Elemente, die Informationen zu den in der folgenden Abbildung hervorgehobenen Videoclips anzeigen, einander sehr ähnlich sind.


YouTube-Homepage, Elemente ähnlich

Wenn Sie sich diese Elemente genau ansehen, stellt sich heraus, dass sich oben jeweils ein Bild befindet und dass alle diese Bilder dieselbe Größe haben. Jedes dieser Elemente hat eine fett gedruckte Überschrift direkt unter dem Bild. Jedes Element enthält Informationen über die Anzahl der Aufrufe des entsprechenden Videos sowie über das Datum seiner Veröffentlichung. In der unteren rechten Ecke jedes auf dem Element vorhandenen Bildes finden Sie Informationen zur Dauer des entsprechenden Videoclips.

Es ist durchaus verständlich, dass die Person, die diese Seite erstellt hat, nicht so etwas wie Code kopiert, eingefügt oder geändert hat, um jedes der darauf angezeigten Elemente darzustellen. Wenn eine solche Seite mit den React-Tools erstellt würde, könnte man sich vorstellen, dass Videoclipkarten Instanzen einer Komponente sind, z. B. <VideoTile /> . Darüber hinaus enthält eine solche Komponente eine Anzahl anderer Komponenten, die ein Bild, einen Titel, Informationen über die Dauer des Clips und andere Elemente der Videoclipkarte sind.

Das Vorstehende führt uns zu der Idee, dass zur Bildung einer solchen Seite eine einzelne Komponente entwickelt wurde, nämlich eine Videoclipkarte. Gleichzeitig wurden viele Instanzen dieser Komponente auf der Seite angezeigt, von denen jede eindeutige Daten anzeigt. Das heißt, bei der Entwicklung einer solchen Komponente muss die Möglichkeit vorgesehen werden, bestimmte Eigenschaften, wie z. B. die URL des Bildes, zu ändern, die sich auf dessen Erscheinungsbild und Verhalten auswirken. Tatsächlich ist dies unsere nächste Lektion. Bevor wir jedoch dazu kommen, möchte ich, dass Sie sich mit der Idee vertraut machen, Komponenten in React zu verwenden.

Denken Sie an die Lektion, in der wir übergeordnete und untergeordnete Komponenten besprochen haben und dass Komponenten Strukturen mit großer Verschachtelungstiefe bilden können. In unserem Fall können Sie beispielsweise auf der Seite horizontale Gruppen von Videoclipkarten auswählen, die sich wahrscheinlich auf diese Weise befinden, indem Sie eine Dienstkomponente zum Anzeigen von Elementlisten verwenden. Diese Elemente sind Videoclipkarten, die wiederum eine bestimmte Anzahl anderer Elemente ausgeben, die Informationen zu einem bestimmten Clip darstellen.


YouTube-Homepage, übergeordnete und untergeordnete Komponenten

Außerdem sehen Sie auf der linken Seite eine vertikale Gruppe von Elementen, die einander ähnlich sind. Höchstwahrscheinlich handelt es sich um Instanzen derselben Komponente. Darüber hinaus hat jeder von ihnen ein eigenes Bild und einen eigenen Text.

Die Tatsache, dass moderne Frameworks für die Entwicklung von Webschnittstellen wie React, Angular oder Vue es Ihnen ermöglichen, eine Komponente einmal zu erstellen und durch Festlegen ihrer Eigenschaften wiederzuverwenden, ist einer der Gründe für die Beliebtheit dieser Frameworks. Dies erleichtert und beschleunigt die Entwicklung erheblich.

Zusammenfassung

In dieser Lektion haben wir weiter an einer TODO-Anwendung gearbeitet und Themen zu den Attributen von HTML-Elementen und der Idee der Wiederverwendung von Komponenten behandelt, wodurch wir mit den Eigenschaften von React-Komponenten arbeiten können. Das werden wir beim nächsten Mal tun.

Liebe Leser! Verstehen Sie das Konzept der Komponenteneigenschaften?