🚹 😙 👰🏿 Tutoriel React, Partie 8: Poursuite des travaux sur une application TODO, présentation des propriétés des composants 🖐🏻 🍻 🏂

Les cours d'aujourd'hui dans le cours de formation React, que nous publions, sont consacrés à continuer à travailler sur l'application TODO et les propriétés des composants.

→ 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 16. Atelier. Application TODO. Étape numéro 2

→ Original

▍Emploi

Suite à l' atelier précédent , vous avez créé une application React, dont le composant App affiche un ensemble de paires d'éléments - drapeaux (éléments <input type="checkbox" /> ) et leurs descriptions (éléments <p> </p> ). Concevez les éléments de cet ensemble en tant que composant distinct - <TodoItem /> et utilisez-le pour créer une liste dans le composant App . Dans le même temps, ne faites pas attention au fait que tous les éléments de cette liste se ressembleront (nous parlerons plus tard de la façon de les remplir avec des données différentes).
Stylisez la page comme vous le souhaitez à l'aide de fichiers CSS, de styles en ligne ou d'une combinaison de ces méthodes de style pour les applications React.

▍Solution

Cela suppose que vous continuez à travailler sur une application basée sur un projet standard créé à l'aide de create-react-app . Voici à quoi ressemblait le code du composant App avant le travail.

 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

Créons, dans le même dossier dans lequel se trouve ce fichier, le fichier TodoItem.js , dans lequel le code du composant TodoItem sera stocké. Maintenant, importez ce fichier dans le fichier App.js commande suivante:

 import TodoItem from "./TodoItem"

Vous pouvez le faire plus tard, quand viendra le temps d'utiliser le TodoItem composant TodoItem (pas encore écrit). Nous allons nous occuper de ce code maintenant. Voici ce que ce sera:

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

Faites attention à deux choses. Tout d'abord, ce composant renvoie deux éléments - ils sont donc enveloppés dans un élément <div> . Deuxièmement, il renvoie une copie de l'une des paires d'éléments de vérification / description du fichier App.js

Maintenant, nous allons à nouveau dans le fichier App.js et, au lieu des paires vérification / description, nous utilisons des instances du composant TodoItem dans le balisage renvoyé par celui-ci:

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

Par conséquent, la page sur laquelle les formulaires de demande ressembleront à celle illustrée ci-dessous.

Apparence de l'application dans le navigateur

En fait, son apparence, par rapport à la version précédente, n'a pas changé, mais le fait qu'un composant soit maintenant utilisé pour former des paires d'éléments nous ouvre de grandes opportunités, que nous utiliserons plus tard.

Nous allons maintenant terminer la deuxième tâche, styliser l'application à l'aide de classes CSS. Pour ce faire, nous apportons le code du composant App au App suivant:

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

Ici, nous avons attribué le nom de classe à l'élément <div> . De même, travaillons avec le TodoItem composant TodoItem :

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

Nous index.css maintenant inclure le fichier CSS index.css qui est déjà dans le projet, car il a été créé à l'aide de create-react-app index.js create-react-app dans le fichier index.js :

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

Ajoutez la description de style suivante à 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; }

Voici à quoi ressemblera la page d'application dans le navigateur.

Apparence de l'application dans le navigateur

Vous pouvez analyser et modifier ces styles vous-même.

Si nous parlons des particularités du code utilisé dans le style, notez que le mot-clé className est utilisé pour affecter des classes aux éléments et que React prend en charge les styles en ligne. Voilà à quoi ressemble le projet de notre application dans VSCode à ce stade.

Projet d'application dans VSCode

Si nous expérimentons maintenant ce que nous avons, il s'avère que les cases à cocher répondent aux interactions des utilisateurs.

Les indicateurs répondent aux interactions des utilisateurs.

Mais en même temps, le code d'application ne sait rien des changements qui se produisent avec ces indicateurs. Si le code est au courant de ce qui se passe dans l'interface de l'application, cela nous permettra d'organiser sa réaction à divers événements. Par exemple, un élément de la liste des tâches, dans lequel une case à cocher est sélectionnée, indiquant que la tâche correspondante est terminée, peut être modifié d'une manière ou d'une autre. Nous expliquerons comment procéder dans la prochaine leçon.

Leçon 17. Propriétés, partie 1. Attributs des éléments HTML

→ Original

Parlons du concept de propriétés dans React. Commençons par un exemple de code HTML pour une page:

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

Comme vous pouvez le voir, il n'y a rien de lié à React. Devant nous se trouve le balisage HTML habituel. Remarquez les trois éléments présents dans le corps de la page décrits par ce balisage: <a> , <input /> et <img /> , et réfléchissez à ce qui ne va pas avec eux.

Le problème ici est que tous ces éléments ne remplissent pas leurs fonctions inhérentes. Le lien décrit par la balise <a> ne mène nulle part. Cette balise doit se voir attribuer un attribut (propriété) href , contenant une certaine adresse vers laquelle vous serez redirigé lorsque vous cliquerez sur le lien. Le même problème est typique de la <img /> de notre exemple. Il n'est pas attribué l'attribut src , qui spécifie l'image, locale ou accessible par l'URL que cet élément affichera. En conséquence, il s'avère que pour garantir le bon fonctionnement des éléments <a> et <img> , il est nécessaire de définir leurs propriétés href et src , respectivement. Si nous parlons de l'élément <input> , alors sans définir ses attributs, il affichera un champ de saisie sur la page, mais sous cette forme, il n'est généralement pas utilisé, définissant ses propriétés placeholder , name , type . La dernière propriété, par exemple, vous permet de changer radicalement l'apparence et le comportement de l'élément <input> , en le transformant d'un champ de saisie de texte en indicateur, en bouton radio ou en bouton pour envoyer un formulaire. Il convient de noter que les termes «attribut» et «propriété» que nous utilisons ici sont interchangeables.

En modifiant le code ci-dessus, nous pouvons l'amener sous la forme suivante:

 <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>

Ce n'est pas encore tout à fait normal sous cette forme, mais ici, au moins, nous définissons des valeurs pour certains attributs d'éléments HTML et des endroits désignés où vous pouvez entrer des valeurs pour d'autres attributs.

En fait, si le concept d'attributs d'éléments HTML décrit ci-dessus est clair pour vous, vous pouvez facilement comprendre le concept de propriétés des composants React. À savoir, nous parlons du fait que, dans les applications React, nous pouvons utiliser des composants de notre propre développement, et pas seulement des balises HTML standard. Lorsque vous travaillez avec des composants, nous pouvons leur attribuer des propriétés qui, une fois traitées dans les composants, peuvent changer leur comportement. Par exemple, ces propriétés vous permettent de personnaliser l'apparence des composants.

Leçon 18. Propriétés, partie 2. Composants réutilisables

→ Original

Avant d'entamer la conversation sur l'utilisation des propriétés dans React, examinons un autre concept conceptuel. Jetez un œil à la page d'accueil YouTube.

Page d'accueil YouTube

Je suis sûr que React n'utilise pas cette page, car Google est engagé dans le développement du framework Angular, mais les principes que nous considérerons dans cet exemple sont universels.

Réfléchissez à la façon dont une telle page pourrait être créée en utilisant les capacités de React. Peut-être que la première chose à laquelle vous faites attention est que cette page peut être divisée en fragments, représentés par des composants indépendants. Par exemple, il est facile de remarquer que les éléments qui affichent des informations sur les clips vidéo mis en évidence dans la figure ci-dessous sont très similaires les uns aux autres.

Page d'accueil YouTube, éléments similaires

Si vous regardez attentivement ces éléments, il s'avère qu'il y a une image en haut de chacun d'eux et que toutes ces images sont de la même taille. Chacun de ces éléments a un en-tête en gras et juste en dessous de l'image. Chaque élément contient des informations sur le nombre de vues de la vidéo correspondante, sur la date de sa publication. Dans le coin inférieur droit de chaque image présente sur l'élément, il y a des informations sur la durée du clip vidéo correspondant.

Il est tout à fait compréhensible que la personne qui a créé cette page n'ait pas fait quelque chose comme copier, coller ou modifier du code pour représenter chacun des éléments qui y sont affichés. Si une telle page était créée à l'aide des outils React, il serait possible d'imaginer que les cartes de clips vidéo sont des instances de certains composants, par exemple, <VideoTile /> . De plus, un tel composant comprend un certain nombre d'autres composants, qui sont une image, un titre, des informations sur la durée du clip et d'autres éléments de la carte de clip vidéo.

Ce qui précède nous amène à l'idée que pour former une telle page, un seul composant a été développé, qui est une carte de clip vidéo. Dans le même temps, de nombreuses instances de ce composant ont été affichées sur la page, chacune affichant des données uniques. Autrement dit, lors du développement d'un tel composant, il est nécessaire de prévoir la possibilité de modifier certaines propriétés, telles que l'URL de l'image, affectant son apparence et son comportement. En fait, c'est à cela que notre prochaine leçon est consacrée. Mais avant d'y arriver, j'aimerais que vous vous familiarisiez avec l'idée d'utiliser des composants dans React.

Pensez à la leçon dans laquelle nous avons discuté des composants parents et enfants, et que les composants peuvent former des structures avec une grande profondeur d'imbrication. Par exemple, dans notre cas, sur la page, vous pouvez sélectionner des groupes horizontaux de cartes de clips vidéo, probablement situés de cette façon à l'aide d'un certain composant de service pour afficher des listes d'éléments. Ces éléments sont des cartes de clip vidéo qui, à leur tour, produisent un certain nombre d'autres éléments représentant des informations sur un clip particulier.

Page d'accueil YouTube, composants parents et enfants

De plus, sur le côté gauche de la page, vous pouvez voir un groupe vertical d'éléments similaires les uns aux autres. Il s'agit très probablement d'instances du même composant. De plus, chacun d'eux a sa propre image et son propre texte.

Le fait que les frameworks modernes pour développer des interfaces web, tels que React, Angular ou Vue, vous permettent de créer un composant une fois et de le réutiliser en définissant ses propriétés, est l'une des raisons de la popularité de ces frameworks. Cela facilite et accélère considérablement le développement.

Résumé

Dans cette leçon, nous avons continué à travailler sur une application TODO et discuté de sujets liés aux attributs des éléments HTML et à l'idée de réutiliser les composants, nous amenant à travailler avec les propriétés des composants React. C'est ce que nous ferons la prochaine fois.

Chers lecteurs! Comprenez-vous le concept des propriétés des composants?