React : Les composants

Le composant est l'unité de base de React. Si tu comprends vraiment ce qu'est un composant, tu comprends une grande partie du framework. On décortique, dans la continuité de l'introduction.

# Un composant = une fonction

En React moderne, un composant est simplement une fonction JavaScript qui retourne du JSX (l'interface à afficher).

function Bonjour() {
  return <h1>Bonjour !</h1>;
}

function Bonjour() {

  return <h1>Bonjour !</h1>;

}

Deux règles à respecter :

• Le nom commence par une majuscule (Bonjour, pas bonjour) : c'est comme ça que React distingue un composant d'une balise HTML classique.
• Il retourne un seul élément racine (quitte à tout envelopper dans un <div> ou un fragment <>...</>).

On l'utilise ensuite comme une balise :

<Bonjour />

<Bonjour />

# JSX : du HTML dans du JavaScript

Le return <h1>...</h1> n'est ni du HTML ni une chaîne de caractères : c'est du JSX, une syntaxe qui permet d'écrire ton interface directement dans ton JavaScript. Sous le capot, c'est transformé en appels de fonctions.

Quelques différences avec le HTML :

Les accolades {} permettent d'insérer n'importe quelle expression JavaScript :

const nom = "Baptiste";
return <p>Bonjour {nom}, il est {new Date().getHours()}h.</p>;

const nom = "Baptiste";

return <p>Bonjour {nom}, il est {new Date().getHours()}h.</p>;

# Les props : passer des données

Un composant réutilisable doit pouvoir s'adapter. C'est le rôle des props (properties) : des paramètres qu'on passe au composant, exactement comme des arguments de fonction.

function Salutation({ nom }) {
  return <h1>Bonjour {nom} !</h1>;
}

// Utilisation
<Salutation nom="Baptiste" />
<Salutation nom="Stefano" />

function Salutation({ nom }) {

  return <h1>Bonjour {nom} !</h1>;

}

// Utilisation

<Salutation nom="Baptiste" />

<Salutation nom="Stefano" />

Règle d'or : les props sont en lecture seule. Un composant ne modifie jamais ses props, il les reçoit et les affiche. Pour des données qui évoluent dans le temps, ce sera le state (note suivante).

# La composition

La force de React, c'est d'assembler les composants entre eux. Un composant peut en contenir d'autres et recevoir du contenu via la prop spéciale children :

function Carte({ children }) {
  return <div className="carte">{children}</div>;
}

// Utilisation
<Carte>
  <h2>Titre</h2>
  <p>Contenu de la carte</p>
</Carte>

function Carte({ children }) {

  return <div className="carte">{children}</div>;

}

// Utilisation

<Carte>

  <h2>Titre</h2>

  <p>Contenu de la carte</p>

</Carte>

Plutôt que l'héritage (comme en POO), React privilégie la composition : on emboîte de petits composants pour en construire de plus gros.

# Rendre une liste

Pour afficher une liste, on transforme un tableau en JSX avec .map(). Chaque élément doit porter une prop key unique : c'est ce qui permet à React de suivre les éléments efficacement.

function ListeProjets({ projets }) {
  return (
    <ul>
      {projets.map((projet) => (
        <li key={projet.id}>{projet.titre}</li>
      ))}
    </ul>
  );
}

function ListeProjets({ projets }) {

  return (

    <ul>

      {projets.map((projet) => (

        <li key={projet.id}>{projet.titre}</li>

      ))}

    </ul>

  );

}

# À retenir

• Un composant = une fonction qui retourne du JSX, nommée avec une majuscule.
• Le JSX mélange balisage et JavaScript grâce aux accolades {}.
• Les props passent des données du parent vers l'enfant, en lecture seule.
• On construit des interfaces complexes par composition de petits composants.

Prochaine étape : donner de la mémoire et de l'interactivité à nos composants avec le state et les hooks.