Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de React.js

Afficher les détails d'un utilisateur

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez maintenant créer un système pour afficher les détails d'un utilisateur se trouvant dans une liste.
06:37

Transcription

Pour finir en beauté ce chapitre sur le routing, on va se faire un petit exercice. Pour les plus audacieux, je vous donne l'énoncé, vous essayez de le réaliser et vous regardez la vidéo après. L'idée serait d'abord d'afficher dans les utilisateurs la liste des utilisateurs. Et puis, une fois qu'on aura ça, d'aller chercher le détail. Alors ne mettez pas pause tout de suite. J'ai fait deux petites choses que vous allez devoir répercuter dans votre code. Notamment sur getData ici, j'ai remplacé la liste des utilisateurs par des objets d'utilisateurs avec un name et avec un rôle. Mon idée c'est simplement d'afficher le rôle. On pourrait avoir beaucoup plus de propriétés pour afficher vraiment le détail complet des utilisateurs mais on ne va pas pousser trop, on va simplement avoir juste des objets. Maintenant, quand je vais cliquer sur un utilisateur dans la liste qui sera itérée, qui sera placée ici, je vais vouloir aller sur la route un seul utilisateur et donc récupérer les données de cet utilisateur. C'est bon, vous pouvez mettre pause. Et on va le réaliser. Comment va-t-on faire ? On va d'abord devoir itérer ces utilisateurs. Souvenez-vous, c'est une static sur le mainComponent. On va pouvoir utiliser le mainComponent à cet endroit-là, pour faire une itération. Vous vous souvenez de l'itération ? Regardez, on l'a ici. Alors le mieux serait d'avoir une ul li. On va récupérer toute cette partie-là puis on va indenter parce que ce n'est pas très joli, voilà, c'est fait. Maintenant à la place de la liste ici, on va remplacer et on va mettre ici notre ul avec chaque fois à l'intérieur, notre génération de li. Ça c'est bon. Maintenant ici qu'est-ce qu'on va faire ? On va devoir itérer. Itérer quoi ? Itérer les utilisateurs se trouvant sur le mainComponent, le getData et puis les Users ici. Donc à chaque fois ce sera un utilisateur. Ce qu'on voudra afficher ce sera le user.name comme ça. On se souvient que nous ce qu'on voudrait ici, c'est un link, donc on va commencer à préparer le link, to, et on se rappelle qu'ici on va pouvoir faire un petit égal et venir mettre un objet qu'on va remplir plus tard. Ici on va fermer, on n'oublie pas de prendre cette partie-là et de venir la mettre derrière. Maintenant, c'est bien parce que on va avoir absolument tout ce qu'on veut. On pourrait le faire de façon simple, parce qu'on sait qu'on va vouloir aller sur la route user et on sait qu'on va vouloir aller sur la route user avec un utilisateur. Comment on va récupérer l'utilisateur ? Regardez, je vais venir "pather" à l'intérieur, le "i". Là je vais le faire de façon dynamique. On ne l'a pas vu ça encore donc comme ça, vous pouvez le voir. Ici en utilisant le dollar et les accolades, je vais pouvoir "pather" n'importe quoi qui est dynamique. Le i va représenter le numéro d'index. Ce qui fait que dans le tableau, je vais pouvoir le retrouver assez facilement. On pourrait déjà tester comme ça pour voir si tout est ok. Est-ce qu'on affiche bien la liste des utilisateurs ? Oui. Est-ce qu'en cliquant je suis redirigé vers les utilisateurs ? Oui, presque. Regardez. Ici, on a user. Donc vous voyez bien que si j'ai envie de me balader sur Users user je vais devoir faire users, on se souvient, "/" et "i". Pourquoi parce que ma route user c'est bien en fait, directement le paramètre. Ici ce sera pas le name, ce sera l'ID. Donc on va le conserver comme ça, c'est l'ID qu'on veut récupérer. Ça va demander quelques petites modifications ailleurs. On sait qu'ici, on récupérait quelques informations qu'on va pouvoir supprimer et qu'à cet endroit-là, on voulait récupérer un ID. Alors là, on va chercher carrément le user ce sera beaucoup plus simple. On sait qu'on va avoir l'ID sur props route params et ID. Donc ça, on peut le mettre de côté. Et on sait aussi que pour récupérer un utilisateur, on peut tout à fait utiliser le mainComponent getData avec users qui, finalement, représente en réalité, la liste des utilisateurs. Alors ça on peut faire comme ça et passer ici l'ID directement pour récupérer l'utilisateur que l'on souhaite. Bon maintenant qu'on a this user c'est pas trop mal, faudrait afficher son nom. This.user.name. Mais là, ce n'est pas vraiment parlant. Moi ce que je vais vouloir, c'est le rôle. Et c'est plutôt ici que je vais vouloir mettre que c'est la fiche de, fiche de, et je vais vouloir afficher this.user.name. Comme ça je vais me retrouver ici avec une route qui va être dynamisée. A chaque fois que je vais cliquer sur un utilisateur, ça va aller me chercher directement dans le constructeur l'utilisateur en question et je vais pouvoir me balader sur la fiche de chaque utilisateur. On va recharger cette page, et on va voir si tout est ok. Alors bien sûr ça ne marchera pas sur la route user donc on va revenir à l'accueil, passer par les utilisateurs, aller chercher Julien et on récupère bien la fiche de Julien qui est lead développeur. On revient sur les utilisateurs. Christophe, qui est dev junior. On revient sur les utilisateurs. Roby qui est dev junior. Et ici, on peut tout çà fait naviguer avec les flèches sans aucun problème. Alors vous voyez que c'est assez facile de mettre en place de la logique métier, à l'intérieur des composants react et avec le routing. On peut très facilement, quand on a prévu à l'avance la récupération de data par des statics et puis, quand on a prévu des objets à l'intérieur, pour aller récupérer, ça devient facile. On n'a plus qu'à alimenter après nos objets avec des propriétés. Puis là, on sera tranquille. Par exemple, imaginons que je rajoute l'âge comme ça, je peux me dire que tiens ici, je vais mettre l'âge. Donc, on pourrait mettre l'âge d'ailleurs c'est un chiffre, on pourrait le mettre comme ça par exemple. Et on peut l'afficher, on l'affichera par exemple que sur Julien parce qu'on a l'âge sur Julien, on n'a pas l'âge sur les autres. Qu'est-ce qui va se passer si je n'ai pas l'âge par exemple sur Christophe ? Je vais recharger la liste des utilisateurs, cliquer sur Christophe. Je n'ai pas l'âge. Ce qui est bien en react, c'est que quand il n'y a pas l'info, ça ne s'affiche pas. Par contre, quand il y a l'information effectivement, ça vient bien s'afficher. Ce qui est génial aussi c'est que vous êtes dans du templating donc on pourrait tout à fait rajouter comme ça "ans" et à ce moment-là, ça vient s'ajouter directement. Alors après à vous de voir comment vous allez organiser tout ça. Quelles sont les datas que vous allez faire porter à vos objets. Comment vous allez les afficher. Comment vous allez les récupérer. Vous pouvez tout faire. A partir de là, ça devient assez simple d'utiliser le routing et on combine ça avec de la logique métier à l'intérieur et on est tranquille. Alors on pourrait aussi s'amuser pourquoi pas, ça peut être un exercice pour vous à récupérer, maintenant qu'on a enregistré les utilisateurs, la liste de toutes les tâches. Attention, ça veut dire que du coup, dans les items, il va falloir modifier un petit peu. Alors certes on peut garder effectivement juste l'item mais on pourrait pousser un item un petit peu plus sympa avec de l'information un petit peu plus construite donc. Le nom de l'utilisateur, son ID, pourquoi pas, pour récupérer en plus ses données et puis on pourrait avoir l'identification de la tâche donc en fait le texte de la tâche. On peut faire plein plein de choses. Il suffit simplement maintenant de venir modifier le code qu'on a créé ensemble pour le faire évoluer. Vous avez du travail mais vous avez de quoi vous amuser, c'est un vrai bac à sable.

L'essentiel de React.js

Exploitez pleinement React.js ! Créez des composants web complexes rapidement, découvrez leurs relations ainsi que leurs cycles de vie, passez en revue la navigation, etc.

3h28 (49 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
React.js React.js 15.3.2
Spécial abonnés
Date de parution :27 oct. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !