Comprendre les Composants React

Bienvenue dans cette leçon fondamentale de notre cours "Maîtriser React.js". Si React est souvent décrit comme la "couche V" (pour Vue) du modèle MVC (Modèle-Vue-Contrôleur), c'est parce qu'il excelle dans la création d'interfaces utilisateur interactives et performantes. Au cœur de cette puissance se trouvent les composants.

Dans cette leçon, nous allons explorer en profondeur ce que sont les composants React, pourquoi ils sont essentiels, les différents types, et comment ils interagissent pour construire des applications complexes.

Introduction : Les Composants, Blocs de Construction de l'UI

Imaginez que vous construisiez une maison. Vous n'allez pas créer chaque brique individuellement, mais plutôt assembler des éléments préfabriqués comme des murs, des fenêtres, des portes, etc. De même, en développement web, React vous permet de construire des interfaces utilisateur (UI) complexes en utilisant des "blocs de construction" indépendants et réutilisables, appelés composants.

Chaque composant est une pièce isolée d'interface utilisateur, responsable de sa propre logique et de son apparence. En les combinant, vous pouvez créer n'importe quelle UI, du plus simple bouton à la page web la plus sophistiquée.

Qu'est-ce qu'un Composant React ?

Un composant React est fondamentalement une fonction JavaScript ou une classe JavaScript qui retourne des éléments React (plus précisément du JSX), décrivant ce qui doit apparaître à l'écran. C'est le principe central de React : tout est un composant.

Le rôle fondamental des Composants :

Encapsulation : Chaque composant gère sa propre logique et son propre affichage, ce qui rend le code plus modulaire et facile à comprendre.
Réutilisabilité : Une fois qu'un composant est défini, il peut être utilisé plusieurs fois dans différentes parties de l'application, ou même dans d'autres projets.
Maintenabilité : Si vous devez modifier une partie de votre UI, vous savez exactement quel composant est responsable, ce qui simplifie les mises à jour et la correction de bugs.
Composition : Les composants peuvent être imbriqués les uns dans les autres, permettant de construire des interfaces utilisateur complexes à partir de pièces plus petites et gérables.

Types de Composants

Historiquement, React proposait deux manières de définir des composants : les composants de classe et les composants fonctionnels. Avec l'introduction des Hooks en React 16.8, les composants fonctionnels sont devenus la méthode privilégiée et la plus puissante.

Composants Fonctionnels (Functional Components)

Aussi appelés "composants sans état" avant l'arrivée des Hooks (car ils ne pouvaient pas gérer l'état interne), les composants fonctionnels sont maintenant la norme. Ce sont de simples fonctions JavaScript qui acceptent un objet props comme argument et retournent du JSX.

Avantages : Plus simples à lire et à écrire, plus concis, et souvent plus performants grâce à des optimisations internes.
Utilisation des Hooks : Les Hooks (comme useState, useEffect, useContext, etc.) leur ont donné la capacité de gérer l'état et les effets secondaires, rendant les composants de classe moins nécessaires.

// Exemple de composant fonctionnel
function Salutation(props) {
  return (
    <h1>Bonjour, {props.nom} !</h1>
  );
}

// Utilisation du composant
// <Salutation nom="Alice" />

Composants de Classe (Class Components)

Ce sont des classes ES6 qui étendent React.Component. Ils nécessitent une méthode render() qui retourne du JSX. Avant les Hooks, les composants de classe étaient le seul moyen de gérer l'état interne et d'utiliser les méthodes de cycle de vie.

Avantages : Offraient la gestion de l'état et les méthodes de cycle de vie (avant les Hooks).
Inconvénients : Plus verbeux, utilisation de this qui peut prêter à confusion, et moins performants que les composants fonctionnels avec des optimisations React.

// Exemple de composant de classe
import React from 'react';

class CompteurClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>Vous avez cliqué {this.state.count} fois (Composant de Classe)</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Cliquez-moi
        </button>
      </div>
    );
  }
}

// Utilisation du composant
// <CompteurClass />

Note : Bien que les composants de classe existent toujours, nous nous concentrerons principalement sur les composants fonctionnels et les Hooks pour le reste de cette leçon, car ils représentent l'approche moderne et recommandée en React.

Props : La Communication Parent-Enfant

Les props (abréviation de "properties" – propriétés) sont le mécanisme par lequel les données sont passées d'un composant parent à un composant enfant. Pensez-y comme aux arguments d'une fonction.

Définition et Rôle

Rôle : Les props permettent aux composants d'être configurables et réutilisables. Un composant peut recevoir des données externes via ses props et les utiliser pour personnaliser son rendu ou son comportement.
Flux de données : Les props suivent un flux de données unidirectionnel ("top-down"), c'est-à-dire du composant parent vers le composant enfant. Un composant enfant ne peut pas directement modifier les props qu'il reçoit. Elles sont en lecture seule.

Passer des Props

Vous passez des props à un composant React de la même manière que vous passez des attributs à une balise HTML.

// Composant Parent
function PanierAchat() {
  return (
    <div>
      <h2>Votre Panier</h2>
      <Article nom="Livre" prix={25.99} quantite={2} />
      <Article nom="Clavier" prix={75.00} quantite={1} />
      <Article nom="Souris" prix={15.50} quantite={3} />
    </div>
  );
}

Recevoir des Props

Dans un composant fonctionnel, les props sont reçues comme le premier argument de la fonction.

// Composant Enfant (Article)
function Article(props) {
  // Les props sont accessibles via l'objet 'props'
  const total = props.prix * props.quantite;
  return (
    <div>
      <h3>{props.nom}</h3>
      <p>Prix unitaire : {props.prix}€</p>
      <p>Quantité : {props.quantite}</p>
      <p>Sous-total : {total.toFixed(2)}€</p>
    </div>
  );
}

Dans cet exemple :

Le composant PanierAchat (parent) passe les props nom, prix, et quantite au composant Article (enfant).
Le composant Article reçoit ces props sous forme d'un objet (props) et les utilise pour afficher les informations de chaque article.
Notez que prix et quantite sont passés entre accolades {} car ce sont des valeurs JavaScript (nombres), et non des chaînes de caractères.

State : Gérer les Données Internes et l'Interactivité

Alors que les props permettent la communication entre composants, le state (état) permet à un composant de gérer ses propres données internes et de les modifier au fil du temps en réponse à des interactions utilisateur ou à d'autres événements.

Définition et Rôle

Rôle : Le state rend les composants dynamiques et interactifs. Il représente les données qui peuvent changer au cours de la vie d'un composant, comme la valeur d'un champ de saisie, le fait qu'un menu soit ouvert ou fermé, ou le nombre de fois qu'un bouton a été cliqué.
Localisation : Le state est privé et local au composant qui le détient. D'autres composants ne peuvent pas directement accéder au state d'un autre composant.
Mise à jour : Lorsque le state d'un composant change, React re-rend automatiquement ce composant (et ses enfants affectés) pour refléter la nouvelle interface utilisateur. C'est ce qui rend React "réactif".

`useState` Hook (pour les Composants Fonctionnels)

Pour gérer l'état dans les composants fonctionnels, React fournit le Hook useState.

Utilisation de `useState`

useState est une fonction qui prend un argument : la valeur initiale de l'état. Elle retourne une paire de valeurs :

La valeur actuelle de l'état.
Une fonction pour mettre à jour cette valeur.

import React, { useState } from 'react'; // N'oubliez pas d'importer useState !

function Compteur() {
  // Déclare une nouvelle variable d'état appelée 'count'
  // et une fonction pour la modifier, appelée 'setCount'.
  // La valeur initiale de 'count' est 0.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>
        Cliquez-moi
      </button>
      <button onClick={() => setCount(0)}>
        Réinitialiser
      </button>
    </div>
  );
}

Explication du Code :

import React, { useState } from 'react'; : Nous importons le Hook useState de la bibliothèque React.
const [count, setCount] = useState(0); : C'est la déclaration de l'état.
- count est la variable d'état actuelle. Sa valeur initiale est 0.
- setCount est la fonction que vous appellerez pour mettre à jour count.
<p>Vous avez cliqué {count} fois</p> : Nous utilisons la valeur actuelle de count dans le JSX pour l'affichage.
<button onClick={() => setCount(count + 1)}>Cliquez-moi</button> : Lorsque le bouton est cliqué, la fonction fléchée () => setCount(count + 1) est exécutée.
- setCount(count + 1) appelle la fonction de mise à jour pour incrémenter count de 1.
- Impératif : N'essayez jamais de modifier directement la variable d'état (ex: count = count + 1;). Utilisez toujours la fonction de mise à jour (setCount dans ce cas) fournie par useState. Cela garantit que React détecte le changement et re-rend le composant.
Chaque fois que setCount est appelée, le composant Compteur est re-rendu avec la nouvelle valeur de count.

Le Cycle de Vie des Composants (pour les Composants Fonctionnels avec Hooks)

Chaque composant React passe par différentes phases au cours de son existence :

Montage : Le composant est inséré dans le DOM.
Mise à jour : Le composant est re-rendu à la suite d'un changement de props ou de state.
Démontage : Le composant est retiré du DOM.

Avec les composants fonctionnels, le Hook useEffect est le principal outil pour gérer ces "effets secondaires" ou comportements qui interagissent avec le monde extérieur (appels API, manipulation du DOM, souscriptions à des événements, etc.).

`useEffect` Hook

useEffect prend deux arguments : une fonction qui contient le code de l'effet, et un tableau de dépendances optionnel.

import React, { useState, useEffect } from 'react';

function MonComposantInteractif() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // Effet qui s'exécute une seule fois au montage du composant
  // (comme componentDidMount pour les classes)
  useEffect(() => {
    console.log("Composant monté ! Récupération des données...");
    fetch('https://api.example.com/data') // Exemple d'appel API
      .then(response => response.json())
      .then(json => {
        setData(json);
        setIsLoading(false);
      })
      .catch(error => {
        console.error("Erreur lors de la récupération :", error);
        setIsLoading(false);
      });

    // Fonction de nettoyage (comme componentWillUnmount pour les classes)
    return () => {
      console.log("Composant démonté ! Nettoyage...");
      // Ici, vous pourriez nettoyer des abonnements, des timers, etc.
    };
  }, []); // Le tableau vide [] signifie que l'effet ne s'exécute qu'une fois au montage et au démontage

  // Effet qui s'exécute à chaque mise à jour de 'data'
  // (similaire à componentDidUpdate pour les classes, mais plus ciblé)
  useEffect(() => {
    if (data) {
      console.log("Données mises à jour :", data);
    }
  }, [data]); // L'effet s'exécute si 'data' change

  if (isLoading) {
    return <p>Chargement des données...</p>;
  }

  if (!data) {
    return <p>Aucune donnée disponible.</p>;
  }

  return (
    <div>
      <h2>Données Récupérées :</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Dans cet exemple :

Le premier useEffect avec un tableau de dépendances vide [] s'exécute une seule fois après le rendu initial (montage). Il est utilisé pour les opérations qui ne doivent se produire qu'une seule fois, comme les appels API initiaux. La fonction de nettoyage retournée par cet useEffect s'exécute lorsque le composant est démonté.
Le second useEffect avec [data] comme dépendance s'exécute à chaque fois que la variable data change. Cela est utile pour des effets qui dépendent de l'état ou des props du composant.

Composition de Composants : Le Cœur de React

La vraie puissance de React réside dans la composition de composants. Au lieu de construire une UI monolithique, vous assemblez des composants plus petits et spécialisés pour créer des interfaces complexes.

Principes de la Composition

Composants conteneurs : Gèrent la logique, l'état, et le passage de props aux enfants.
Composants de présentation (ou "dumb components") : Reçoivent des props et se contentent d'afficher l'UI. Ils n'ont généralement pas d'état interne.

Avantages de la Composition

Modularité : Chaque composant est une unité autonome, ce qui facilite la compréhension et la gestion du code.
Réutilisabilité : Les composants peuvent être combinés de différentes manières pour créer diverses interfaces.
Facilité de test : Tester des petites unités isolées est bien plus simple que de tester une grande application d'un seul bloc.
Clarté : Le code est plus lisible car chaque partie a une responsabilité claire.

// Exemple de composition
function PageProfil() {
  const utilisateur = {
    nom: "Jane Doe",
    email: "jane.doe@example.com",
    avatarUrl: "https://via.placeholder.com/150",
    bio: "Développeuse passionnée par React et les nouvelles technologies."
  };

  return (
    <div className="page-profil">
      <EnTete siteNom="Mon App React" /> {/* Composant d'en-tête */}
      <ProfilUtilisateur utilisateur={utilisateur} /> {/* Composant de profil */}
      <PiedDePage droits="Tous droits réservés &copy; 2023" /> {/* Composant de pied de page */}
    </div>
  );
}

function EnTete(props) {
  return (
    <header>
      <h1>{props.siteNom}</h1>
      <nav>...</nav>
    </header>
  );
}

function ProfilUtilisateur(props) {
  const { nom, email, avatarUrl, bio } = props.utilisateur;
  return (
    <section className="profil">
      <img src={avatarUrl} alt={`Avatar de ${nom}`} />
      <h2>{nom}</h2>
      <p>Email: {email}</p>
      <p>{bio}</p>
      <Button modifierProfil={/* une fonction */}>Modifier le profil</Button>
    </section>
  );
}

function Button(props) {
    return <button onClick={props.modifierProfil}>{props.children}</button>;
}

function PiedDePage(props) {
  return (
    <footer>
      <p>{props.droits}</p>
    </footer>
  );
}

Dans cet exemple, la PageProfil ne contient pas directement la logique d'affichage de chaque section. Elle compose plutôt l'interface en utilisant les composants EnTete, ProfilUtilisateur, et PiedDePage, leur passant les données nécessaires via des props. Le composant Button utilise props.children pour afficher le texte entre ses balises.

Conclusion

Les composants sont véritablement l'épine dorsale de toute application React. Les maîtriser est la première étape cruciale pour construire des interfaces utilisateur modernes, maintenables et réactives.

En résumé :

Les composants sont les blocs de construction réutilisables de l'UI.
Les composants fonctionnels avec les Hooks sont la méthode moderne et recommandée pour créer des composants.
Les props sont utilisées pour passer des données du parent à l'enfant ; elles sont en lecture seule.
Le state est utilisé pour gérer les données internes d'un composant et rendre l'UI interactive. Le Hook useState est essentiel pour cela.
Le Hook useEffect permet de gérer les effets secondaires et le cycle de vie dans les composants fonctionnels.
La composition est la clé pour construire des applications complexes à partir de composants plus petits et gérables.

Vous avez maintenant une solide compréhension des bases des composants React. L'étape suivante consiste à pratiquer et à commencer à construire vos propres composants !

Comprendre les Composants React

Introduction : Les Composants, Blocs de Construction de l'UI

Qu'est-ce qu'un Composant React ?

Le rôle fondamental des Composants :

Types de Composants

Composants Fonctionnels (Functional Components)

Composants de Classe (Class Components)

Props : La Communication Parent-Enfant

Définition et Rôle

Passer des Props

Recevoir des Props

State : Gérer les Données Internes et l'Interactivité

Définition et Rôle

useState Hook (pour les Composants Fonctionnels)

Utilisation de useState

Explication du Code :

Le Cycle de Vie des Composants (pour les Composants Fonctionnels avec Hooks)

useEffect Hook

Composition de Composants : Le Cœur de React

Principes de la Composition

Avantages de la Composition

Conclusion

`useState` Hook (pour les Composants Fonctionnels)

Utilisation de `useState`

`useEffect` Hook