Tutoriel React — Chapitre 5

Plan du chapitre

• 1) Pourquoi ES6 est partout dans React
• 2) Destructuring (objets et tableaux)
• 3) Spread / Rest (...) : copier, fusionner, récupérer
• 4) Template literals (backticks) : écrire du texte dynamique
• 5) Conditions modernes : ternaire et &&
• 6) map / filter : travailler avec des listes (indispensable)
• 7) L’idée d’immutabilité (très importante en React)
• 8) Résumé (à retenir)
• 9) Exercice pratique (débutant)

1) Pourquoi ES6 est partout dans React

React manipule beaucoup de données : props, state, objets d’utilisateur, listes d’éléments, résultats d’API, etc. Le JavaScript moderne aide à :

• écrire moins de code (plus lisible)
• éviter des erreurs (copie propre d’objets/tableaux)
• manipuler facilement les listes (affichage dynamique)

2) Destructuring (objets et tableaux)

Le destructuring permet de “déballer” un objet ou un tableau dans des variables. Dans React, vous le verrez notamment :

• dans les props : function Card({ title, price }) { ... }
• dans useState : const [value, setValue] = useState(0)

A) Destructuring d’objet

const user = { name: "Alice", age: 30, city: "Paris" };

const name = user.name;
const age = user.age;

// Version moderne (destructuring)
const { name: n, age: a } = user; // on peut renommer
// n = "Alice", a = 30

Variante la plus courante (sans renommer) :

const { name, age } = user; // name="Alice", age=30

B) Valeurs par défaut (très utile)

const user2 = { name: "Bob" };

const { name, city = "Inconnue" } = user2;
// city vaut "Inconnue" car user2.city n'existe pas

C) Destructuring de tableau

const numbers = [10, 20, 30];

const first = numbers[0];
const second = numbers[1];

// Version moderne
const [a1, a2] = numbers; // a1=10, a2=20

3) Spread / Rest (...) : copier, fusionner, récupérer

Le même symbole ... sert à deux choses différentes selon le contexte :

• Spread : “étaler” pour copier ou fusionner
• Rest : “récupérer le reste” dans une variable

A) Spread avec les tableaux (copier)

const original = [1, 2, 3];
const copie = [...original]; // nouvelle liste
copie.push(4);

// original reste [1,2,3]
// copie devient [1,2,3,4]

B) Spread avec les tableaux (fusionner)

const a = ["A", "B"];
const b = ["C", "D"];
const all = [...a, ...b]; // ["A","B","C","D"]

C) Spread avec les objets (copier / modifier)

const user = { name: "Alice", age: 30 };

// Copie + modification d'un champ
const updated = { ...user, age: 31 };

// user reste inchangé

D) Rest : récupérer “le reste”

const user = { name: "Alice", age: 30, city: "Paris" };

const { name, ...rest } = user;
// name = "Alice"
// rest = { age: 30, city: "Paris" }

4) Template literals (backticks) : écrire du texte dynamique

Les template literals utilisent les backticks ` (accent grave) et permettent d’insérer une valeur avec ${...}.

const name = "Alice";
const message = `Bonjour ${name} !`;

C’est très pratique pour créer des chaînes lisibles (messages, classes CSS, URLs, etc.).

5) Conditions modernes : ternaire et &&

En React, vous affichez souvent quelque chose selon une condition (chargement, erreur, connecté / non connecté). Deux syntaxes reviennent tout le temps.

A) L’opérateur ternaire

const isLoggedIn = true;

const text = isLoggedIn ? "Bienvenue" : "Veuillez vous connecter";

Dans du JSX, on l’utilise souvent pour afficher l’un ou l’autre élément.

B) Le “ET logique” (&&) pour afficher si vrai

const hasMessage = false;

if (hasMessage) {
  console.log("Vous avez un message");
}

// Version courte
hasMessage && console.log("Vous avez un message");

6) map / filter : travailler avec des listes (indispensable)

React affiche très souvent des listes (produits, utilisateurs, messages…). En JavaScript moderne, on utilise map et filter.

A) map : transformer chaque élément

map crée un nouveau tableau en transformant chaque élément.

const numbers = [1, 2, 3];

const doubled = numbers.map((n) => n * 2);
// doubled = [2, 4, 6]

B) filter : garder seulement certains éléments

const numbers = [1, 2, 3, 4, 5];

const even = numbers.filter((n) => n % 2 === 0);
// even = [2, 4]

C) Exemple “réaliste” avec une liste d’objets

const users = [
  { id: 1, name: "Alice", active: true },
  { id: 2, name: "Bob", active: false },
  { id: 3, name: "Chloé", active: true }
];

const activeUsers = users.filter((u) => u.active);
const names = activeUsers.map((u) => u.name);
// names = ["Alice", "Chloé"]

7) L’idée d’immutabilité (très importante en React)

En React, une règle pro revient sans arrêt : on évite de modifier directement un objet ou un tableau existant. On préfère créer une nouvelle copie avec les changements.

Pourquoi ? (explication simple)

React détecte les changements plus facilement quand on remplace une valeur par une nouvelle référence (nouvel objet / nouveau tableau). Si vous modifiez “à l’intérieur” du même objet, c’est plus difficile à suivre.

Mauvaise pratique (mutation)

const user = { name: "Alice", age: 30 };
user.age = 31; // on modifie l'objet existant

Bonne pratique (copie)

const user = { name: "Alice", age: 30 };
const updated = { ...user, age: 31 }; // nouvel objet

Tableau : ajouter un élément

const items = ["A", "B"];

// Mauvais (modifie le tableau)
items.push("C");

// Bon (crée un nouveau tableau)
const newItems = [...items, "C"];

8) Résumé (à retenir)

• Destructuring : extraire des valeurs d’objets/tableaux rapidement.
• Spread/Rest : copier/fusionner et récupérer le “reste”.
• Template literals : écrire des textes dynamiques lisibles.
• Ternaire et && : conditions courantes en JSX.
• map/filter : base pour afficher et filtrer des listes.
• Immutabilité : ne pas modifier directement, créer une copie.

9) Exercice pratique (débutant)

Faites ces mini-exercices. Le but est d’être à l’aise avec la lecture/écriture du JS moderne.

Exercice A — Destructuring

À partir de cet objet, récupérez title et price en destructuring.

const product = { title: "Clavier", price: 49, stock: 12 };

Exercice B — Immutabilité

Créez un nouvel objet où stock passe à 11 (sans modifier l’objet original).

Exercice C — map / filter

À partir du tableau ci-dessous, gardez seulement les actifs puis récupérez leurs noms.

const users = [
  { id: 1, name: "Alice", active: true },
  { id: 2, name: "Bob", active: false },
  { id: 3, name: "Chloé", active: true }
];