Tutoriel React, Partie 22: Septième étape de travail sur une application TODO, Téléchargement de données à partir de sources externes

Dans la partie d'aujourd'hui de la traduction du didacticiel React, nous terminerons le travail sur l'application Todo et parlerons de la façon d'utiliser les données des composants internes et des capacités JavaScript standard pour charger des données à partir de sources externes.



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

→ Original

▍Emploi

Maintenant, l'application Todo ressemble à la figure suivante.


Page d'application dans le navigateur

Le TodoItem composant TodoItem ressemble à ceci:

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

Votre tâche consiste à styliser les éléments de la liste en fonction de leur état. L'apparence des dossiers terminés doit être différente de celle incomplète. Lors de la mise en forme d'éléments de liste représentant des tâches terminées, leur texte peut être grisé, il peut être barré, mis en italique ou d'autres modifications peuvent être apportées.

▍Solution

Le problème présenté ici peut être résolu de différentes manières. Nous utiliserons le style intégré, que nous décrirons comme la constante completedStyle dans le code du composant fonctionnel TodoItem . Ici, nous configurons les propriétés de texte fontStyle , color et textDecoration . Après cela, en utilisant la technique de rendu conditionnel, nous attribuerons ce style à l'élément <p> dans le cas où l'entreprise déduite par lui est marquée comme terminée. Nous le déterminerons en fonction de la propriété transmise à l'instance de composant, qui y est disponible en tant que props.item.completed .

Le code du composant converti ressemblera à ceci:

 import React from "react" function TodoItem(props) {   const completedStyle = {       fontStyle: "italic",       color: "#cdcdcd",       textDecoration: "line-through"   }     return (       <div className="todo-item">           <input               type="checkbox"               checked={props.item.completed}               onChange={() => props.handleChange(props.item.id)}           />           <p style={props.item.completed ? completedStyle: null}>{props.item.text}</p>       </div>   ) } export default TodoItem 

Voici comment l'apparence de la page d'application change.


Page d'application modifiée dans le navigateur

Dans le même temps, des styles sont appliqués lors de la définition et de la désactivation des indicateurs indiquant l'état des éléments dans la liste des tâches.

Ceci conclut le travail sur l'application Todo.

Leçon 40. Téléchargement de données à partir de sources externes

→ Original

Dans une leçon sur les méthodes de cycle de vie des composants, nous avons parlé de la méthode componentDidMount() . Essayez de vous rappeler comment cela fonctionne. Cette méthode vous permet d'interférer avec le fonctionnement du composant en exécutant du code immédiatement après l'ajout du composant à l'arborescence DOM. Lorsque nous avons parlé des méthodes de cycle de vie des composants, j'ai mentionné que la méthode componentDidMount() est le plus souvent utilisée pour charger des données à partir de certaines sources externes. Ces données sont utilisées par le composant pour réaliser son objectif.

Commençons nos expériences d'aujourd'hui avec un nouveau projet créé à l'aide des App.js -app App.js dont le fichier App.js contient le code suivant:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }         render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Dans le code du composant App basé App composant, nous décrivons la méthode componentDidMount() et vérifions l'opérabilité de la construction résultante en sortant quelque chose vers la console à partir de cette méthode.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     componentDidMount() {       console.log("Hi!")   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Sortie sur la chaîne de console Hi! prouve la fonctionnalité du code, afin que nous puissions continuer à travailler. Comme déjà mentionné, cette méthode charge généralement les données nécessaires au fonctionnement du composant.

Dans cette leçon, nous utiliserons plusieurs outils auxiliaires qui nous seront utiles lors du chargement de données dans le composant.

Le premier est la fonction JavaScript intégrée. Nous parlons de l' API Fetch , qui est une interface pratique pour obtenir des ressources, basée sur des promesses , qui vous permet d'effectuer des requêtes HTTP, à travers lesquelles les données sont chargées.

Le deuxième outil que nous utiliserons est l' API Star Wars . Ce projet est bon car il peut être utilisé dans des applications frontales sans aucune difficulté particulière (en particulier, nous parlons des fonctionnalités de configuration CORS).

Dans la méthode componentDidMount() , nous allons utiliser la fonction fetch() , en lui passant l'adresse de chargement des données, en convertissant ces données au type dont nous avons besoin et, afin de vérifier le bon fonctionnement du système, en sortie ces données vers la console. Nous transformons le code de la méthode sous la forme suivante:

 componentDidMount() {   fetch("https://swapi.co/api/people/1")       .then(response => response.json())       .then(data => console.log(data)) } 

Ici, nous téléchargeons des données sur un certain héros du film, en référence à l'API, après quoi nous convertissons ce qui provenait du serveur au format JSON, puis imprimons ces données sur la console. Ce qui est entré dans la console est illustré dans la figure suivante.


Les données téléchargées à partir de l'API Star Wars sont sorties sur la console

Comme vous pouvez le voir, un objet contenant des données sur Luke Skywalker est entré dans la console. Maintenant, une fois que nous avons les données, nous devons réfléchir à la façon de les afficher sur la page de l'application. Afin de résoudre ce problème, vous devez d'abord tenir compte du fait que les données téléchargées de l'extérieur, si elles ne sont enregistrées nulle part, ne pourront pas être affichées sur la page de l'application dans un navigateur. L'endroit qui sert à stocker ces données est l'état du composant. Ajoutez une nouvelle propriété, un character , représenté par un objet vide à l'état du composant:

 this.state = {   character: {} } 

Nous allons stocker dans cette propriété un objet avec une description du personnage, dont les données sont téléchargées depuis une source externe. Ils existent en tant qu'objet, donc lorsque nous initialisons les états, nous faisons de la propriété de character un objet vide.

Après cela, à cet endroit du code de la méthode componentDidMount() , où nous obtenons les données, nous les écrirons à l'état en utilisant la méthode setState() . De plus, dans ce cas, ce qui était stocké dans l'état avant cela ne nous intéresse pas, on peut donc simplement passer à cette méthode un objet contenant une nouvelle représentation de l'état. En conséquence, nous arrivons à ce code de méthode componentDidMount() :

 componentDidMount() {   fetch("https://swapi.co/api/people/1")       .then(response => response.json())       .then(data => {           this.setState({               character: data           })       }) } 

Afin de vérifier le bon fonctionnement des mécanismes qui existent maintenant dans le code, nous afficherons dans la méthode render() quelque chose qui doit être présent dans l'état après que les données chargées y soient écrites. Maintenant, le code du fichier App.js ressemblera à ceci:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           character: {}       }   }     componentDidMount() {       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   character: data               })           })   }     render() {       return (           <div>               {this.state.character.name}           </div>       )   } } export default App 

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


Page d'application dans le navigateur

L'affichage du texte de Luke Skywalker sur une page montre le fonctionnement des mécanismes de chargement des données.

Notre application utilise une simple demande, en réponse à laquelle l'application reçoit une petite quantité de données qui sont rapidement traitées et affichées sur la page. Il faut très peu de temps pour terminer toutes ces actions. Par conséquent, les données sont affichées à l'écran si rapidement que nous avons l'impression que le composant, immédiatement après leur affichage à l'écran, les contient déjà. Mais si la source de données distante était accessible via une ligne de communication très lente, ou que l'API à partir de laquelle les données sont chargées répondait lentement aux demandes, cela pourrait prendre beaucoup de temps avant que l'application puisse afficher ces données à l'écran. . Pendant tout ce temps, l'écran resterait vide. Si cela se produit dans des applications du monde réel, cela déroute leurs utilisateurs, qui peuvent décider que ces applications ne fonctionnent pas correctement. Afin d'anticiper une situation similaire, il est nécessaire, lors du chargement et du traitement des données, d'afficher à l'utilisateur un message correspondant. Cela ne s'applique pas à notre sujet d'aujourd'hui, mais c'est ici qu'il conviendra d'en discuter.

Dans les applications réelles, pour avertir l'utilisateur qu'il doit attendre une certaine action, comme le téléchargement de données, il utilise quelque chose comme un indicateur de chargement. Dans notre cas, jusqu'à ce que les données soient téléchargées et prêtes à être affichées sur la page, nous afficherons simplement le loading... du texte loading... Ce faisant, nous serons en mesure d'évaluer les possibilités que le stockage de données dans l'état de l'application nous offre.

Ajoutez une nouvelle propriété à l'état, indiquant si les données sont chargées à un moment donné. Appelez-le loading et initialisez-le à false . Après cela, juste avant de charger les données à l'aide de fetch() , nous écrivons true sur cette propriété.

Ensuite, dans la méthode render() , basée sur la propriété state de loading , nous allons configurer le texte affiché sur la page. Voici à quoi App.js code App.js après ces conversions.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           loading: false,           character: {}       }   }     componentDidMount() {       this.setState({loading: true})       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   character: data               })           })   }     render() {       const text = this.state.loading ? "loading..." : this.state.character.name       return (           <div>               <p>{text}</p>           </div>       )   } } export default App 

Ce code, cependant, ne fonctionne pas correctement. À savoir, voici à quoi ressemble la page d'application.


Page d'application dans le navigateur

On suppose que l'inscription en cours de loading... ne doit y être affichée que lors du téléchargement de données à partir d'une source externe, mais il semble qu'elle soit désormais affichée en permanence sur la page. Avant de poursuivre la lecture, essayez de trouver et de corriger les erreurs dans le code.

En fait, le problème ici est qu'avant de commencer le chargement des données, nous avons défini le loading sur true et une fois le téléchargement terminé, nous n'avons pas loading false sur le loading . Par conséquent, le loading... du texte loading... est toujours affiché sur la page. Il n'est pas difficile de corriger cette erreur. Assez, au même endroit où nous écrivons les données chargées à l'état, définissez le loading sur false . Par conséquent, le code App.js prendra la forme suivante:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           loading: false,           character: {}       }   }     componentDidMount() {       this.setState({loading: true})       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   loading: false,                   character: data               })           })   }     render() {       const text = this.state.loading ? "loading..." : this.state.character.name       return (           <div>               <p>{text}</p>           </div>       )   } } export default App 

Maintenant, lors du chargement des données, l'inscription loading... apparaît brièvement, puis le nom du personnage s'affiche sur la page.

Résumé

Dans cette leçon, vous avez terminé le travail sur une application Todo et appris à utiliser la méthode du cycle de vie du componentDidMount() et l'API Fetch standard pour charger des données à partir de sources externes, les traiter et les afficher sur des pages. De plus, nous avons parlé ici de la mise en œuvre d'un mécanisme de notification à l'utilisateur des opérations d'exécution de l'application, ce qui peut prendre beaucoup de temps. La prochaine fois, nous parlerons des formulaires.

Chers lecteurs! Comment chargez-vous les données de sources externes dans les applications React?