L'essentiel de React.js

Créer une référence

Testez gratuitement nos 1257 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Passer une information en référence vous permet de la traiter dans la logique de votre classe. Travaillez sur un champ de formulaire pour bien comprendre le processus.
05:25

Transcription

Vous êtes calés maintenant en références ! Vous voyez à peu près comment ça fonctionne. On va faire un petit exemple ensemble et je vais attirer votre attention sur quelque chose. On n'en a pas parlé encore, il faut savoir qu’en React, c’est obligatoire, vous êtes obligés d’avoir vos différents éléments, si vous en avez plusieurs, à l’intérieur d’un élément parent. Je m’explique. Il vous faut obligatoirement, par exemple, un élément « div » ouvrant et un élément « div » fermant. Si vous voulez rajouter autre chose. c’est ce que je vais faire, j’ai envie qu’on rajoute autre chose, j’ai envie qu’on rajoute un « input » et qu'à cet « input » particulier, on vienne lui mettre une référence particulière. La référence particulière va être le choix « input », comme ça, et on va le passer dans un «this.input » qui va être égal à « input ». Ce qui fait qu’on va pouvoir récupérer sa valeur sans aucun problème. Pensez bien à fermer vos éléments sinon vous allez avoir des problèmes et ça ne va pas vous permettre de travailler proprement. Comme on a fait ça, on pourrait tout à fait se dire qu’on aurait un événement qui serait levé quand le « input » va changer. Pour ça, que va-t-on faire ? On n'a qu’à faire une fonction « update », comme ça, qui va venir récupérer le contenu de notre « input » quand on change quelque chose. Souvenez-vous toujours, il y a deux étapes : il faut d’abord déclarer la fonction, on l’écrit et puis ensuite il faut ici venir faire un « bind » dessus sinon ça ne marchera pas. Pensez toujours à faire un « bind » de « this », qui vous permet ensuite de réutiliser ça et de rendre le tout fonctionnel. Maintenant, si j’ai envie de savoir exactement ce qui va se passer et quand cette valeur « input » va être remplie. On pourrait se prévoir ici une propriété qu’on va créer soi-même. On pourrait dire que « this.quesry » serait égal à « this.input.value », qui nous permettrait de récupérer la valeur. Et puis, on va faire un « console.log » de « this.query » qui va changer à chaque fois qu’on va « updater » le champ. Attention, il va bien falloir qu’on ait un « onChange » qui nous permette de se câbler sur l’événement. Rappelez-vous, « onChange » et puis on va faire du React, on va faire « this.update » et ce sera suffisant. Ici on a bien « this.update » qu’on vient de créer, ensuite on a la fonction « update » qui vient insérer quelque chose dans le « this.query », qui vient dire que « this.query » va être « this.input.value ». Ça va changer à chaque fois qu’on va taper quelque chose dans le champ et ça devrait fonctionner tout seul. J’enregistre, je passe sur ma page et je recharge. Attention avant d'ouvrir votre panneau : si ce n’est pas le cas, pensez toujours à l’avoir ouvert. Si je tape des informations, vous voyez que ça me complète et je vais avoir un rechargement automatique. Génial ! Autre chose, c’est qu’on peut, sans aucun problème, faire du « databinding » dans les deux sens. Je m’explique. Je pourrais venir écrire dans React le contenu de « this.query » qui au départ sera vide et qui, ensuite, sera rempli automatiquement puisque on va agir avec « this.update » qui va remplir « this.query ». Ce qui fait que « this.query » devrait apparaître. Aucun problème pour faire ça, pensez quand même bien à recharger. On va vous dire qu’il y a une erreur si vous utilisez les doubles moustaches comme moi. Faites attention, en React ce sont de simples moustaches, c’est un peu l’habitude d’utiliser des systèmes comme Mustache ou comme Angular. Si je remplis, on voit qu’il y a un problème. Quel est le problème, c’est que « this.query » n’est jamais mis à jour ! Pourquoi ? Tout simplement parce qu’on ne peut pas agir directement comme ça ! Regardez, je l’avais prévu à l’avance : si vous voulez mettre à jour de la vue, rappelez-vous, vous êtes obligés de faire un « setState » ! Vous n'avez pas le choix ! Bien entendu, en faisant « setState », vous avez la possibilité de n’agir que sur une seule partie, ce qui veut dire qu’on pourrait agir sur la partie qui nous intéresse, c’est-à-dire la « query » sur notre « state ». Faites attention aussi aux fautes d’orthographe que vous pouvez avoir sur vos mots ! On va faire ça comme ça et on n'oubliera pas de venir chercher « state ». Souvenez-vous, vous travaillez sur le « state » d’un composant, jamais sur une valeur ou une propriété que vous avez créé à l’avance. Il faut absolument que ce soit déclaré en React, sinon ça ne marchera pas. Et la magie opère, vous voyez qu’en-dessous, quand je tape, ça vient se modifier sans aucun problème. Voilà ! Vous avez un exemple concret, un champ « input » dans lequel on va pouvoir taper de l’information, une valeur qui est câblée, qui est récupérée au « onChange » avec un événement sur une fonction et un « setState » partiel qui ne fait qu’agir sur « query » de mon « state » qui est « query » à cet endroit-là. Donc « query » démarre vide et à chaque fois qu’on appuie, chaque fois qu’on rentre une lettre, ça vient se remplir. On peut imaginer tout un tas d’applications, avec ce fonctionnement-là. Faites attention, je vous le redis, il faut obligatoirement avoir un élément parent si vous commencez à travailler avec plusieurs éléments dans la page qui vont avoir des comportements différents. Si vous n’avez pas d’élément parent, vous allez avoir une erreur. Voyez, on nous dit qu’il faut absolument avoir un élément adjacent, parent, sinon ça ne marchera pas. Pensez bien à avoir une « div » autour, c’est pour ça qu’on est en train de parler de module, de composant, on est toujours sur des petits composants avec un petit peu de « template » et un petit peu de logique. On essaie de pas faire des trucs trop gros. L’idée, c’est de rester sur quelque chose de petit et de réutilisable, surtout.

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 :
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 !