React Tutorial, Teil 12: Workshop, Phase 3 TODO-Anwendung

Im heutigen Teil der Übersetzung des React-Kurses empfehlen wir Ihnen, die praktische Aufgabe des Erstellens von Komponentensätzen mit JavaScript abzuschließen und weiter an der TODO-Anwendung zu arbeiten.



→ 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 22. Workshop. Dynamische Bildung von Komponentensätzen

→ Original

»Job

create-react-app basierend auf dem von create-react-app generierten Standard-React-Anwendungsprojekt und unter Verwendung des Codes der folgenden vschoolProducts.js eine Anwendung, die auf der Seite eine Liste der Product anzeigt, die mit der Standard-Array-Methode .map() generiert wurden Basierend auf Daten von vschoolProducts.js .

Denken Sie daran, Instanzen der Komponente zu erstellen und ihnen das key mit einer eindeutigen Kennung zu übergeben. Andernfalls gibt das System eine Warnung aus.

Bei der Lösung des Problems können Sie die folgende Vorbereitung der Datei App.js verwenden:

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

Hier ist der vschoolProducts.js :

 const products = [   {       id: "1",       name: "Pencil",       price: 1,       description: "Perfect for those who can't remember things! 5/5 Highly recommend."   },   {       id: "2",       name: "Housing",       price: 0,       description: "Housing provided for out-of-state students or those who can't commute"   },   {       id: "3",       name: "Computer Rental",       price: 300,       description: "Don't have a computer? No problem!"   },   {       id: "4",       name: "Coffee",       price: 2,       description: "Wake up!"   },   {       id: "5",       name: "Snacks",       price: 0,       description: "Free snacks!"   },   {       id: "6",       name: "Rubber Duckies",       price: 3.50,       description: "To help you solve your hardest coding problems."   },   {       id: "7",       name: "Fidget Spinner",       price: 21.99,       description: "Because we like to pretend we're in high school."   },   {       id: "8",       name: "Sticker Set",       price: 14.99,       description: "To prove to other devs you know a lot."   } ] export default products 

▍Lösung

Hier ist der Code für die Datei App.js :

 import React from "react" import Product from "./Product" import productsData from "./vschoolProducts" function App() {   const productComponents = productsData.map(item => <Product key={item.id} product={item}/>)     return (       <div>           {productComponents}       </div>   ) } export default App 

Bitte beachten Sie, dass die id Eigenschaft von Objekten aus der Datendatei optional ist. Diese Eigenschaft war für uns nützlich, um das key .map() , das mithilfe der .map() -Methode für Instanzen der Product Komponente erstellt wurde.

Hier ist der Code für die Datei Product.js :

 import React from "react" function Product(props) {   return (       <div>           <h2><font color="#3AC1EF">{props.product.name}</font></h2>           <p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}</p>       </div>   ) } export default Product 

props.product.price wir hier eine Eigenschaft ableiten, die den Preis des Produkts enthält, der in der Komponente als props.product.price , verwenden wir die Methode toLocaleString() , mit der wir die Menge des Produkts formatieren.

So sieht das Anwendungsprojekt in VSCode aus.


Anwendung in VSCode

Und hier ist die Anwendungsseite im Browser.


Anwendungsseite im Browser

Achten Sie auf die Form, in der der Wert der Ware dargestellt wird.

Lektion 23. Workshop. TODO-Anwendung. Etappe Nummer 3

→ Original

Hier arbeiten wir weiter an der TODO-Anwendung, die hier und hier behandelt wurde . Insbesondere werden Sie hier gebeten, Kenntnisse über die dynamische Bildung von Komponentenlisten anzuwenden, um eine von der Anwendung angezeigte Aufgabenliste zu erstellen.

»Job

todosData.js mithilfe der todosData.js , deren Inhalt unten angegeben ist, eine Liste der TodoItem Komponenten und zeigen Sie diese Liste in der App Komponente an. Beachten Sie, dass Sie den Code der TodoItem Komponente ändern müssen, damit die an sie übergebenen Eigenschaften angezeigt werden können.

Hier ist der Inhalt der Datei todosData.js :

 const todosData = [   {       id: 1,       text: "Take out the trash",       completed: true   },   {       id: 2,       text: "Grocery shopping",       completed: false   },   {       id: 3,       text: "Clean gecko tank",       completed: false   },   {       id: 4,       text: "Mow lawn",       completed: true   },   {       id: 5,       text: "Catch up on Arrested Development",       completed: false   } ] export default todosData 

▍Lösung

Hier ist der Code für die Datei App.js :

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() {   const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)     return (       <div className="todo-list">           {todoItems}       </div>   ) } export default App 

Hier ist der Code für die Datei TodoItem.js :

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

Hier ist das Anwendungsprojekt in VSCode.


Anwendung in VSCode

Es ist zu beachten, dass wir nach Abschluss der in dieser praktischen Lektion vorgesehenen Arbeiten trotz der Tatsache, dass wir die Anwendung mit neuen Funktionen ausstatten, ihre Funktionalität stören. Insbesondere sprechen wir über den Zustand der Flaggen. Die Flags, für die die auf props.item.completed gesetzte Eigenschaft props.item.completed zum props.item.completed des props.item.completed verwendet wurde, werden überprüft. Die Flags, für die dieselbe auf false gesetzte Eigenschaft verwendet wurde, werden deaktiviert. Wenn Sie jedoch auf der Anwendungsseite auf das Flag klicken, geschieht nichts, da wir das entsprechende HTML-Element falsch konfiguriert haben. Sie können eine Warnung dazu in der Konsole sehen.


Anwendungsseite im Browser und Warnung in der Konsole

Später werden wir über Formulare sprechen und unsere Schulungsanwendung korrigieren, während wir weiter daran arbeiten.

Zusammenfassung

In dieser Lektion hatten Sie die Möglichkeit, das Erstellen von Komponentendateien, das Arbeiten mit Eigenschaften, die beim Erstellen an Komponenteninstanzen übergeben werden, und die Verwendung der Standard-JavaScript-Array-Methode .map() . Außerdem haben wir hier weiter an einer Trainingsanwendung gearbeitet. Das nächste Mal werden wir über klassenbasierte Komponenten sprechen.

Liebe Leser! Haben Sie die Technik der Verwendung der JavaScript-Array-Methode .map() zum Erstellen von Komponentensätzen beherrscht?