Tutoriel React, partie 7: styles en ligne

Aujourd'hui, dans la prochaine partie du cours React, nous parlerons des styles en ligne.



→ Partie 1: aperçu du cours, raisons de la popularité de React, ReactDOM et JSX
→ Partie 2: composants fonctionnels
→ Partie 3: fichiers composants, structure du projet
→ Partie 4: composants parent et enfant
→ Partie 5: début des travaux sur une application TODO, les bases du style
→ Partie 6: sur certaines fonctionnalités du cours, JSX et JavaScript
→ Partie 7: styles en ligne
→ Partie 8: poursuite des travaux sur l'application TODO, familiarité avec les propriétés des composants
→ Partie 9: propriétés des composants
→ Partie 10: Atelier sur l'utilisation des propriétés et du style des composants
→ Partie 11: génération de balisage dynamique et méthode des tableaux de cartes
→ Partie 12: atelier, troisième étape de travail sur une application TODO
→ Partie 13: composants basés sur les classes
→ Partie 14: atelier sur les composants basés sur les classes, état des composants
→ Partie 15: ateliers santé composante
→ Partie 16: quatrième étape de travail sur une application TODO, gestion d'événements
→ Partie 17: cinquième étape de travail sur une application TODO, modifiant l'état des composants
→ Partie 18: la sixième étape de travail sur une application TODO
→ Partie 19: méthodes du cycle de vie des composants
Partie 20: la première leçon de rendu conditionnel
→ Partie 21: deuxième leçon et atelier sur le rendu conditionnel
→ Partie 22: la septième étape des travaux sur une application TODO, téléchargement de données depuis des sources externes
→ Partie 23: première leçon sur l'utilisation des formulaires
→ Partie 24: Deuxième leçon sur les formulaires
→ Partie 25: Atelier sur l'utilisation des formulaires
→ Partie 26: architecture d'application, modèle de conteneur / composant
→ Partie 27: projet de cours

Leçon 15. Styles intégrés

→ Original

À la fin de la dernière leçon, nous avons créé un composant qui analyse l'heure du jour et affiche un message d'accueil correspondant. Voici le index.js fichier index.js complet qui implémente cette fonctionnalité:

 import React from "react" import ReactDOM from "react-dom" function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

Nous devons maintenant définir ce que ce code affiche sur la page. Dans le même temps, nous allons utiliser ici une approche qui diffère de la stylisation des éléments considérés précédemment en utilisant des classes CSS. À savoir, nous parlons de l'utilisation du style attribut HTML. Voyons ce qui se passe si vous utilisez cette conception:

 <h1 style="color: #FF8C00">Good {timeOfDay}!</h1> 

Rien de bien vraiment. Le texte n'atteindra pas la page, mais un message d'erreur s'affichera à la place. Son essence se résume au fait qu'ici, lors de la configuration des styles, il ne s'agit pas d'une valeur de chaîne, mais d'un objet contenant des paires de la forme : , où les clés sont les noms des propriétés CSS et les valeurs sont leurs valeurs.

Lorsque nous essayons d'utiliser des attributs HTML dans du code JSX, nous ne devons pas oublier que ce avec quoi nous travaillons, bien qu'il ressemble à du code HTML normal, ne l'est pas. Par conséquent, l'apparence de telle ou telle conception ici peut différer de ce qui est accepté en HTML. Dans ce cas, nous avons besoin d'un objet JavaScript standard contenant une description des styles. Armés de cette idée, nous réécrivons le fragment de code ci-dessus comme suit:

 <h1 style={color: "#FF8C00"}>Good {timeOfDay}!</h1> 

Donc, malheureusement, notre code ne fonctionnera pas non plus. À la suite de son exécution, un message d'erreur sera de nouveau affiché, mais pas le même que la dernière fois. Il signale maintenant que là où le système peut s'attendre à une accolade, il trouve autre chose. Pour résoudre ce problème, vous devez vous souvenir de ce dont nous avons parlé dans la leçon précédente. À savoir, que le code JavaScript incorporé dans JSX doit être placé entre accolades. Ces accolades qui existent déjà dans notre code sont utilisées pour décrire le littéral de l'objet et non pour mettre en évidence le code JS. Corrigeons ceci:

 <h1 style={{color: "#FF8C00"}}>Good {timeOfDay}!</h1> 

Maintenant, le composant forme exactement ce qui est nécessaire sur la page.


Texte stylisé affiché sur la page par le composant

Et si nous décidions de continuer à styliser ce texte? Pour ce faire, nous devons nous rappeler que nous décrivons les styles dans l'objet JS, ce qui signifie que nous devons ajouter des paires : supplémentaires à cet objet. Par exemple, nous essaierons de styliser l'arrière-plan du texte de cette manière en utilisant la propriété CSS background-color et de compléter le code comme ceci:

 <h1 style={{color: "#FF8C00", background-color: "#FF2D00"}}>Good {timeOfDay}!</h1> 

Cette conception entraînera un message d'erreur. Le point ici est que nous décrivons les styles à l'aide d'un objet JS standard, et en JavaScript, les variables et les noms de propriété des objets ( identificateurs ) ne peuvent pas contenir le symbole «-», tirets. En fait, cette restriction peut être contournée, par exemple, en mettant le nom de propriété de l'objet entre guillemets, mais dans notre cas, ce n'est pas le cas. Dans de telles situations, lorsque les noms de propriétés CSS contiennent un tiret, nous supprimons ce caractère et rendons majuscule la première lettre du mot qui le suit. Il est facile de voir qu'avec cette approche, les noms de propriété CSS seront écrits dans le style chameau - tout comme en JavaScript, il est habituel d'écrire des noms de variables composés de plusieurs mots. Réécrivez le code:

 <h1 style={{color: "#FF8C00", backgroundColor: "#FF2D00"}}>Good {timeOfDay}!</h1> 

Regardons les résultats de son travail.


Texte stylisé affiché sur la page par le composant

Dans le processus de stylisation du texte, le code d'un objet avec des styles s'allonge. Ce n'est pas pratique de travailler avec lui. Si vous essayez de diviser ce code en plusieurs lignes, rien de bon n'en sortira non plus. Par conséquent, nous dériverons la description de l'objet avec des styles à partir du code JSX, en créant une constante avec les styles nom, en y écrivant l'objet et en utilisant son nom dans JSX. En conséquence, nous obtenons ce qui suit:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> ) 

Ce code fonctionne exactement de la même manière que celui décrit ci-dessus, mais cette approche est très pratique lorsqu'il devient nécessaire d'ajouter de nouveaux styles à l'objet. Cela n'entraîne pas la croissance du code renvoyé par le composant.

Comme vous pouvez le voir, les valeurs des propriétés CSS sont désormais définies dans l'objet styles sous forme de chaînes. Lorsque vous travaillez avec cet objet, il convient de considérer certaines fonctionnalités, qui, en particulier, se rapportent à des propriétés dont les valeurs sont définies sous forme de nombres. Par exemple, il s'agit d'une propriété fontSize (qui ressemble à font-size en CSS). Par conséquent, cette propriété peut être définie sous la forme d'un nombre ordinaire et non d'une chaîne entre guillemets. Par exemple, la construction suivante est parfaitement valide:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: 24 } 

Ici, le nombre 24 sera interprété comme la taille de police indiquée en pixels. Si l'unité de mesure doit être spécifiée explicitement, nous devrons à nouveau utiliser les valeurs de chaîne des propriétés. Par exemple, le fragment de code suivant est similaire, en termes d'effet sur la taille de police, au précédent, mais l'unité de mesure de la taille est indiquée ici explicitement:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: "24px" } 

Ici, nous avons indiqué la taille en pixels, mais si nécessaire, d'autres unités peuvent être utilisées dans des conceptions similaires.

En parlant des styles intégrés, on ne peut manquer de mentionner les limites de cette approche. Donc, si vous devez ajouter des préfixes de navigateur aux styles, cela peut être un peu plus difficile que d'ajouter d'autres styles. Mais quelque chose comme les pseudo-classes , comme :hover , n'est pas pris en charge. Si vous en avez besoin à ce stade de la maîtrise de React, il est préférable de tirer parti des éléments de style à l'aide des classes CSS. Et à l'avenir, il vous sera probablement plus pratique d'utiliser des bibliothèques spécialisées comme des composants de style à de telles fins. Mais pour l'instant, nous nous limiterons aux styles en ligne et aux éléments de style utilisant des classes CSS.

Peut-être qu'après avoir pris connaissance de cette limitation des styles en ligne, vous vous demandez peut-être pourquoi vous devriez les utiliser si les classes CSS peuvent obtenir le même effet et avoir des fonctionnalités plus étendues. L'une des raisons d'utiliser des styles en ligne dans React est que ces styles peuvent être générés dynamiquement. De plus, quel sera tel ou tel style est déterminé au moyen du code JavaScript. Nous réécrivons notre exemple pour que la couleur du texte change en fonction de l'heure à laquelle le message est affiché.

Voici le code de composant complet qui utilise la formation de style dynamique.

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay const styles = {   fontSize: 30 } if (hours < 12) {   timeOfDay = "morning"   styles.color = "#04756F" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon"   styles.color = "#2E0927" } else {   timeOfDay = "night"   styles.color = "#D90000" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> ) } 

Notez que la déclaration de constante de styles est maintenant avant le bloc if . Dans l'objet qui définit le style, seule la taille de police de l'inscription est définie - 30 pixels. Ensuite, la propriété color est ajoutée à l'objet, dont la valeur dépend de l'heure de la journée. Rappelons que nous parlons d'un objet JavaScript complètement ordinaire, et que ces objets prennent en charge l'ajout et la modification de propriétés après leur création. Une fois le style formé, il est appliqué lors de l'affichage du texte. Afin de tester rapidement toutes les branches d'une instruction conditionnelle, vous pouvez, lors de l'initialisation de la constante de date , transmettre la date et l'heure souhaitées au constructeur du type Date . Par exemple, cela pourrait ressembler à ceci:

 const date = new Date(2018, 6, 31, 15) 

À strictement parler, le sens de tout cela est que les données dynamiques peuvent affecter l'apparence des éléments formés par les composants. Cela ouvre de grandes opportunités pour le développeur.

Résumé

Aujourd'hui, nous avons parlé des styles intégrés, de leurs capacités et de leurs limites. Dans la prochaine leçon, nous continuerons à travailler sur l'application TODO, ainsi qu'à commencer à nous familiariser avec les propriétés des composants, avec le concept le plus important de React. Par conséquent, il est recommandé à toutes les personnes impliquées dans ce cours, avant de poursuivre leurs études, de tout répéter et d'expérimenter tout ce que nous avons analysé jusqu'à présent.

Chers lecteurs! Si vous connaissez bien le développement de React, dites-nous quelles bibliothèques vous utilisez pour styliser les composants.