Le paradigme React

On a vu avec les exercices précédents que manipuler le dom manuellement crée un code difficile à maintenir. On a aussi vu que les web components isolent bien le visuel, mais rendent le partage de la donnée très complexe avec les événements personnalisés.

C'est là que React intervient en changeant totalement la donne. On abandonne l'approche impérative pour passer à une approche déclarative.

Le concept de base de React se résume par cette formule : UI = f(state). L'interface utilisateur est simplement la représentation visuelle de votre donnée (le state) à un instant précis.

On ne sélectionne plus d'éléments html pour les modifier à la main. On déclare un état, et on décrit à quoi doit ressembler le composant en fonction de cet état. React s'occupe de faire les modifications dans le dom pour nous.

 import { useState } from 'react';

 export default function Counter() {
  const [count, setCount] = useState(0);

  return (
   <button onClick={() => setCount(count + 1)}>
    cliqué {count} fois
   </button>
  );
 }

L'autre grande force de React, c'est la communication entre les composants. Au lieu d'utiliser des événements complexes pour faire remonter de l'information comme on l'a fait avec le shadow dom, React utilise un flux de données unidirectionnel (de haut en bas).

On passe simplement les données, ou même des fonctions, directement à travers les props des composants enfants.

Exercice

Pour clore cette introduction, vous allez recréer exactement le même mini-panier, mais avec l'approche déclarative de React.
Vous allez voir à quel point la synchronisation des données devient naturelle quand l'outil gère le dom pour nous.

Dans cet exercice, vous devrez :

• créer un composant parent App qui détient l'état global du panier (cartCount)
• créer un composant enfant ProductCard qui reçoit une fonction onAddToCart via ses props
• gérer l'état local du stock (limite de 5 clics maximum) directement dans le composant ProductCard avec un useState
• afficher conditionnellement le message "stock épuisé" et désactiver le bouton de manière purement déclarative (sans jamais toucher directement au dom)

Aujourd'hui, le vrai défi pour un développeur front-end n'est plus d'afficher de la donnée, mais de structurer intelligemment ses fichiers, ses composants et ses états globaux. C'est ce qu'on va voir dans le prochain chapitre avec l'architecture.