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

Mettre en place le routing avec react-router

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
React-router est un plug-in pour React.js. Il permet de bénéficier des outils et de mettre en place un routing. Apprenez à installer react-router.
04:10

Transcription

Maintenant que vous êtes quasiment incollable sur les composants et que vous savez vraiment les utiliser pleinement, on va parler du routing. On va utiliser pour ça un React router. React router, qu'est-ce que c'est ? React router, c'est une librairie qui est développée par les équipes de React, et qui nous permet de faire des routes dans une application React. Concrètement, ça va nous permettre sur une URL-- une URL c'est ce que vous avez là, --d'avoir pour un Path bien précis, un rendu de composant bien précis. On va l'installer ensemble, c'est très simple à installer et on aura ce rendu-là à la fin. Ce rendu-là est un rendu très simple où vous verrez qu'on a une sorte d'URL au-dessus, pour un composant. On verra ensuite comment on créé des liens, comment on passe des informations, comment on utilise pleinement le React router au sein du navigateur. C'est parti, allons-y, installons. Votre première étape d'installation va être de rajouter la librairie React router que vous allez trouver sur unpackage. Vous pouvez simplement recopier cette ligne-là et utiliser la même version que moi comme ça vous suivrez exactement le même cours. Une fois que vous aurez recopié ça, vous disposerez, directement, dans votre projet des librairies React router. Vous allez ensuite faire ce que j'ai fait moi. On va déplacer le code qu'on avait avant qui était entièrement ici derrière notre HTML dans un fichier Javascript. On va faire un fichier Javascript à part. Pourquoi ? Tout simplement parce que ça va être plus simple. et on va avoir pas mal de choses à faire dedans, Je préfère qu'on travaille sur quelque chose de coloré pour cette partie-là parce que maintenant on va aborder des sujets un peu plus sensibles et puis il ne faudra pas se tromper. Alors, n'hésitez pas à faire la même chose que moi ici. Sortez votre code. Vous pouvez tout à fait le laisser dedans si vous avez envie de continuer comme ça mais je vous conseille de le sortir. Surtout, n'oubliez pas de bien laisser le type en text Babel, sinon le babel core ne pourra pas compiler votre fichier. Dans notre fichier app.js, on a simplement fait un déplacement de tout le code. On a amélioré quelques petites choses. Les composants n'ont pas bougé, on a toujours un appComponent et un mainComponent. Par contre regardez, la modification va intervenir ici. La première chose à faire va être de créer des variables au même titre que la variable qu'on avait créé pour le mountNode mais pour le router. La je vais mettre router declaration et on va avoir plusieurs variables, toujours avec des majuscules pour se rappeler que ce sont des libraires. Donc la var router ça va être ReactRouter.Router, Route ReactRouter.Route DefaultRoute reactrouter DefaultRoute Link ReactRouter.Link et RouteHandler ReactRouter RouteHandler. Faites bien attention à respecter les majuscules sinon ça ne marchera pas. Une fois que vous aurez fait ça, vous aurez tout le set d'utilitaires disponible dans votre projet, que vous pourrez utiliser. Dernière petite modification, ici comme vous pouvez le voir j'ai mon render qui a été complètement modifié. Alors je n'instancie plus en fait le composant au-dessus. Je prépare simplement un rendu avec cette partie-là, voilà. C'est uniquement cette partie-là qu'on va devoir rassembler et recopier ici. Alors, comment cela s'architecture ? Simplement on va avoir une balise router, qui se ferme en dessous, souvenez-vous, ouvrant/fermant sinon en React ça ne marche pas. Et enfin, on va avoir ici un Route Path et en fait un attribut composant qui nous permet de définir quel est le component qui va être mappé, qui va être ajouté disponible sur ce path. Alors ce Path c'est le path "/" et je vais avoir mon premier component, le MainComponent, qui va être affiché quand je vais être sur le path "/". Le path "/" sur n'importe quelle application, c'est toujours le path par défaut. C'est uniquement ce qu'on a à faire. C'est tout, il n'y a pas plus de choses à faire que ça pour faire fonctionner, pour mettre en place le router sur votre projet actuel . Qaund vous aurez fait ça, vous enregistrerez bien tous les fichiers. Vous repasserez du côté du navigateur et simplement, vous rechargerez. Il n'y aura pas d'incidence particulière. L'application fonctionne absolument pareil qu'avant. Il n'y a aucun problème avec ça. Simplement, effectivement, vous vous rendez compte qu'en haut dans l'URL, vous êtes maintenant sur une URL particulière pour un composant particulier.

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 !