Démarrage rapide

Créer et imbriquer des composants

Les applis React sont constituées de composants. Un composant, c’est un bout d’UI (User Interface, donc interface utilisateur) avec son comportement et son apparence propres. Un composant peut être aussi petit qu’un bouton, ou aussi grand qu’une page entière.

Les composants React sont des fonctions JavaScript qui renvoient du balisage :

function MyButton() {
  return (
    <button>Je suis un bouton</button>
  );
}

À présent que vous avez déclaré MyButton, vous pouvez l’imbriquer dans un autre composant :

export default function MyApp() {
  return (
    <div>
      <h1>Bienvenue dans mon appli</h1>
      <MyButton />
    </div>
  );
}

Remarquez que <MyButton /> commence par une majuscule. C’est comme ça que React sait qu’il s’agit d’un composant. Les noms de composants React doivent toujours démarrer par une majuscule, alors que les balises HTML doivent être en minuscules.

Voyons ce que ça donne :

Les mots-clés export default indiquent le composant principal du fichier. Si vous n’êtes pas habitué·e à certains éléments syntaxiques de JavaScript, le MDN et javascript.info sont d’excellentes références.

Écrire du balisage avec JSX

La syntaxe de balisage que vous avez vue ci-avant s’appelle JSX. Elle n’est pas à proprement parler obligatoire, mais la plupart des projets React utilisent JSX par confort. Tous les outils que nous recommandons pour le développement en local prennent en charge JSX d’entrée de jeu.

JSX est plus exigeant que HTML. Vous devez fermer les balises telles que <br />. Par ailleurs, votre composant ne peut pas renvoyer plusieurs balises JSX. Il vous faudrait les enrober dans un parent commun, tel qu’un <div>...</div> ou un Fragment <>...</> vide :

function AboutPage() {
  return (
    <>
      <h1>À propos</h1>
      <p>Bien le bonjour.<br />Comment ça va ?</p>
    </>
  );
}

Si vous avez beaucoup de HTML à migrer vers du JSX, vous pouvez vous aider d’un convertisseur en ligne.

Ajouter des styles

Dans React, vous précisez une classe CSS avec className. Ça fonctionne exactement comme l’attribut class en HTML :

<img className="avatar" />

Ensuite vous écrivez vos règles CSS dans un fichier CSS distinct :

/* Dans votre CSS */
.avatar {
  border-radius: 50%;
}

React n’impose aucune façon particulière de fournir des fichiers CSS. Le cas le plus simple consiste à utiliser une balise <link> dans votre HTML. Si vous utilisez un outil de build ou un framework, consultez sa documentation pour apprendre comment ajouter un fichier CSS à votre projet.

Afficher des données

JSX vous permet de mettre du balisage dans du JavaScript. Les accolades servent à « ressortir » dans JavaScript afin d’injecter une variable ou expression dans votre code et de l’afficher à l’utilisateur. Par exemple, ce code affichera user.name :

return (
  <h1>
    {user.name}
  </h1>
);

Vous pouvez aussi « ressortir dans JavaScript » au sein d’attributs JSX, mais vous devrez utiliser des accolades à la place des guillemets. Par exemple, className="avatar" passe la chaîne "avatar" comme classe CSS, mais src={user.imageUrl} lit d’abord la valeur de l’expression JavaScript user.imageUrl, et ensuite passe cette valeur à l’attribut src :

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

Vous pouvez utiliser des expressions plus complexes au sein des accolades JSX, par exemple de la concaténation de chaînes :

Dans l’exemple ci-avant, style={{}} ne constitue pas une syntaxe spéciale : c’est un littéral objet {} au sein d’accolades JSX style={}. Vous pouvez utiliser l’attribut style lorsque vos styles dépendent de données dans votre code JavaScript.

Affichage conditionnel

Dans React, il n’y a pas de syntaxe spéciale pour écrire des conditions. Au lieu de ça, on utilise les mêmes techniques que pour écrire du code JavaScript normal. Par exemple, vous pouvez utiliser une instruction if pour choisir quel bout de JSX inclure :

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

Si vous préférez un style plus compact, vous pouvez utiliser l’opérateur ternaire conditionnel ?. Contrairement à if, celui-ci marche aussi au sein-même de JSX :

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

Si vous n’avez pas besoin de la branche else, vous pouvez utiliser l’opérateur && logique, plus court :

<div>
  {isLoggedIn && <AdminPanel />}
</div>

Toutes ces façons de faire fonctionnent aussi pour la définition conditionnelle d’attributs. Si certaines de ces syntaxes vous déroutent, vous pouvez toujours commencer par if...else.

Afficher des listes

Pour afficher des listes de composants vous utiliserez principalement la méthode map() des tableaux, et parfois des boucles for.

Par exemple, disons que vous avez un tableau de produits :

const products = [
  { title: 'Chou', id: 1 },
  { title: 'Ail', id: 2 },
  { title: 'Pomme', id: 3 },
];

Dans ce composant, on utilise la méthode map() pour transformer un tableau de produits en tableau d’éléments <li> :

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

Remarquez que <li> a un attribut key. Pour chaque élément d’une liste, vous devriez passer une chaîne de caractères ou un numéro qui l’identifie de façon unique au sein de cette liste. En général, cette clé vient de vos données, par exemple une clé primaire dans la base de données. React utilise ces clés pour comprendre la nature de vos changements : insertion, suppression ou réordonnancement des éléments.

Réagir à des événements

Vous pouvez réagir à des événements en utilisant des gestionnaires d’événements dans vos composants :

function MyButton() {
  function handleClick() {
    alert('Vous avez cliqué !');
  }

  return (
    <button onClick={handleClick}>
      Cliquez ici
    </button>
  );
}

Remarquez que onClick={handleClick} n’a pas de parenthèses à la fin ! Prenez garde de ne pas appeler la fonction de gestion d’événement : vous avez seulement besoin de la transmettre. React appellera votre gestionnaire d’événement lorsque l’utilisateur activera le bouton.

Mettre à jour l’affichage

Le plus souvent, vous voudrez que votre composant « se souvienne » de certaines informations et les affiche. Par exemple, peut-être souhaitez-vous compter le nombre de fois qu’un bouton a été cliqué. Pour cela, il vous faut équiper votre composant d’un état.

Commencez par importer useState depuis React :

import { useState } from 'react';

Servez-vous-en pour déclarer une variable d’état dans votre composant :

function MyButton() {
  const [count, setCount] = useState(0);
  // ...

Un appel à useState vous renvoie deux choses : l’état courant (count), et une fonction pour le mettre à jour (setCount). Vous pouvez leur donner n’importe quels noms, mais la convention largement répandue consiste à écrire [something, setSomething].

La première fois que le bouton est affiché, count est à 0 car vous avez passé 0 à useState(). Lorsque vous souhaitez modifier l’état, appelez setCount() et passez-lui la nouvelle valeur. Cliquer sur ce bouton incrémentera le compteur :

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Cliqué {count} fois
    </button>
  );
}

React appellera à nouveau la fonction de votre composant. Cette fois, count vaudra 1. La fois suivante, ce sera 2. Et ainsi de suite.

Si vous affichez le même composant plusieurs fois, chacun a son propre état. Cliquez les différents boutons séparément :

Voyez comme chaque bouton « se souvient » de son propre état count et n’affecte pas les autres boutons.

Utiliser des Hooks

Les fonctions dont le nom commence par use sont appelées Hooks. useState est un Hook fourni directement par React. Vous pouvez trouver les autres Hooks fournis dans la référence de l’API. Vous pouvez aussi créer vos propres Hooks en combinant ceux existants.

Les Hooks sont plus contraignants que les autres fonctions. Vous pouvez seulement appeler les Hooks au début du code vos composants (ou d’autres Hooks). Si vous voulez utiliser useState dans une condition ou une boucle, extrayez un composant dédié au besoin et mettez le Hook à l’intérieur.

Partager des données entre composants

Dans l’exemple précédent, chaque MyButton avait son propre count indépendant, et lorsqu’un bouton était cliqué, seul le count de ce bouton changeait :

Toutefois, vous aurez régulièrement besoin que vos composants partagent des données et se mettent à jour de façon synchronisée.

Afin que les deux composants MyButton affichent le même count et se mettent à jour ensemble, vous allez devoir déplacer l’état depuis les boutons individuels « vers le haut », vers le plus proche composant qui les contienne tous.

Dans cet exemple, il s’agit de MyApp :

À présent quand vous cliquez l’un ou l’autre bouton, le count de MyApp change, ce qui altère les deux compteurs dans MyButton. Voici comment exprimer la même chose sous forme de code.

Pour commencer, faites remonter l’état de MyButton vers MyApp :

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Des compteurs indépendants</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  // ... on a bougé ce code à partir d’ici ...
}

Ensuite, transmettez l’état vers le bas de MyApp à chaque MyButton, ainsi que le gestionnaire partagé de clics. Vous pouvez passer ces informations à MyButton au moyen d’accolades JSX, comme nous le faisions précédemment pour des balises natives comme <img> :

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Des compteurs synchronisés</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

Les informations ainsi transmises vers le bas s’appellent des props. Désormais, le composant MyApp contient l’état state et le gestionnaire d’événement handleClick, et passe ces deux informations comme props à chacun des boutons.

Pour finir, modifiez MyButton pour lire les props que le composant parent lui a passées :

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Cliqué {count} fois
    </button>
  );
}

Lorsque vous cliquez un bouton, le gestionnaire onClick est déclenché. La prop onClick de chaque bouton utilise la fonction handleClick issue de MyApp, c’est donc ce code-là qui s’exécute. Le code appelle setCount(count + 1), incrémentant la variable d’état count. La nouvelle valeur count est passée comme prop à chaque bouton, de sorte qu’ils affichent tous cette nouvelle valeur. C’est ce qu’on appelle « faire remonter l’état » (“lifting state up”, NdT). En déplaçant l’état vers le haut, nos composants peuvent le partager.

Et maintenant ?

Bravo, vous connaissez désormais les bas de l’écriture de code React !

Allez donc découvrir notre tutoriel pour mettre tout ça en pratique et construire votre première petite appli avec React.