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

Jouer sur les styles d'un composant

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Il est possible de travailler avec les styles dans un composant. Par exemple, vous pouvez faire varier des couleurs.
04:05

Transcription

Alors, nous avons des « states », des « props », j’aimerais bien pouvoir jouer avec les styles de mon composant. C'est quelque chose que vous allez faire assez souvent. Par exemple, ici, jouer avec la couleur du titre, pendant que je monte mon composant car je veux définir un style CSS qui sera « in-line », qui sera un style attaché au composant et définir sa propriété pendant que je fais le rendu. Ce n’est pas un problème, vous pouvez le faire, il y a un utilitaire aussi pour ça. Assez simplement, on peut utiliser « style » que vous connaissez déjà si vous faites du HTML. il suffirait de dire « color » comme ça et puis « blue », comme ça. Si on fait ça, dans le rendu navigateur, on va avoir du bleu. Le gros souci, c’est qu’on est en train de faire du React. Et comme vous pouvez le voir ici, on va nous crier dessus en nous disant : attention, les styles, sont utilisables, sans aucun problème, mais il y a une syntaxe particulière. Je vous montre comment ça marche : on est obligé de venir définir un objet un peu particulier parce qu’il va falloir utiliser les doubles accolades, si je veux pouvoir définir quelque chose. En fait, ceci va être dynamisé, attaché au composant, on va pouvoir travailler avec. Si je recharge, on va me dire que j’ai un problème parce que « blue » n’est pas défini. Pourquoi ce n’est pas défini ? Tout simplement parce que, regardez : il faut que ce soit une string ! Si vous mettez « blue », comme ça, il va s’attendre à une instance de variable et ça ne va pas fonctionner. Je vous montre le processus, ce n’est pas pour rien que je fais de petites erreurs, c’est logique, j’ai envie que vous puissiez avancer convenablement et que vous compreniez bien ce qui se passe. Donc si je veux utiliser une propriété de style je vais être obligé, si elle est « flat », si elle est directement connue, de l'utiliser directement comme ça. Donc si je peux utiliser des instances, comme ça, ça veut dire que je peux définir une propriété « color » comme ça, venir mettre du bleu, « blue » et réutiliser ma propriété à l’intérieur de mon style, puisque les « props », souvenez-vous, vont se chercher sur le composant, comme ça : « this.props » et on va pouvoir mettre une propriété. Donc « this.props.color » et, au moment où je monte mon composant, je peux dire que j’ai du bleu. Si je recharge, je ne vais pas avoir de problème, ça va rester bleu. Ce qui pourrait être intéressant quand vous allez utiliser les « props » comme ça c’est de définir des valeurs par défaut. C’est-à-dire de lui dire que si la propriété « color » existe, il l’utilise, sinon il utilise autre chose. Je vais vous montrer comment on va faire avec un exemple : on va simplement utiliser « interner » donc je vais dire « this.props.color, ça existe, ou pas ? » Si ça existe, tu le prends sinon tu mets du rouge. Dans le cas où ça existe, c’est-à-dire qu'on a défini la « props » à « blue », ça va fonctionner, c’est-à-dire que là, je recharge ma page, j'ai bien du « blue ». Mais imaginons que je ne le mette pas, quand je crée mon composant, je recharge ma page et ça va être du « red ». Pensez à le faire, c’est important parce que ça vous permet de définir, si vous l’avez définie, une propriété donc vous avez permis à votre composant d’utiliser une propriété configurable, pensez à mettre des « default », pensez à mettre des valeurs par défaut pour que vous puissiez avoir quelque chose sur cette couleur. Si on ne met rien, la couleur sera nulle et il n'y aura pas de couleur ! Il est vrai que c’est plus intéressant d’avoir, de temps en temps, ce qu’on appelle des « fall-back ». Ça n’existe pas donc ça utilise autre chose, ça vous permet d’avoir un composant qui est configurable, si vous le voulez. Sinon, il utilise ce qui existe déjà et il n'y a pas de souci. Voilà pour l’utilisation des styles. Bien sûr si vous voulez les enchaîner, ce n’est qu’un objet donc on va pouvoir tout simplement faire virgule, utiliser autre chose et puis continuer comme ça. Pensez à utiliser les styles de cette manière, tout simplement parce que vous les rendez dynamiques et puis cela vous évite d'avoir à faire des feuilles de styles particulières. Votre composant peut devenir entièrement configurable, de A à Z, c’est la meilleure des choses à faire quand on fait du React, parce que l’idée derrière le composant, c’est qu’on puisse le réutiliser ailleurs. Cette réutilisabilité, il faut qu’elle puisse être configurée et qu'un composant ne dépende pas d'un contexte mais soit réellement réutilisable et configurable.

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 !