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

Appliquer des références

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour travailler avec un élément, le plus simple est d'en créer une référence. Il s'agit ensuite d'utiliser cette référence dans le code.
05:23

Transcription

Maintenant, vous connaissez les basiques, c’est-à-dire que concrètement, vous savez créer un composant, vous savez interagir avec le « click », vous savez donc gérer les événements, on a vu pas mal de choses. Mais pour ceux qui font du JavaScript, et puis pour aller un petit peu plus loin, on va devoir parler des possibilités en plus qu’on a sur un composant. Il faut savoir qu’un composant, ça dispose d’événements, ça dispose en fait d’un cycle de vie, que l’on va pouvoir utiliser. On va pouvoir monter, démonter, etc., et donc se câbler sur ces différents événements-là. Le composant en lui-même, quand il est créé en React, a tout un cycle de vie à lui et la première des choses qu’on va voir pour que vous compreniez ce qui se passe, c’est qu’on peut d’abord le stocker. Alors on va parler des références. Il y a trois possibilités pour les références : soit vous allez stocker le composant complet, c’est-à-dire son rendu entier dans une variable, c'est la première des possibilités. Pour ceux qui font du JavaScript, c’est bien, parce que vous allez pouvoir interagir avec cette instance-là. Cette instance, on la stocke, et puis, pourquoi pas, on va allez regarder ce qu’on a à l’intérieur et vous allez voir qu’effectivement, un composant peut tout à fait être stocké dans une variable, ce qui pourra nous servir dans certains cas. Je vais recharger la page et on va, directement après que le composant ait été rendu, avoir une instance du composant qui est stockée. Gardez bien ça en tête, on peut avoir une vue du composant sans aucun problème, sous forme de variable, pour pouvoir agir dessus. Ça c’est la première des choses qu’on peut faire avec les références. Ce n’est pas tout ! Les références peuvent aussi nous servir à l’intérieur du petit « template », à venir travailler directement avec un des éléments. Ça peut être utile, par exemple, si on a un champ texte. Sur le h1, pour l’exemple, on va définir « ref » qui est un attribut qui fait partie de la famille React donc on va ensuite utiliser un « call-back » d’appel, à l’intérieur, puis on va pouvoir référencer quelque chose. Alors je vais écrire la fonction en ES6, c’est-à-dire que plutôt que d’écrire fonction, comme ça, avec quelque chose, je vais simplement ouvrir les parenthèses, je vais placer le « title » à l’intérieur. Je peux appeler ça comme je veux, c’est simplement ce qui sera utilisable et puis, plutôt que de faire directement les ouvertures et fermetures d’accolades, je peux utiliser en ES6 juste une flèche comme ça et définir un comportement derrière. Si je fais « console.log(title) », je vais me retrouver directement avec l’instance du h1, vraiment le HTML pur du h1, directement à l’intérieur. On va essayer. Ici on se retrouve, regardez, avec ça. Attention, on a un problème, c’est assez bête, c’est qu’on a laissé traîner le « console.log », donc on va l’effacer. On va recharger, c’est très propre et on voit bien qu’on a le h1, entièrement, donc on se retrouve avec une instance HTML. Ça va être très bien parce qu'on va pouvoir, pourquoi pas, travailler dessus et, si je clique, regardez, ça recommence. Vous remarquez quelque chose, c’est aussi que ça passe à « null » à un moment. Il faut savoir qu'on est en train de voir le cycle de vie, c’est-à-dire que, quand je clique sur cet élément-là, il est rafraîchi. Dans le Shadow DOM, il y une « node » qui est rafraîchie et cette « node »,ce nœud-là, c’est forcément le titre puisqu’on vient de changer l’intégralité du titre. Ça marche très bien et on voit bien qu'on avait « Julien » avant, « Juju » et puis on a eu « Toto » juste après. On a bien un rechargement qui est fait. Ça vous permet de voir ce qui se passe, qu’il y a bien un rechargement de contenu. Troisième possibilité, et pas des moindres, c’est qu’on va pouvoir soit directement agir, comme on vient de le voir, sur le « title ». Je pourrais tout à fait travailler en HTML sur le « title », j’ai accès à toutes les propriétés HTML d’une balise en JavaScript mais je peux aussi le stocker. C’est-à-dire que je peux dire ici, donc « this.title=title » et vu que je place « this.title », ça veut dire que je vais pouvoir y accéder. Quand je vais cliquer, je vais pouvoir récupérer le « title » à l’intérieur d’une fonction qui est définie sur un événement. Ça veut dire quoi ? je peux faire un « console.log » de« title » pour voir un petit peu ce qui va se passer ! Je vais récupérer, attention, « this.title » parce que j’ai créé une propriété « this.title=title » qui va être hydratée au moment où je vais cliquer. c’est comme ça que ça marche. Je vais bien avoir « this.title=title » et je vais pouvoir le récupérer et travailler dedans, dans n’importe quel événement. C’est très utile parce que, dans les événements, vous allez en avoir besoin de temps en temps. « This.title » c’est bien égal à ça. C'est égal à quoi ? C’est égal à « Toto », au moment où j’ai cliqué ! Si je re-clique, ça va repartir, pourquoi ? Parce qu'on a câblé un « click » et on a ça qui agit à chaque fois. Je peux cliquer plusieurs fois, je vais bien me retrouver à chaque fois avec la propriété « this.title » hydratée. Pensez-y parce que ça va vous servir si vous avez besoin de venir travailler sur un événement particulier, si vous voulez faire un focus sur un champ, si vous voulez savoir ce qui se trouve à l’intérieur du HTML. C’est la seule possibilité qu’on a en React mais c’est quand même possible, c’est-à-dire qu’on peut travailler avec des références et on peut en câbler autant qu’on veut. Dans mon code, si j’avais un gros « template » je pourrais dire que le h1 a une référence, qu’un champ a une référence. Je peux faire à peu près ce que je veux. Pensez-y, vous n’êtes pas bloqués. Vous pouvez récupérer une instance de n’importe quoi en le passant par les références, c’est la façon d’utiliser les différents éléments dans votre React.

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 !