Module 2Construire une application React
Chapitre 8 sur 18
Styler avec le style en ligne, les modules CSS et styled-components, l'affichage conditionnel, les listes et les clés.
Objectifs
Avec ce chapitre, tu sauras…
if, le ternaire et && ;map() et donner une clé (key) stable à chaque élément.Leçon 1
Il existe plusieurs façons de donner un style à un composant.
Le style en ligne (inline CSS)
Le style est donné directement à l'élément dans le JSX, sous forme d'objet JavaScript (chapitre 4) :
function Button() {
return (
<button style={{color:"#fff", borderColor:"#5C5CFF",
padding:"10px", backgroundColor:"#5C5CFF" }}>Nom du bouton</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Button />
);Vidéo · À regarder
FRApprendre React en 1 heure - Cours complet débutant
Comment Coder · YouTube
Ce que tu vas voir (3 min) : le chapitre « Les styles en React » : le style en ligne sous forme d'objet (style={{ … }}, propriétés en camelCase) et l'import d'un fichier CSS avec className. C'est le style en ligne et le fichier CSS de la section 1.
Les modules CSS
Les modules CSS regroupent tous les styles d'un composant au même endroit, et ces styles ne s'appliquent qu'à ce composant. Ils règlent le problème de la portée globale du CSS (une classe .titre d'un fichier qui casse le .titre d'un autre).
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
function Button() {
return (
<button className='buttonStyle'>Nom du bouton</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Button />
);.buttonStyle {
color: #fff;
border-color: #5C5CFF;
padding:10px;
background-color:#5C5CFF;
}Les composants stylisés (styled-components)
Les composants stylisés écrivent du CSS dans le JavaScript. Ils sont présentés comme le successeur des modules CSS : le CSS est limité à un seul composant et ne « fuit » pas vers le reste de la page. Tu écris du CSS normal, sans te soucier des noms de classes.
npm install styled-componentsimport styled from 'styled-components'
const Button = styled.button`
color: #fff;
border-color: #5C5CFF;
padding:10px;
background-color:#5C5CFF;
`
// dans un composant :
return <Button >Nom du bouton</Button>;styled.button crée un composant <button> déjà stylé. Le CSS est écrit entre accents graves (template literal, chapitre 1). On peut créer de la même façon styled.section, styled.h1, styled.input, etc.
Il existe d'autres façons de styler : d'autres bibliothèques CSS-in-JS, Sass/SCSS et Less.
| Méthode | Où est le CSS ? | Portée |
|---|---|---|
| style en ligne | objet style={{…}} dans le JSX | l'élément seulement |
| fichier CSS importé | index.css, App.css | globale (toute l'application) |
| module CSS | Nom.module.css, className={styles.x} | le composant |
| styled-components | template literal dans le JS | le composant |
Vidéo · À regarder
FRTutoriel React - Les Styled Components - CSS dans du JS ?
Tutoriel React (FR) · YouTube
Leçon 2
| Code dans index.js | Affichage |
|---|---|
root.render(<React.StrictMode><App isLoggedIn={false} /></React.StrictMode>); | Veuillez vous inscrire. |
root.render(<React.StrictMode><App isLoggedIn={true} /></React.StrictMode>); | Bienvenue ! |
| Écriture | Quand ? | Exemple |
|---|---|---|
if avant le return | deux rendus très différents |
Leçon 3
Vidéo · À regarder
FRApprendre React en 1 heure - Cours complet débutant
Comment Coder · YouTube
Leçon 4
1Le style en ligne s'écrit…
2Un module CSS a un nom en…
3Avec styled-components, on crée un bouton stylé avec…
4Pour afficher un élément ou rien, on utilise…
5{0 && <p>Vide</p>} affiche…
6Les clés servent à…
7La meilleure clé est…
L'essentiel du chapitre
style={{ backgroundColor: "#5C5CFF" }} (objet, camelCase).import './index.css', className="…") : portée globale ; module CSS (X.module.css, className={styles.classe}) : portée composant.npm install styled-components, import styled from 'styled-components', const Button = styled.button`…` , puis <Button>.if avant le return, ternaire {c ? A : B}, {c && A} (attention au 0).tableau.map(x => <li key={x.id}>…</li>) dans des accolades ; clé unique et stable entre frères, de préférence l'id.| l'exemple ci-dessus |
ternaire cond ? A : B dans le JSX | choisir entre deux éléments | {isLoggedIn ? <Connecte /> : <Anonymous />} |
&& dans le JSX | afficher un élément ou rien | {panier.length > 0 && <p>Panier : {panier.length}</p>} |
Ce que tu vas voir : l'installation de styled-components, la création d'un composant stylé avec styled.button et le CSS entre accents graves, puis son utilisation comme une balise normale <Button>. La vidéo compare aussi cette méthode avec le CSS classique (problème des noms de classes) : c'est la section « Composants stylisés ».
L'affichage conditionnel fonctionne comme les conditions en JavaScript : on utilise if ou l'opérateur ternaire pour créer les éléments qui correspondent à l'état courant, et React met l'interface à jour.
function Connecte() {
return (
<h1>Bienvenue !</h1>
);
}
export default Connecte;function Anonymous() {
return (
<h1>Veuillez vous inscrire.</h1>
);
}
export default Anonymous;Le composant App affiche l'un ou l'autre, selon que l'utilisateur est connecté ou non :
import Anonymous from './Anonymous';
import Connecte from './Connecte';
function App(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <Connecte />;
}
return <Anonymous />;
}
export default App;Les trois écritures de l'affichage conditionnel :
Les listes
La méthode map() transforme chaque élément d'un tableau. On peut ainsi construire une collection d'éléments JSX et l'inclure dans le JSX avec les accolades {} :
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);On met tout le tableau listItems dans un <ul> et on l'affiche :
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ul>{listItems}</ul>
);Le navigateur affiche une liste à puces de 1 à 5 (avec un avertissement dans la console : il manque les clés).
Les clés
Les clés aident React à savoir quels éléments d'une liste ont changé, ont été ajoutés ou supprimés. Donne une clé à chaque élément du tableau pour lui donner une identité stable :
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);Le meilleur choix est une valeur qui identifie de façon unique l'élément parmi ses voisins ; le plus souvent, l'id de la donnée :
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);key se met sur l'élément renvoyé par map (le <li> ou le composant <Produit key=…/>), pas à l'intérieur.Ce que tu vas voir (4 min) : le chapitre « Conditions (ternaire) et map » : afficher un élément ou un autre avec le ternaire, puis une liste avec map et une key. Ce sont les sections 2 et 3 de ce chapitre.
Crée l'interface d'une liste de cours en utilisant uniquement styled-components : un en-tête (Header, fond bleu foncé, texte blanc), une grille de cartes (Grille, display: grid), chaque carte (Carte) avec un titre, le nombre d'heures et un bouton « S'inscrire » (Bouton). Les cours viennent d'un tableau ; les cours complets ont un bouton grisé et le texte « Complet » (affichage conditionnel).
const cours = [
{ id: 1, titre: "M204 React", heures: 90, complet: false },
{ id: 2, titre: "M205 Laravel", heures: 90, complet: true },
{ id: 3, titre: "M201 Préparation d'un projet web", heures: 60, complet: false },
];Un composant stylé peut lire ses props dans le CSS : background: ${(props) => (props.$desactive ? "#999" : "#5C5CFF")};. Le $ devant le nom (transient prop, styled-components v6) évite que la prop soit envoyée au HTML.
Réalise le TP de la section 4.
Crée le composant Salutation qui reçoit la prop heure (0 à 23) et affiche « Bonjour » (5 h à 17 h), « Bonsoir » (18 h à 22 h) ou « Bonne nuit » sinon. Écris-le une fois avec if, une fois avec des ternaires.
Avec stagiaires = [{id: 1, nom: "Rami", note: 15}, {id: 2, nom: "Kamali", note: 8}, {id: 3, nom: "Fahmi", note: 12}], affiche un tableau HTML (nom, note, résultat). Le résultat est « Admis » en vert si la note ≥ 10, sinon « Non admis » en rouge. Si le tableau est vide, affiche « Aucun stagiaire ».
Avec &&, si la condition vaut le nombre 0, React affiche « 0 ». {panier.length && <p>…</p>} affiche 0 quand le panier est vide. Écris une vraie condition : {panier.length > 0 && …}.