Incorporez du style et des assets à votre projet

Dans le chapitre précédent, vous avez créé votre premier projet React avec Vite et organisé vos composants Banner et Cart. Il est maintenant temps de donner vie à votre application "La maison jungle" en y ajoutant du style ! 

Reprenons où nous en étions ; votre projet Vite devrait ressembler à ceci :

Si ce n'est pas le cas, vous pouvez récupérer le code de base surcette branche GitHub

Stylisez vos composants avec  className

Le principe fondamental

Parce que  class  est un mot réservé en JavaScript !

La solution :className. C'est l'équivalent React de class en HTML.

// ❌ Ne fonctionne pas en React
<div class="ma-classe">Contenu</div>


// ✅ Correct en React  
<div className="ma-classe">Contenu</div>

Vous pouvez utiliser plusieurs classes en les séparant par un espace :

<div className="classe-principale classe-secondaire">Contenu</div>

Organisation des styles

Pour une application bien structurée, créons un dossier  styles  dans  /src  :

Commençons par styliser notre composant  Banner.

Créez le fichier  /src/styles/Banner.css  :

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  border-bottom: 3px solid #31b572;
  background-color: #f8f9fa;
}

.banner-title {
  color: #31b572;
  font-size: 2rem;
  margin: 0;
  font-family: 'Georgia', serif;
}

Application du style à notre Banner

Modifions maintenant  /src/components/Banner.jsx  :

import '../styles/Banner.css'

const Banner = () => {
  const title = 'La maison jungle'
  return (
    <div className="banner">
      <h1 className="banner-title">{title}</h1>
    </div>
  )
}

export default Banner

Lancez votre serveur de développement avec  npm run dev  et admirez le résultat !

En effet, en React comme dans toutes les librairies et tous les frameworks front, l'accessibilité du web est essentielle. Elle est nécessaire pour permettre aux technologies d’assistance aux personnes en situation de handicap, notamment, d’interpréter les pages web.

Utilisez l'attribut style pour du CSS inline

React accepte aussi l'attribut  style  , mais contrairement au HTML, il faut lui passer un objet JavaScript :

// HTML classique
<div style="color: red; font-size: 16px;">Texte</div>

// React
<div style={{ color: 'red', fontSize: '16px' }}>Texte</div>

• Pour des tests rapides

• Pour des styles dynamiques simples

// Exemple de style dynamique
const Banner = () => {
  const isSpecialDay = true
  return (
    <h1 
      className="banner-title"
      style={{ 
        color: isSpecialDay ? 'gold' : '#31b572' 
      }}
    >
      La maison jungle
    </h1>
  )
}

Intégrez des images et des assets

Avec Vite, l'import d'images est simple et optimisé automatiquement ! Vite traite vos assets (images, fonts, etc.) et les optimise pour la production.

• Utilisez le dossier  assets  que nous avons dans le dossier  src  pour y ajouter les images :

• Téléchargez le logo de La maison jungle et placez-le dans  /src/assets/logo.png.

• Dans votre composant, importez l'image comme un module :

import '../styles/Banner.css'
import logo from '../assets/logo.png'

const Banner = () => {
  const title = 'La maison jungle'
  return (
    <div className="banner">
      <img 
        src={logo} 
        alt="Logo La maison jungle" 
        className="banner-logo" 
      />
      <h1 className="banner-title">{title}</h1>
    </div>
  )
}

export default Banner

• Ajoutez le style pour le logo dans  /src/styles/Banner.css  :

/* Style déjà ajouté au-dessus */
.banner-logo {
  height: 60px;
  width: auto;
}

Bonus : CSS Modules avec Vite

Pour les plus curieux, Vite supporte nativement les CSS Modules ! C'est une approche qui évite les conflits de classes CSS.

Il suffit de nommer votre fichier  .module.css.

Voici un exemple avec :  Banner.module.css

/* Banner.module.css */
.banner {
  background-color: #f8f9fa;
  padding: 32px;
}

.title {
  color: #31b572;
  font-size: 2rem;
}

Vous pourrez ensuite utiliser les différentes classes comme des propriétés d’un objet javascript que nous appellerons ici styles et que nous importerons dans notre fichier  Banner.jsx  :

import styles from '../styles/Banner.module.css'

const Banner = () => {
  return (
    <div className={styles.banner}>
      <h1 className={styles.title}>La maison jungle</h1>
    </div>
  )
}

Avantage : Vos classes CSS sont automatiquement renommées (banner devient  Banner_banner__abc123  ) pour éviter les conflits !

Avec cette approche il est même souvent conseillé de restructurer votre application pour avoir un dossier par composant comprenant le  jsx  et le fichier  .module.css  comme ceci : 

À vous de jouer !

À votre tour ! Stylisez maintenant le composant Cart pour créer un panier avec un style attractif.

Consigne

1. Créez/src/styles/Cart.css

2. Donnez à votre panier :

• Unpaddingde 32px

• Unbackground-colorde #31b572

• Du texte blanc (color: white)

Solution

Votre application La maison jungle commence à avoir de l'allure. Vous maîtrisez maintenant :

• L'utilisation declassName pour appliquer des styles CSS

• L'organisation de vos fichiers CSS dans une structure claire

• L'import et l'affichage d'images avec Vite

• Les bonnes pratiques d'accessibilité

En résumé

• classNameremplace classen React pour appliquer des styles CSS

• Importez vos CSS directement dans vos composants avec import './MonStyle.css'

• Les images s'importent comme des modules :import logo from './logo.png'

• L'attributaltest essentiel pour l'accessibilité des images

• L'attributstyleaccepte un objet JavaScript pour du CSS inline

• Vite optimise automatiquement vos assets pour la production

Dans le prochain chapitre, nous allons rendre notre application interactive en découvrant les événements et la gestion des clics !