article(s) dans votre panier VOIR

Retraiter la donnée avant de l'afficher

  • Vidéo 23 sur 36
  • 2h55 de formation
  • 36 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Retraiter la donnée avant de l'afficher
00:00 / 05:15
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
39,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans cette formation en ligne sur ReactJS, le formateur vous montre comment retraiter la donnée avant de l’afficher. L’objectif de cours consiste à utiliser une méthode pour simplifier le codage du mapping des données. Pour la simplification du code, vous faites appel au spread operator lors de l’usage des props. Quant au mapping, vous utilisez la fonction map(). Pour commencer donc, vous chargez tous les modules nécessaires au fonctionnement du projet. Pour ce faire, vous allez dans le script App.js et vous lancez ces paquets en écrivant import nomdupaquet from ‘le répertoire du paquet’. En prenant exemple sur le projet, vous écrivez import Tweet from ‘../../components/Tweet’. A l’aide du spread operator, vous simplifiez l’instruction qui instancie le tweet en codant les props dans le JSX comme suit {…/Tweet}. Cette action terminée, vous mappez les données. Afin d’y parvenir, vous vous assurez d’abord que les constantes soient bien importées dans Apps. Dans le cas contraire, vous ajoutez l’instruction import {tweets} from ‘../../constants/tweets’ sur l’entête du script App. Vous le mappez ensuite à l’aide de la fonction map(). Pour ce faire, vous inscrivez le code {tweets.map((tweet , index) =>())) entre les balises Home du container principal. Ici le spread operator vous évite de réécrire les props en ajoutant juste {...tweet}. Pour vérifier si ça marche, vous allez dans votre navigateur toujours en mode Développeur pour voir le résultat. En cas d’erreur, vous lisez les rapports d’erreurs dans la console pour rectifier le code. Dans le cas où le code fonctionne, vous remarquez que le résultat est le même que lors du mapping sans utilisation du spread operator mais le celui-ci est beaucoup plus simple. Pour conclure, cette formation en ligne sur ReactJS, vous a montré une technique de codage plus avancée de mapping de données en utilisant le spread operator.