👩‍🏫 Le CSS dans React : le niveau supérieur

Objectifs

• Qu'est-ce qu'un Préprocesseur CSS
• Des Préprocesseurs CSS existants
• Comment utiliser les "CSS Modules"

Pré-requis

1. 1

   Valider la quête suivante

   Quêtes liées

   • Quête 1795
2. 2

   Retenir l'attribut className pour appliquer du CSS avec des classes dans React

   jsx

   <img className="avatar" />
   

Introduction

Maintenant que tu as compris comment fonctionne le CSS et comment l'utiliser avec React. Il est temps d'apprendre à construire des solutions plus évolutives. L'utilisation d'outils supplémentaires comme les préprocesseurs et les frameworks CSS sera la voie à suivre.

Commençons! 🚀

🖌️ Préprocesseurs CSS

Qu'est-ce qu'un Préprocesseur CSS ?

C'est un outil qui te permet d'écrire du CSS avec des "super pouvoirs" (comme des blocs imbriqués, quelque chose qui n'est pas possible avec le CSS classique). Ensuite, il y aura un compilateur qui transformera ton super CSS en CSS classique et ensuite le transmettra à React. SASS, avec son format Scss, est un bon exemple de préprocesseur CSS :

Le Scss facilite l'écriture du CSS en le rendant plus facile à maintenir, grâce à de puissantes fonctionnalités telles que : les variables, l'imbrication, des fonctions mathématique, les mixins, des fonctions, les imports...

Pour installer et utiliser le préprocesseur CSS SASS sur ton projet React, utilise la commande npm install sass. Après cela, il te suffit de commencer à créer des fichiers .scss et de les importer dans React. comme tu le ferais normalement avec du CSS. Cela fonctionne simplement 🚀

👍 Avantages: code réutilisable, bonnes performances

👎 Inconvénients: plus difficile à déboguer

// Scss.js
import React from 'react';
import './style.scss';

/* style.scss*/


/* utilise des variables dans le CSS, car c'est possible 😎 */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;


/* utilise l'imbrication de blocs dans le CSS, car c'est possible 😎 */
nav {
  ul {
    font: 100% $font-stack;
    color: $primary-color;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

🔬 Expérimente

Maintenant, c'est ton tour ! Essaye l'exercice ci-dessous. Suis les instructions dans les commentaires et n'hésite pas à expérimenter avec le code !

!--- App.js
import React from "react";
import "./style.scss";

function App() {
  return (
    <div>
      <nav>
        {/* use the class list to remove bullet points and align items side-by-side */}
        <ul>
          <li>Home</li>
          <li>About Us</li>
          <li>Contact</li>
        </ul>
      </nav>
      {/* use the class title to change the title color */}
      <h1>SCSS!</h1>
      <p>This is an example using SCSS!</p>
    </div>
  );
}

export default App;
!--- style.scss
// create a variable fontStyle and assign the value of "Courier New", Courier;
// create a variable fontColor and assign the value of #d41f1f;

// apply the property font-family and color to your h1 tag, with the variable values

nav {
  ul {
    display: flex;
    list-style-type: none;
    li {
      margin: 10px;
    }
  }
}

h1 {
  text-align: center;
}

💅 CSS Modules

Tu en as déjà entendu parler dans la quête précédente :

Tu peux l'importer dans un composant comme un module, et accéder aux classes CSS comme une propriété :

import styles from "./App.module.css";

function App() {
  return  <h1 className={styles.green}>CSS Modules</h1>;
);

Consulte la documentation pour plus d'information.

👍 Avantages: scope local, souvent intégré de base dans un environnement React

👎 Inconvénients: plus difficile de cibler les éléments

🔬Expérimente

Maintenant, c'est ton tour ! Essaye l'exercice ci-dessous. Suis les instructions dans les commentaires et n'hésite pas à expérimenter avec le code !

!--- App.js
import React from "react";
import styles from "./App.module.css";

function App() {
  // use the classes below where necessary with the created CSS module
  return (
    <div className={styles.bgRed}>
      <nav>
        {/* use the class list to remove bullet points and align items side-by-side */}
        <ul>
          <li>Home</li>
          <li>About Us</li>
          <li>Contact</li>
        </ul>
      </nav>
      {/* use the class title to change the title color */}
      <h1>CSS Modules!</h1>
      <p>This is an example using CSS Modules!</p>
    </div>
  );
}

export default App;
!--- App.module.css
/* create a class for the ul and apply these rules:  display: flex; list-style-type: none; */
/* create a class for the h1 and apply these rules:  text - align: center; color: #d41f1f; */

.bgRed {
  background-color: red;
}

Résumé

Alors nous y voilà ! Tu as vu quelques façons d'intégrer du CSS dans ton application React ! Maintenant, c'est à toi de les essayer et de voir ce qui est le mieux adapté pour toi et ton projet !

Garde également un oeil sur l'enquête 'state of CSS' pour rester à jour.

💪 Challenge

Choisis l'une des solutions de style ci-dessus et recrée un composant de carte avec du CSS. Poste un lien GitHub en tant que solution et explique pourquoi tu as décidé d'utiliser cette solution plutôt qu'une autre (tu peux mettre ton explication dans le fichier README).

Sois créatif ! Et si tu es fier de ton composant de carte, n'hésite pas à le partager avec nous !

Voici un peu d'inspiration pour les composants de la carte: