Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de React.js

Ajouter des propriétés par défaut

Testez gratuitement nos 1334 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les props par défaut sont importantes. Elles vont refléter l'état initial de votre composant. Donc, voyez comment en ajouter.
03:16

Transcription

Quand on a commencé, on a défini des propriétés par défaut. Souvenez-vous bien, regardez. On va redescendre un petit peu. On va regarder le template qu'on avait écrit. Style. Si color elle existe, donc this.pops.color alors c'est red. Enfin c'est la color, sinon c'est red. Ça, ça s'appelle une valeur par défaut. Red, qu'on a ici, est une valeur par défaut. Il y a une façon beaucoup plus élégante d'écrire ça. Je vais vous montrer. On peut tout à fait fixer des propriétés par défaut dans un composant sans avoir par faire des ternaires comme ça qui sont pas forcément très jolis, un petit peu difficiles à lire et qui, en plus de ça... ça ne sert à rien, tout simplement, parce qu'on a des méthodes qui permettent de faire de la propriété par défaut. Alors, on va utiliser sur le composant une static qui est définie de base dans React et qui nous permet de fixer des valeurs par défaut. Cette static va s'appeler sur notre composant MainComponent, et elle s'appelle defaultProps. Vous allez faire un égal et puis vous allez définir avec un objet, proprement, les defaultProps donc les propriétés par défaut de votre composant. Alors nous c'est quoi ? On va travailler sur la propriété color. Donc on va lui dire que color, si elle n'est pas définie à blue, sera red. On enregistre. Pour le tester il va falloir supprimer ce qu'on a déjà injecté parce que c'est vrai que quand on a fait la création de l'élément on l'a créé avec des propriétés, il n'y a pas de propriétés par défaut. Puis on va repasser dans notre navigateur et on va recharger. Vous allez avoir une erreur. Il faut bien passer ça en Babel. C'est vrai, je n'y ai pas pensé. On va recharger et effectivement on va voir qu'ici ça s'affiche en rouge. Pour vraiment tester que c'est bien ok et qu'il n'y a pas de souci, on va mettre ici du yellow, comme ça, on sera ok. On est sûr que yellow, on ne l'aura pas encore défini et que du coup, c'est bien la propriété par défaut qui part. Cette propriété par défaut est une propriété par défaut donc on la définit à l'avance comme ça en fixant des propriétés par défaut. Ce qui veut dire que si je viens écraser la propriété par quelque chose au montage, à l'initialisation ou à la création de l'élément, je vais avoir cette couleur-là et pas l'autre. Si je lui remets du blue par exemple, j'ai créé mon élément, mon élément défini c'est du bleu, ce n'est pas du yellow donc il va le prendre en compte. C'est bien si vous voulez fixer par défaut des propriétés à un composant, sachant que vous pouvez le faire sur absolument tout et n'importe quoi. Je l'ai fait effectivement, pour le MainComponent mais si on avait des propriétés disponibles aussi sur le constructeur de notre AddComponent, on pourrait tout à fait lui assigner des valeurs par défaut. Faites bien attention à ça, c'est important de bien vérifier ce que vous avez comme propriété, ce que vous voulez fixer par défaut etc.. Ce sont des choses qui se font carrément à la conception. Je vous les montre maintenant parce qu'on est quand même dans le cadre d'une étude et on avance au fur et à mesure. Vous voyez des sujets au fur et à mesure. Mais pensez à faire ça au préalable. Quand vous commencez à concevoir, vous savez qu'il ya des propriétés. Là on savait qu'il y avait color et on avait besoin de color. Faites le au tout début.

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 !