L'essentiel de React.js

Fixer des types de propriété

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous pouvez fixer des types et contrôler l'intégrité des propriétés ajoutées à un composant. Ainsi, vous pourrez renseigner les types scalaires les plus génériques.
05:16

Transcription

Nous allons faire un petit tour dans la doc de React. Je vais vous montrer une page intéressante. Cette page, ce sont les reusable components. Concrètement, c'est une page complète qui vous donne des informations sur comment bien coder un composant, ni plus ni moins et on va s'attarder sur une partie très importante selon moi : la validation des propriétés. On l'a vu, on peut définir des propriétés par défaut mais on pourrait aussi ne pas les définir tout simplement, s'attendre à ce que la personne qui va utiliser le composant-- parce que c'est vrai dans une équipe on peut être plusieurs à utiliser le composant, --vienne configurer le composant. Et quand il configurera le composant, il faudrait que ça lui dise s'il n'y a pas de propriétés manquantes ou obligatoires, par exemple et d'un type particulier. Première chose, on peut fixer un type. Il n'y en a beaucoup, on peut s'attendre à une propriété en array, boolean, une fonction, un nombre, un objet particulier, une string ou un symbole. Tout ça, vous allez pouvoir l'utiliser pour figer le type des propriétés qu'attend un composant. Dans notre cas, on sait que color va forcément être une string, ça doit être du yellow, ça doit être une string par exemple. On pourrait figer la propriété. Comment ? Simplement regardez : MyComponent.PropTypes. Vous avez vu qu'on pouvait faire du DefaultProps. On va faire la même chose MainComponent, ici et plutôt que d'utiliser defaultProps, on va utiliser celui-là, propTypes. On va le passer ici. On va dire égal. On va ouvrir un objet de validation qui va nous permettre de figer les propriétés et les types de propriétés. La propriété première que l'on va figer c'est color. On sait que color doit être disponible et on sait aussi que ça doit être de la string. Alors on va le définir. On va utiliser React.PropTypes.string. Celui-ci vous l'utilisez là. Ce qui veut dire que quand je vais construire mon composant à cet endroit là, j'utilise, non pas du blue mais j'utilise 20, par exemple, comme ça. Ça devrait me crier dessus en me disant non, c'est pas possible, parce que le type de propriété que tu as défini pour color, c'est de la string, ce n'est pas du nombre. On va aller de l'autre côté et on va recharger notre code. Effectivement, regardez. On a un joli warning. Ça ne va pas bloquer l'exécution mais on a un joli warning qui nous dit que le PropType color est de type number et actuellement, on s'attend à de la string. Cela permet de placer des messages d'erreur dans votre code, qui donneront une information au développeur qui va utiliser votre composant et qui n'a pas défini correctement ce que vous attendiez. Il y a autre chose d'intéressant. Bien sûr, vous avez ici tous les types possibles, ce qui va vous permettre de travailler convenablement. Mais vous pouvez aussi vous attendre à une node c'est-à-dire que ça peut être un fragment, ça peut être un noeud particulier qu'on attend à l'intérieur de la propriété. On peut aussi s'attendre à un élément React, ça c'est intéressant. On peut aussi s'attendre à un message particulier. On peut aussi s'attendre à une énumération. Vous voyez quand même, ça va très très loin. On peut s'attendre également à un ArrayOf, ObjectOf où on va définir des informations à l'intérieur. Surtout, et c'est là que je vais vraiment attirer votre attention, on peut placer des Required ou non. De base, quand vous allez définir vos types de propriété, ils sont optionnels, par défaut. Si vous voulez les rendre obligatoires, vous allez placer directement derrière un IsRequired. En faisant ça, vous allez dire que la color c'est de la string, obligatoirement. C'est obligatoire, si vous ne le mettez pas ça ne marchera pas. Pour tester, on va simplement, ici, venir commenter cette ligne-là. Puis on va monter notre composant sans la propriété color. Donc on s'attend à la propriété color, elle n'existe pas, on va avoir une jolie erreur parce qu'elle est obligatoire. A ce moment là, on va vous dire attention ce n'est pas possible, color est Required. Vous êtes obligé d'ajouter color parce que sinon vous ne pouvez pas faire fonctionner le composant. Cela donne une vraie superbe indication à la personne qui va utiliser parce qu'on va lui dire, attention, il y a des paramètres obligatoires. Dernier point, un petit peu avancé pour le coup mais on vous le montre quand même. Vous pouvez définir des propriétés, des types de propriété par défaut. L'idée sera de retourner une erreur à la fin, si ça ne marche pas. Donc vous pouvez tester tout ce que vous voulez. Définir un type par défaut avec un vrai validateur par défaut que vous allez écrire vous même. Vous ferez bien attention parce qu'ici vous devrez utiliser une fonction avec trois paramètres, props, propName, componentName, que vous pourrez utiliser à l'intérieur pour faire vos tests. Et c'est bien, pourquoi ? Parce que ça va vous permettre pendant le message d'erreur de dire que c'est la propriété toto qui, dans le composant Name, n'est pas respectée ou la validation n'est pas respectée. Donc vous avez la possibilité de travailler sur la logique derrière la construction d'un composant, et c'est bien pour les développeurs qui vont travailler avec vous et même pour vous, pour ne pas vous tromper c'est important de venir fixer, au fur et à mesure, comme on peut le faire dans d'autres langages. On pourrait penser qu'ici les propriétés ressemblent un peu à des paramètres de fonction.

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 !