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

Créer le rendu d'une route

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour pouvoir naviguer, il faut des routes et des composants qui sont reliés. Apprenez à créer votre première route et à la relier à un composant.
03:48

Transcription

Alors là c'est bien joli, on a une seule route. On a une route cell/. Mais ce n'est pas suffisant. Comment va-t-on faire pour déclarer un nouveau composant et le rattacher à une route. Déjà la première des choses qu'on aurait à faire c'est de déclarer un nouveau composant. Ça pourrait être, pourquoi pas, un UsersComponent, le UsersComponent qu'est-ce qu'il pourrait faire ? On pourrait utiliser ce composant là pour afficher les utilisateurs et puis, pourquoi pas, plus tard-- ça pourrait être un exercice pour vous --pour faire un ajout d'utilisateur donc une page pour gérer les utilisateurs. On va le relier sur une route Users et puis on va faire un affichage. L'affichage, vous vous souvenez, c'est simplement la méthode Render qui fait un return de template. Donc là, on va devoir avoir une div, ouvrante et fermante et ici à l'intérieur, on pourrait juste avoir un 1h1 avec marqué Utilisateur. L'idée étant d'avoir un exemple du fonctionnement. Maintenant qu'on a un UsersComponent comme ça, qu'est-ce qu'on va faire et comment on va le display ? On va simplement ici copier cette route et puis, la mettre en dessous, faire ici Users donc la route Users et on va faire mapper cette route Users sur un composant. Par exemple, le UsersComponent, comme ça soit vous mettez Users, soit vous mettez User, c'est vous qui voyez. Après ce n'est que du nommage, je vous le rappelle à chaque fois mais c'est vrai que le nommage vous appartient pleinement. N'hésitez pas, il peut être intéressant d'ajouter des commentaires comme ça. Au-dessus de chacun de vos composants, vous devez définir ce qu'il fait, ce qu'il va prendre comme paramètre etc... Ça va vous permettre d'avoir un code beaucoup plus propre. Vous remarquerez deux choses aussi. Au-dessus, j'ai fait un bloc de variables. C'est plus sympa. Pour la récupération du MountNode, je me suis permis d'utiliser le QuerySelector que je trouve quand même beaucoup plus pratique, un petit peu moins verbeux. On peut faire ce qu'on veut avec, ça pourrait être une class ici, ce n'est pas un problème. On va enregistrer cette partie-là, et puis on va recharger. Si je recharge ma page, que se passe-t-il ? Rien du tout, il n'y a rien de particulier et le comportement est toujours le même, ça fonctionne. Par contre, si au-dessus ici je viens mettre Users et que j'appuie sur entrée, je suis redirigé directement sur la route Users. C'est génial parce que, regardez, en instantané ça vient charger mon composant celui que j'ai mis ici. Ce qui est bien c'est que je pourrais rajouter un P avec, pourquoi pas, du Lorem Ipsun dedans. On va faire Lorem Ipsun juste simplement comme ça. Enregistrer. Retourner sur le navigateur et recharger. Etant donné que j'ai une route ici, le rechargement de la page va nous charger que le composant qui est utile. Donc vous voyez que monter en composant sur une route devient extrêmement simple une fois qu'on a le comportement. Ce qui est intéressant aussi c'est que votre navigateur va continuer à conserver le routing au sein de la navigation pure, c'est-à-dire qu'on a un historique de navigation comme sur n'importe quelle application. Vous vous retrouverez sur une application qui commence à bénéficier de routing sans aucun problème. Evidemment, quand vous allez ensuite regarder votre console react, vous allez retrouver des informations un peu particulières. Pourquoi ? Parce que maintenant, on est sur le Router. Ça ne veut pas dire que vous ne trouvez pas le composant actuel. C'est génial parce que quand vous allez naviguer, vous voyez bien que le MainComponent change, pour ensuite le UsersComponent donc le Routing fonctionne également avec la console React. Cela va vous permettre de travailler convenablement et de pouvoir continuer à déboguer vos applications sans aucun problème Donc, n'hésitez pas à utiliser ça. Voilà comment on monte un composant sur une route. Vous voyez qu'il n'y a rien de sorcier.

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
Votre/vos formateur(s) :
Date de parution :27 oct. 2016
Durée :3h28 (49 vidéos)

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 !