État React avec Hooks

Introduction

Dans React, le terme "state" (état) désigne les données qui peuvent changer au fil du temps au sein d'un composant. Lorsqu'un composant voit son état changer, React re-rend automatiquement le composant pour refléter le nouvel état. Les Hooks sont des fonctions qui vous permettent de "vous connecter" aux fonctionnalités d'état et de cycle de vie de React à partir des composants fonctionnels.

Dans ce laboratoire, vous apprendrez à utiliser l'un des Hooks les plus fondamentaux, useState, pour gérer l'état dans un composant fonctionnel React. Nous allons construire une application de compteur simple pour démontrer comment initialiser, afficher et mettre à jour l'état en réponse à une interaction utilisateur.

Importer useState depuis react dans le fichier du composant

Tout d'abord, préparons notre environnement de développement. Le script d'installation a déjà créé un nouveau projet React pour vous à l'emplacement ~/project/my-app en utilisant Vite.

Votre première tâche consiste à installer les dépendances nécessaires et à démarrer le serveur de développement. Ouvrez un terminal dans l'IDE Web et exécutez les commandes suivantes une par une.

Naviguez dans le répertoire de votre projet :

cd my-app

Installez les dépendances du projet :

npm install

Démarrez le serveur de développement :

npm run dev -- --host 0.0.0.0 --port 8080

Après avoir exécuté la dernière commande, vous verrez une sortie indiquant que le serveur est en cours d'exécution. Vous pouvez maintenant visualiser votre application en direct en cliquant sur l'onglet "Web 8080" dans l'interface LabEx. Tout au long de ce laboratoire, nous modifierons le fichier ~/project/my-app/src/App.jsx.

Dans cette étape, nous allons commencer par importer le Hook useState de la bibliothèque React. Les Hooks sont des fonctions spéciales, et pour les utiliser, vous devez d'abord les importer du package react.

En utilisant l'explorateur de fichiers dans l'IDE Web, naviguez et ouvrez le fichier ~/project/my-app/src/App.jsx.

Tout d'abord, nettoyons le contenu par défaut pour avoir un point de départ minimal. Remplacez tout le contenu de App.jsx par le code suivant :

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Maintenant, ajoutez l'instruction d'importation tout en haut du fichier pour rendre le Hook useState disponible dans notre composant.

import { useState } from "react";

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Cette ligne indique à JavaScript que nous voulons utiliser la fonction useState, qui est une exportation nommée de la bibliothèque 'react'.

Initialiser l'état avec const [count, setCount] = useState(0)

Dans cette étape, nous allons appeler le Hook useState pour créer une nouvelle pièce d'état dans notre composant.

La fonction useState prend un argument : la valeur initiale de l'état. Elle renvoie un tableau contenant deux éléments :

1. La valeur actuelle de l'état.
2. Une fonction qui vous permet de mettre à jour l'état.

Nous utilisons une syntaxe appelée "déstructuration de tableau" pour obtenir ces deux valeurs dans des variables distinctes. Il est de coutume de nommer ces variables comme [quelquechose, setQuelquechose].

À l'intérieur de la fonction du composant App, avant l'instruction return, ajoutez la ligne suivante pour initialiser notre état. Nous nommerons notre variable d'état count et lui donnerons la valeur initiale de 0.

Mettez à jour votre fichier ~/project/my-app/src/App.jsx avec le code suivant :

import { useState } from "react";

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

  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Maintenant, notre composant possède une pièce d'état nommée count qui est initialisée à 0, et une fonction setCount que nous pouvons utiliser pour modifier sa valeur plus tard.

Afficher la valeur de l'état dans JSX avec {count}

Dans cette étape, nous allons afficher la valeur actuelle de notre variable d'état count dans l'interface utilisateur.

En JSX, vous pouvez intégrer n'importe quelle expression JavaScript valide directement dans votre balisage en l'entourant d'accolades {}. Cela nous permet de rendre des données dynamiques, comme notre variable d'état.

Ajoutons une balise de paragraphe <p> pour afficher un message incluant la valeur actuelle de count.

Modifiez le JSX à l'intérieur de l'instruction return dans ~/project/my-app/src/App.jsx :

import { useState } from "react";

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

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

Après avoir enregistré le fichier, basculez vers l'onglet "Web 8080". Vous devriez voir le texte "The current count is: 0" affiché sur la page, confirmant que notre valeur d'état initiale est correctement rendue.

Mettre à jour l'état avec setCount(count + 1)

Dans cette étape, nous allons définir la logique pour mettre à jour notre état. Il est important de se rappeler que vous ne devez jamais modifier l'état directement (par exemple, count = count + 1). Au lieu de cela, vous devez toujours utiliser la fonction de mise à jour de l'état fournie par useState, qui dans notre cas est setCount.

Appeler la fonction de mise à jour indique à React que l'état a changé. React planifiera alors un nouveau rendu du composant avec la nouvelle valeur de l'état.

Créons une fonction simple à l'intérieur de notre composant App qui gérera la logique d'incrémentation du compteur. Nous appellerons cette fonction incrementCount.

Ajoutez la fonction incrementCount à votre fichier ~/project/my-app/src/App.jsx :

import { useState } from "react";

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

Cette fonction, lorsqu'elle sera appelée, prendra la valeur actuelle de count, y ajoutera 1, puis passera la nouvelle valeur à setCount. Cela déclenchera un nouveau rendu du composant App.

Déclencher la mise à jour lors de l'événement de clic sur un bouton

Dans cette dernière étape, nous allons connecter notre logique de mise à jour de l'état à une action utilisateur. Nous allons ajouter un bouton à notre composant, et lorsque l'utilisateur cliquera dessus, nous appellerons la fonction incrementCount que nous avons créée à l'étape précédente.

Dans React, vous pouvez gérer des événements comme les clics en fournissant une fonction à des attributs spéciaux comme onClick.

Ajoutons un élément <button> à notre JSX et définissons son gestionnaire onClick sur notre fonction incrementCount.

Mettez à jour votre fichier ~/project/my-app/src/App.jsx avec le code final :

import { useState } from "react";

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </>
  );
}

export default App;

Notez que nous passons la fonction elle-même (incrementCount) à onClick, et non le résultat de son appel (incrementCount()). React invoquera cette fonction pour nous chaque fois que le bouton sera cliqué.

Maintenant, allez dans l'onglet "Web 8080". Vous devriez voir le bouton "Increment". Cliquez dessus et regardez le compteur à l'écran augmenter à chaque clic !

Résumé

Félicitations ! Vous avez construit avec succès un composant React avec état en utilisant le Hook useState.

Dans ce laboratoire, vous avez appris les principes fondamentaux de la gestion de l'état dans React moderne :

• Ce qu'est l'"état" dans un composant React et pourquoi il est essentiel pour créer des interfaces utilisateur interactives.
• Comment importer le Hook useState depuis la bibliothèque react.
• Comment initialiser une partie de l'état en appelant useState avec une valeur initiale.
• Comment utiliser la déstructuration de tableau pour obtenir la variable d'état et la fonction de mise à jour de l'état.
• Comment afficher la variable d'état dans votre JSX en utilisant des accolades {}.
• Comment mettre à jour l'état en réponse à un événement utilisateur (comme un clic sur un bouton) en appelant la fonction de mise à jour.

Comprendre le Hook useState est une première étape essentielle pour maîtriser React. Vous pouvez maintenant utiliser ce modèle pour ajouter un comportement dynamique et interactif à vos propres composants React.