L'essentiel de React.js

Utiliser les propriétés

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les props sont une des parties les plus intéressantes de cette librairie JavaScript. Comprenez-en ici le fonctionnement.
03:40

Transcription

Maintenant que vous savez créer un composant, ce qui n’est pas très compliqué, comme vous l’avez vu il suffit simplement de définir une classe de composants, d’étendre du coup la librairie react.component, donc React point component, et, à partir de là, on bénéficie d’une méthode « render » à l’intérieur, que l’on peut définir. Ne vous méprenez pas, « Render » étant déjà disponible sur Component, on ne fait ici que l’écraser pour faire quelque chose. Il n'y a pas mal de méthodes qui existent, on verra un petit peu plus tard, dans le corps des composants, qu’on peut faire pas mal de choses. Je vais vous montrer autre chose, ce sont les propriétés. De temps en temps, on va avoir besoin de venir dynamiser l’intérieur ou alors de pouvoir créer un composant et ce composant, on va lui assigner des valeurs différentes en fonction de son montage. Le montage final, c’est « render » qui va s’en occuper. Alors comment on va faire ? On va utiliser les props. Les props, c’est assez simple, vous allez pouvoir définir des clés, attribut et valeur, directement sur le corps de votre composant quand vous êtes en train de le monter et réutiliser, à l’intérieur de votre « template », les propriétés. Par exemple, si ici je définis « name » comme ça et que je mets « Julien ». J’aimerais bien pouvoir réutiliser « Julien » et, du coup, j’aurai ici une propriété « name » qui me permettrait de dynamiser les informations au moment où je crée le rendu. Et ici, le corps de mon composant ne bougera jamais. J’aurai simplement ici que ma propriété à venir réécrire pour faire travailler React et lui dire d’afficher une information. Alors si vous avez besoin de l’utiliser dans le « template », c’est très simple, il suffira simplement d’utiliser des petites accolades comme ça, c’est ce qui vous permet de faire de l’interpolation. Donc concrètement on récupère le contenu d'une info, puis on demande à React de l’injecter à cet endroit-là, une fois qu’il a monté le composant. Comment je fais ? Je vais faire « this.props », « props » référence en fait toutes les propriétés que vous allez attacher à un composant et vous allez ensuite avec point chercher la propriété qui vous intéresse, sachant que « props » en fait, est un objet. Donc ici je vais faire « props.name » comme ça et je vais simplement enregistrer mon fichier, aller de l’autre côté et recharger. Alors on va se rendre compte que, automatiquement, il va rafraîchir ici et on va se retrouver avec une propriété qui va être « Julien », donc il y a une « props » qui vient d’être attachée. Si on veut voir ce qui se passe, on va aller regarder ici, sur la console de développeur, on verra qu’effectivement « MyComponent » ici, a bien la propriété qu’on lui a attachée, « name Julien » et surtout ici, vous voyez bien que dans les props, on se retrouve effectivement avec une clé valeur, « name:Julien », que l'on peut réutiliser très facilement. Je ne vous le montre pas tout de suite mais gardez quand même à l’esprit que ce sera la plus simple des fonctionnalités qu’on peut utiliser en React et surtout il va falloir l’utiliser comme ça. N'essayez pas de vous amuser à récupérer les « props » ailleurs ou alors à venir les écraser parce que, de toute façon, « props » c’est vraiment un objet qui sera disponible en fonction des propriétés que vous aurez attachées comme ça à un composant, vous ne pourrez pas vraiment le manipuler à l’extérieur du « templating », c’est vraiment de l’interpolation pure, c’est pour venir changer deux ou trois petites choses. Notamment on pourrait faire du style « in-line », dire que ce composant va être affiché en rouge, en bleu, ce qu’on veut, ça, ça pourrait tout à fait être généré un petit peu plus tard, sans aucun problème avec une boucle, on pourrait boucler sur le « render », puis venir travailler sur ça. Vous avez vu, les « props », ce n’est pas très compliqué à utiliser, vous remarquez qu’il suffit seulement d’attacher une clé valeur et de la récupérer dans le « template ». N’oubliez pas les accolades sinon ça ne marchera pas et n’oubliez pas d’utiliser « this » qui fait référence à votre composant actuel, donc « this » c’est vraiment l’instance du composant et « props », ce sont ses propriétés, celles que vous aurez créées ici. Vous pouvez en créer autant que vous souhaitez.

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 !