React 5 7 Ajout de styles dynamiques

Maintenant que la structure de notre graphique est en place, nous allons construire le composant ChartBar qui affiche une barre individuelle, avec une hauteur dynamique calculée à partir de la valeur et de la valeur maximale.

Structure HTML/CSS du ChartBar

Dans ChartBar.js, on importe React et ChartBar.css, puis on déclare le composant en fonction fléchée recevant les props. Le JSX se compose de trois <div> imbriquées plus un <div> pour le label en bas :

<div className="chart-bar">
  <div className="chart-bar__inner">
    <div className="chart-bar__fill" style={{ height: barFillHeight }}></div>
  </div>
  <div className="chart-bar__label">{props.label}</div>
</div>

Les noms de classes chart-bar, chart-bar__inner, chart-bar__fill et chart-bar__label correspondent aux styles définis dans le CSS. Le label affiche dynamiquement {props.label} (par exemple « Jan », « Fév »…).

Calcul de la hauteur de remplissage

Avant le return, on déclare une variable barFillHeight à '0%' par défaut. Si props.maxValue est supérieur à zéro, on calcule le pourcentage que représente props.value par rapport à props.maxValue, arrondi à l'entier le plus proche :

let barFillHeight = '0%';

if (props.maxValue > 0) {
  barFillHeight = Math.round((props.value / props.maxValue) * 100) + '%';
}

La hauteur est ainsi calculée entre 0 % et 100 %. On passe cette valeur à l'attribut style de la barre via style={{ height: barFillHeight }}. Attention à la syntaxe : les doubles accolades ne sont pas spécifiques aux styles : les accolades extérieures ouvrent l'expression JSX, et les intérieures déclarent un objet JavaScript que React utilise comme styles inline. On obtient ainsi une barre dont la hauteur s'adapte automatiquement aux données.

N'oubliez pas export default ChartBar;. Avec ce composant fini, il ne reste plus qu'à utiliser le graphique et à lui transmettre les points de données. On se retrouve dans le prochain cours.

En résumé

Cette leçon enseigne comment construire un composant SharkBar en React avec des styles dynamiques appliqués via l'attribut style. On apprend à créer une structure HTML imbriquée avec des classes CSS et à utiliser un objet JavaScript pour modifier les styles en fonction des props (valeur et maximum). Le composant calcule dynamiquement le pourcentage de remplissage de la barre basé sur les données reçues.

Points clés

• Structure HTML du composant avec classes CSS imbriquées : sharkbar, sharkbar__inner, sharkbar__label
• Passer des données au composant via props : label, value, max pour contrôler l'affichage et le remplissage
• Utiliser l'attribut style en JSX avec un objet JavaScript dynamique : {height: `${barFillHeight}%`}
• Calculer le pourcentage de remplissage : Math.round((props.value / props.max) * 100)
• Comprendre les doubles accolades {{ }} en JSX : les premières pour l'expression JavaScript, les secondes pour l'objet style
• Vérifier la valeur maximale avant le calcul pour éviter les erreurs de division par zéro

Questions fréquentes

Pourquoi utilise-t-on des accolades doubles {{ }} pour le style en React ?

Les premières accolades indiquent une expression JavaScript en JSX, tandis que les secondes créent un objet JavaScript que React attend pour la propriété style. Par exemple {height: '50%'} est l'objet qui sera appliqué comme style.

Comment calculer dynamiquement le pourcentage de remplissage de la barre ?

En utilisant Math.round((props.value / props.max) * 100), ce qui divise la valeur actuelle par la valeur maximale, multiplie par 100 pour obtenir un pourcentage, et l'arrondit à l'entier le plus proche. Ne pas oublier le symbole % à la fin pour la valeur CSS.

Pourquoi la structure HTML du composant comporte-t-elle plusieurs divs imbriquées ?

Chaque div correspond à une classe CSS différente (sharkbar, sharkbar__inner, sharkbar__label) qui applique les styles corrects pour le rendu visuel complet de la barre. Cette structure imbriquée permet une organisation CSS modulaire et maintenable.