La transparence est importante pour nous. Nous respectons votre vie privée et votre confiance. S'il vous plaît veuillez lire notre Politique de confidentialité révisée.

L'essentiel de React.js

Utiliser les liens actifs

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
React-router vous permet de disposer d'un système simple pour afficher des menus et donner un statut actif à un lien.
05:01

Transcription

C'est vrai que c'est sympa de se déplacer de liens en liens comme ça, simplement en cliquant et ça va charger des composants, ce n'est pas mal. Il manque un petit peu d'esthétisme. Enfin je trouve, je ne sais pas ce que vous en pensez mais c'est vrai que quand on va cliquer sur un lien comme ça, on aimerait bien avoir l'information pour savoir sur quel lien on est. Ça va être utile dans de nombreux cas parce que c'est vrai que quand on va avoir beaucoup de liens, une grosse navigation, on aimerait pouvoir avoir du style, sur les différents éléments. C'est possible. On a tout à fait la possibilité d'ajouter sur les links une nouvelle information qui va nous permettre de styliser, d'ajouter de la couleur, de changer complètement le graphisme de l'élément sur lequel on sera positionné. L'élément sur lequel on sera positionné va fonctionner avec le routing qu'on aura défini. Route et Display Graphic vont être intimement liés. Alors, comment on va faire ? On va utiliser un nouvel attribut un peu comme to qu'on utilise sur le link. Attention ce ne sera utilisable que sur les links sinon ça ne marchera pas. Et ce sera Active Class Name. En faisant ça, vous allez référencer une class qui sera ajoutée à l'élément quand vous serez sur le path. Tout ça c'est un peu particulier donc ce que je vous propose, c'est qu'on ajoute une class. Le nom, ça vous regarde. Vous mettez ce que vous voulez. Je vais l'appeler Active, mais vous pouvez l'appeler comme vous en avez envie. Je vais passer de l'autre côté puis je vais recharger. Je vais aller sur le lien Home. Je suis sur le routing home, le "/" et je vais aller regarder ce qui se passe avec mon inspecteur. Quand je vais être dessus, je vais remarquer que cet élément a une class active et les autres éléments qui se trouvent en dessous ne l'ont pas. D'accord. Maintenant, imaginons que je me rende sur utilisateurs. Je vais retourner encore inspecter et je vais retourner sur home. Je me rends compte que home n'a plus sa class active. Vous voyez que tout ça est automatisé. C'est directement le ReactRouter qui va faire ça, qui va vous ajouter la class. Bien sûr il faudra obligatoirement référencer cet attribut si vous voulez que ça fonctionne. On va le référencer en dessous. On va le mettre sur les utilisateurs. Puis on va le mettre sur un seul utilisateur aussi. Comme ça, on a activé le comportement partout ce qui veut dire que, quand je serai positionné sur une route, la class active sera ajoutée sur le lien correspondant. Pour que ça fonctionne bien et qu'on ait un joli display, il va falloir qu'on ajoute une class. On va se rendre ici dans notre CSS et on va ajouter la class active, point active. Pour que ce soit simple, on va simplement changer la couleur. On va mettre du green, du vert. Normalement, on devrait avoir du vert quand on clique sur les différents liens et qu'on se positionne. On n'a plus qu'à essayer. On se rend ici. On recharge. Quand je suis sur la liste des utilisateurs, le /users, c'est bien le lien des /users, le lien utilisateurs avec un "s", qui est allumé. Quand je me rends sur la home, ça s'allume aussi. Utilisateurs, home, ça fonctionne. Maintenant, dans le cas d'un seul utilisateur, regardez ce qui se passe. Un seul utilisateur s'allume, mais utilisateurs bénéficie aussi de la class active. Vous voyez qu'ici on a active, et ici on a active. Les deux en fait, ont la class active. Pourquoi ? Tout simplement parce qu'on a utilisé du routing imbriqué. C'est pour ça que je vous l'ai montré juste avant le active class name. Oui évidemment. Parce que ici, étant donné que vous avez imbriqué la route user dans users, lui part du principe que quand vous êtes sur un utilisateur, vous êtes aussi sur la liste des utilisateurs. C'est à ça que va servir l'imbrication, à pouvoir gérer des comportements derrière. Tout ça est extrêmement lié. La façon que vous avez de définir le routing va aussi conditionner l'affichage que vous allez faire sur votre menu et sur les différentes propriétés que vous pouvez utiliser sur le menu. Donc faites attention à la façon dont vous allez référencer tout ça parce que ça fonctionne ensemble. Maintenant, le active class name que vous avez là, vous avez tout à fait possibilité, pourquoi pas, on peut imaginer que les liens qui sont sur user aient une autre couleur. Par exemple, on pourrait avoir une class active user comme ça. On répercute cette class-là et puis on va venir y mettre ici que les active users ce n'est pas en couleur green, mais ce serait une autre couleur, par exemple du blue. En faisant ça, vous allez agir sur le template et vous allez conditionner un affichage particulier. ici c'est du bleu, ici c'est du bleu et ici c'est du vert. Ce n'est pas très parlant effectivement. C'est vrai. C'est vrai parce que le bleu et le violet sont utilisés par le navigateur de base. Je vous propose qu'on le change ici, et qu'on mette du red, histoire d'avoir quelque chose qui fonctionne. Je suis bien sur du rouge quand je suis dans la partie utilisateurs et quand je repasse sur home, je suis sur du vert. Donc on peut vraiment travailler comme on en a envie, et faire absolument ce qu'on veut avec cette class. Gardez simplement à l'esprit que quand vous allez référencer du routing, vous devez le faire en conséquence d'un affichage derrière. Il faut vraiment réfléchir à tout ça. Ça va vraiment de pair.

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 !