Pourquoi 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 complexe avec les custom events.

React permet de 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 en front c'est plus vraiment d'afficher de la donnée, mais de structurer ses fichiers, ses composants et ses états globaux de manière à ce que le code soit clair et maintenable.
C'est ce qu'on va voir tout au long de ce cours.