Tutoriel React, Partie 12: Atelier, Application TODO Phase 3

Dans la partie d'aujourd'hui de la traduction du cours React, nous vous suggérons de terminer la tâche pratique de création d'ensembles de composants à l'aide de JavaScript et de continuer à travailler sur l'application TODO.



→ Partie 1: aperçu du cours, raisons de la popularité de React, ReactDOM et JSX
→ Partie 2: composants fonctionnels
→ Partie 3: fichiers composants, structure du projet
→ Partie 4: composants parent et enfant
→ Partie 5: début des travaux sur une application TODO, les bases du style
→ Partie 6: sur certaines fonctionnalités du cours, JSX et JavaScript
→ Partie 7: styles en ligne
→ Partie 8: poursuite des travaux sur l'application TODO, familiarité avec les propriétés des composants
→ Partie 9: propriétés des composants
→ Partie 10: Atelier sur l'utilisation des propriétés et du style des composants
→ Partie 11: génération de balisage dynamique et méthode des tableaux de cartes
→ Partie 12: atelier, troisième étape de travail sur une application TODO
→ Partie 13: composants basés sur les classes
→ Partie 14: atelier sur les composants basés sur les classes, état des composants
→ Partie 15: ateliers santé composante
→ Partie 16: quatrième étape de travail sur une application TODO, gestion d'événements
→ Partie 17: cinquième étape de travail sur une application TODO, modifiant l'état des composants
→ Partie 18: la sixième étape de travail sur une application TODO
→ Partie 19: méthodes du cycle de vie des composants
Partie 20: la première leçon de rendu conditionnel
→ Partie 21: deuxième leçon et atelier sur le rendu conditionnel
→ Partie 22: la septième étape des travaux sur une application TODO, téléchargement de données depuis des sources externes
→ Partie 23: première leçon sur l'utilisation des formulaires
→ Partie 24: Deuxième leçon sur les formulaires
→ Partie 25: Atelier sur l'utilisation des formulaires
→ Partie 26: architecture d'application, modèle de conteneur / composant
→ Partie 27: projet de cours

Leçon 22. Atelier. Formation dynamique d'ensembles de composants

→ Original

▍Emploi

Sur la base du projet d'application React standard généré par create-react-app et en utilisant le code du fichier de données vschoolProducts.js - vschoolProducts.js , créez une application qui affiche une liste des composants du Product sur la page, formée à l'aide de la méthode de tableau standard .map() sur Basé sur les données de vschoolProducts.js .

N'oubliez pas de créer des instances du composant et de leur transmettre l'attribut key avec un identifiant unique, sinon le système émettra un avertissement.

Dans le processus de résolution du problème, vous pouvez utiliser la préparation suivante du fichier App.js :

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

Voici le vschoolProducts.js fichier 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 

▍Solution

Voici le code du fichier 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 

Veuillez noter que la propriété id des objets du fichier de données est facultative. Cette propriété nous a été utile pour définir l'attribut key créé au moyen de la méthode .map() des instances du composant Product .

Voici le code du fichier 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 

Ici, lors de la dérivation d'une propriété contenant le prix du produit, qui est visible dans le composant en tant que props.product.price , nous utilisons la méthode toLocaleString() , par laquelle nous mettons en forme la quantité du produit.

Voici à quoi ressemble le projet d'application dans VSCode.


Application dans VSCode

Et voici la page d'application dans le navigateur.


Page d'application dans le navigateur

Faites attention à la forme sous laquelle la valeur des marchandises est présentée.

Leçon 23. Atelier. Application TODO. Étape numéro 3

→ Original

Ici, nous continuons à travailler sur l'application TODO, qui a été traitée ici et ici . En particulier, ici, il vous sera demandé d'appliquer des connaissances sur la formation dynamique de listes de composants pour créer une liste de tâches affichée par l'application.

▍Emploi

À l'aide du todosData.js cas todosData.js , dont le contenu est indiqué ci-dessous, créez une liste de composants TodoItem et affichez cette liste dans le composant App . Veuillez noter que vous devrez modifier le code du composant TodoItem afin qu'il puisse afficher les propriétés qui lui sont transmises.

Voici le contenu du fichier 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 

▍Solution

Voici le code du fichier 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 

Voici le code du fichier 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 

Voici le projet d'application dans VSCode.


Application dans VSCode

Il est à noter qu'après l'achèvement des travaux prévus par cette leçon pratique, nous, malgré le fait que nous doterons l'application de nouvelles fonctionnalités, perturbons sa fonctionnalité. En particulier, nous parlons de l'état des drapeaux. Les indicateurs pour lesquels la propriété props.item.completed définie sur true été utilisée pour définir l'état seront vérifiés, les indicateurs pour lesquels la même propriété définie sur false été utilisée seront décochés. Mais si vous cliquez sur le drapeau sur la page d'application, rien ne se passera, car nous avons mal configuré l'élément HTML correspondant. Vous pouvez voir un avertissement à ce sujet dans la console.


Page d'application dans le navigateur et avertissement dans la console

Plus tard, nous parlerons des formulaires et corrigerons notre application de formation tout en continuant à travailler dessus.

Résumé

Dans cette leçon, vous avez eu l'occasion de vous entraîner à créer des fichiers de composants, à travailler avec des propriétés transmises aux instances de composants lors de leur création et à utiliser la méthode de tableau JavaScript .map() standard. De plus, ici, nous avons continué à travailler sur une application de formation. La prochaine fois, nous parlerons des composants basés sur les classes.

Chers lecteurs! Avez-vous maîtrisé la technique d'utilisation de la méthode de tableau JavaScript .map() pour créer des ensembles de composants?