Options de Stylisation dans React

React n'impose pas une méthode unique pour styliser les composants. Il offre plutôt la flexibilité de choisir comment les styles sont appliqués en fonction des besoins du projet.

La mise en forme dans React repose toujours sur le CSS. La différence réside dans la manière dont les styles sont organisés et appliqués aux composants.

Dans ce cours, l'accent sera mis sur deux approches principales de stylisation :

• Styles en ligne : les styles sont appliqués directement aux éléments à l'aide de l'attribut style et d'objets JavaScript ;
• Fichiers CSS externes : les styles sont écrits dans des fichiers CSS traditionnels et appliqués à l'aide de noms de classes.

Stylisation avec des bibliothèques et des frameworks

Dans les projets réels, les applications React sont souvent stylisées à l'aide de bibliothèques tierces et de frameworks. Parmi les options populaires, on trouve :

• CSS Modules ;
• Styled Components ;
• Emotion ;
• Tailwind CSS ;
• Material UI (MUI) ;
• Chakra UI.

Ces outils offrent des fonctionnalités avancées telles que les styles encapsulés, les systèmes de design et la stylisation basée sur les utilitaires.

Pourquoi nous ne les abordons pas ici

Bien que puissantes, les bibliothèques de styles ajoutent une complexité supplémentaire et introduisent de nouveaux concepts au-delà du cœur de React. Dans ce cours, l'objectif est de construire une base solide, de comprendre le fonctionnement des composants React, et d'éviter les distractions inutiles au début.