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

Comprendre les états de composant

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Un état permet de figer des informations ainsi que de la donnée qui sera utilisée par votre composant. Aussi, cette donnée peut évoluer.
04:12

Transcription

Maintenant qu’on a vu les props qui, on peut le remarquez assez facilement, sont vraiment, et vont être utilisées la plupart du temps pour configurer un composant. C’est comme ça qu’on va utiliser des props, c’est-à-dire qu’on va passez des propriétés pour vraiment pouvoir rendre configurable un composant. On va parler des états, les « states ». En React, les « states » c’est un objet qui va être très intéressant. Pourquoi ? Parce qu’il va pouvoir être modifié au fur et à mesure de l’évolution de la vie de votre composant. Il y a un chapitre là-dessus donc on ne va pas parler tout de suite du cycle de vie d’un composant mais je vais quand même vous montrer comment on utilise les « states ». Il faut quand même partir d’un principe, c’est qu’un composant, au départ, quand il est créé, c’est comme toute classe ou tout objet, on est en programmation orientée objets, on va avoir ici un « constructor ». On va dire « constructor » comme ça, (c’est pareil, ça existe déjà, ce n'est pas moi qui l’invente, ça fait partie de React) et si vous redéfinissez le constructeur, si vous attachez des choses au constructeur d’un composant, il faut partir aussi d’un principe, c’est qu’on est en train de faire un « extend » de react.component donc on va être obligé de commencer par « super ». Il vous permet de récupérer tout ce qui se trouvait dans le constructeur précédent, dans le constructeur parent, ensuite vous pouvez redéfinir ce que vous voulez. Ça va ressembler, si vous avez déjà fait du PHP à « parents ». C’est la même chose, on peut récupérer « parents » donc on va récupérer le contenu du constructeur parent par « super ». Maintenant qu’on a fait ça, on peut travailler sur les « states ». Les « states », de base, ça existe déjà dans un composant mais ce n’est pas redéfini, enfin ce n'est pas défini vraiment. Si vous faites un « console.log » sur « this.state » vous verrez que c’est un objet vide et qu’on ne peut rien faire avec pour le moment. Donc on va devoir définir « This.state= » et puis on va s’amuser à venir mettre, par exemple, « name: », c’est un objet donc on fait ce qu’on veut et, pourquoi pas, on va mettre « Juju ». J’enregistre ça et si je veux l’utiliser maintenant dans mon rendu, c’est absolument la même chose, c’est-à-dire que je vais pouvoir utiliser mon « state » comme ça, et puis faire ici un « this.state.name ». Alors si j’utilise cette partie-là « this.state.name », je vais venir utiliser ce qui se trouve dans l’objet « this.state » et je vais récupérer le « name » et, comme ça c’est un objet, je vais pouvoir très facilement le faire évoluer au fur et à mesure. C’est très important de travailler sur ce genre d’objet-là. Pourquoi ? Parce que c’est ce qui va nous permettre de rendre notre composant dynamique au fur et à mesure de l'utilisation du composant. On va pouvoir faire évoluer le « state » et on va pouvoir très simplement modifier des informations, transformer un composant, afficher, ne pas afficher… Là, on va pouvoir travailler vraiment comme on veut, ça va plus ou moins être l’objet attaché à notre composant qui représente son état actuel et qui permettra, un peu plus tard, de faire varier cet état. Alors si je fais ça, j’enregistre, je retourne dans mon navigateur, je vais recharger et je vais me rendre compte que j’ai bien « Hello, Juju! » ici. Et si je regarde mon composant, je me retrouve bien avec, dans React, toutes les informations sur mon composant : j’ai un « state » avec le « name » Juju et je peux travailler avec ça. J’ai toujours une propriété parce que, pour le moment, on ne l’a pas supprimée de notre composant, on l’a laissée ici. Tout ce que vous définissez est toujours disponible, même si, dans mon composant je n’appelle pas « this.props », les propriétés sont toujours attachées parce qu’elles ont été écrites avec le « render » du composant. Donc pensez que les « states » sont très intéressantes parce que, pour le moment, on est en train de l’utiliser dans un constructeur mais on pourrait tout à fait imaginer l’utiliser à l’extérieur, dans de la logique métier, faire quelque chose sans aucun problème, ce n'est pas un souci. Voilà pour les « states », en fait pour la première partie des « states », parce que, on va le voir assez souvent, on va réutiliser les « states » et puis on arrivera à un moment à Redux et, quand vous aurez vu du Redux, vous vous rendrez compte que ça devient plus intéressant de passer par un manager de « state » donc quelque chose qui va permettre de les gérer plutôt que de le faire soi-même. Redux est pour plus tard dans cette formation. Pour le moment, gardez à l’esprit que les « states » c'est simplement un objet dans lequel vous mettez des propriétés valeur, vous pouvez même mettre des propriétés objet. On peut aller très très loin dans le concept, ce qui va nous permettre de travailler avec le composant de façon très simple. Et puis, c’est du JavaScript pur, on est vraiment sur de l’objet, il n'y a pas de fioritures.

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 !