Bases de React : interactivité et état

State est le moyen intégré de React de stocker des données qui changent au fil du temps. Lorsque ces données changent, React restitue automatiquement le composant pour refléter les nouvelles valeurs.

L’une des principales raisons pour lesquelles React est devenu si populaire est sa capacité à créer des interfaces utilisateur hautement interactives. Les utilisateurs modernes s’attendent à un retour instantané, qu’ils cliquent sur un bouton, saisissent un formulaire ou activent un menu. Au cœur de cette interactivité se trouve État.

Dans cet article, nous explorerons ce qu’est l’état, comment il fonctionne et comment il donne vie à vos composants React, à l’aide d’une démo pratique de l’application Todo classique. Puisque cet article fait partie de notre Les bases de React série, nous simplifierons le concept autant que possible. Considérez-le comme la base de votre parcours d’apprentissage React.

Interactivité avec l’État

L’interactivité signifie simplement que votre application répond lorsque les utilisateurs effectuent une action. Une page statique affiche uniquement des informations, mais une application interactive réagit. Par exemple:

• Un bouton qui compte combien de fois il a été cliqué
• Un formulaire qui montre ce que vous tapez en temps réel
• Une application de tâches qui vous permet d’ajouter et de cocher des tâches

React simplifie ce type de comportement dynamique en permettant aux composants de gérer leurs propres données via l’état.

State est le moyen intégré de React de stocker des données qui changent au fil du temps. Lorsque ces données changent, React restitue automatiquement le composant pour refléter les nouvelles valeurs.

Il est important de comprendre la différence entre les accessoires et l’état :

• Accessoires: Données externes passées dans un composant (lecture seule)
• État: Données internes qu’un composant gère lui-même (peuvent changer)

Si les accessoires sont comme les arguments que vous transmettez à une fonction, l’état est comme les propres variables locales de la fonction.

Présentation de useState

React fournit le useState hook pour ajouter un état à vos composants.

Par exemple:

import { useState } from "react";
function Counter() { 
     const [count, setCount] = useState(0);
     return ( 
          <div> 
               <p>You clicked {count} times</p> 
               <button onClick={() => setCount(count + 1)}>Click Me</button>
          </div> 
    ); 
}

Voici ce qui se passe :

• count est la valeur de l’état actuel.
• setCount est la fonction utilisée pour le mettre à jour.

Chaque fois que vous cliquez sur le bouton, setCount augmente la valeur et React restitue le composant.

Quelques éléments clés à retenir :

• Les mises à jour d’état peuvent être asynchrones.
• Ne modifiez jamais l’état directement (évitez de faire count++).
• Utilisez la fonction updater lorsque la nouvelle valeur dépend de la précédente : setCount(prev => prev + 1).

Lorsque l’état change, React ne le mute pas directement : il crée un nouvelle valeur et les rendus, gardant les mises à jour de l’interface utilisateur prévisibles.

Exemple concret : créer une application Todo

Certaines parties d’une interface utilisateur doivent être modifiées en réponse aux actions de l’utilisateur. Par exemple, lorsqu’un utilisateur bascule entre les tâches actives et terminées dans une application de tâches, l’interface doit être mise à jour en conséquence.

Dans React, ce type de données dynamiques est géré avec état. Vous pouvez ajouter un état à n’importe quel composant et le mettre à jour chaque fois que nécessaire. Dans cette section, nous explorerons comment créer des composants qui gèrent les interactions des utilisateurs, gèrent leur état et restituent différentes sorties à mesure que cet état évolue.

Tout ce que vous apprendrez dans cette section constitue la base de presque tous les composants ou applications React que vous créerez.

Voici une maquette rapide de ce que nous allons construire :

Et voici le lien vers la démo complète du code : https://codesandbox.io/p/sandbox/todo-app-in-react-q9qxm5.

Pour suivre, ayez Noeud.js installé. Si vous êtes nouveau sur React, n’hésitez pas à consulter Notions de base de React : Premiers pas avec React et Visual Studio Code. Alternativement, vous pouvez créer ceci Réagir CodeSandbox passe-partoutque j’utiliserai tout au long du didacticiel.

Cool? Allons-y.

État en tant que mémoire d’un composant

Les composants doivent souvent mettre à jour ce qui est affiché à l’écran après qu’un utilisateur interagit avec eux. Par exemple, taper dans un formulaire devrait mettre à jour le champ de saisie, cliquer sur le bouton Modifier dans une application de tâches devrait modifier le tdo et cliquer sur Acheter devrait ajouter un produit au panier. Pour rendre cela possible, les composants ont besoin d’un moyen de « se souvenir » d’éléments tels que la valeur d’entrée actuelle, la tâche modifiée ou les éléments du panier. Dans React, cette mémoire intégrée est appelée état.

Vous pouvez ajouter un état à un composant à l’aide de l’outil useState crochet. Les hooks sont des fonctions spéciales qui permettent aux composants d’utiliser les fonctionnalités de React, et useState est celui qui gère l’État. Lorsque vous l’appelez, vous lui donnez une valeur initiale et il renvoie deux choses : la valeur de l’état actuel et une fonction pour mettre à jour cette valeur.

Commençons donc par créer les composants de notre application Todo et les rendre interactifs avec l’état. Cependant, avant cela, assurez-vous de copier le styles.css fichier du fichier de démonstration de code dans votre propre projet.

Ouvrez votre App.js et ajoutez le code suivant :

import "./styles.css";
import { useState } from "react";
import TodoForm from "./components/TodoForm";
import Todo from "./components/Todo";

let nextId = 3;
const initialTodos = [
  { id: 0, title: "Write React Write", done: true },
  { id: 1, title: "Edit React Articles", done: false },
  { id: 2, title: "Submit React Articles", done: false },
];

export default function App() {
  const [todos, setTodos] = useState(initialTodos);
  function handleAddTodo(title) {
    setTodos([
      ...todos,
      {
        id: nextId++,
        title: title,
        done: false,
      },
    ]);
  }

  function handleChangeTodo(nextTodo) {
    setTodos(
      todos.map((t) => {
        if (t.id === nextTodo.id) {
          return nextTodo;
        } else {
          return t;
        }
      })
    );
  }

 function handleDeleteTodo(todoId) {
    setTodos(todos.filter((t) => t.id !== todoId));
  }
`
  const todoList = todos.map((todo) => (
    <li className="todo stack-small">
      <Todo
        id={todo.id}
        todo={todo}
        name={todo.title}
        key={todo.id}
        onChangeTodo={handleChangeTodo}
        onDeleteTodo={handleDeleteTodo}
      />
    </li>
  ));
  return (
    <div className="todoapp stack-large">
      <h1 className="header">Todo App</h1>
      <TodoForm onAddTodo={handleAddTodo} />
      <h2 id="list-heading">{todos.length} tasks remaining</h2>
      <ul
        aria-labelledby="list-heading"
        className="todo-list stack-large stack-exception"
        role="list"
      >
        {todoList}
      </ul>
    </div>
  );
}

Dans la démonstration de code ci-dessus, nous avons créé notre composant parent d’application Todo, qui est le composant parent qui héberge tous les autres composants et sous-composants de notre application. Ensuite, nous avons créé une maquette de initialTodos données. Après cela, nous mettons en place notre premier élément d’état, qui est l’état de toutes les tâches :

const [todos, setTodos] = useState(initialTodos);

Après cela, nous avons ajouté quelques fonctions pour gérer les interactions des utilisateurs :handleAddTodo, handleChangeTodo et handleDeleteTodo. Chacun met à jour le todos état en utilisant setTodosqui déclenche automatiquement un rendu afin que l’interface utilisateur reflète toujours les dernières données.

Ensuite, nous avons créé un todoList variable qui mappe sur le todos tableau et renvoie une liste de composants Todo individuels. Enfin, nous avons rendu l’application afin que les utilisateurs puissent interagir avec elle en temps réel.

Avec cet exemple, vous pouvez voir comment nous utilisons useState pour notre état de Todos et comment nous mettons à jour l’état de Todos avec toutes les fonctionnalités lorsque l’interaction de l’utilisateur se produit avec setTodos.

Répondre aux événements

Dans React, vous attachez des gestionnaires d’événements directement à JSX. Les gestionnaires d’événements sont simplement des fonctions qui s’exécutent lorsqu’un utilisateur interagit avec des événements : en cliquant sur un bouton, en saisissant une entrée ou en focalisant un champ de formulaire.

Des éléments intégrés comme <button> travailler avec des événements de navigateur standard tels que onClick. Mais lorsque vous créez vos propres composants, vous pouvez définir des accessoires d’événement personnalisés avec les noms qui conviennent à votre application.

Créons ensuite les composants restants, en commençant par le TodoForm.js composants, qui accepte les nouvelles entrées de tâches de l’utilisateur et les ajoute à la liste de tâches.

export default function TodoForm({ onAddTodo }) {
  const [title, setTitle] = useState("");
  const handleSubmit = (e) => {
    e.preventDefault(); 
    if (!title.trim()) return; 
    onAddTodo(title);
    setTitle("");
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        id="new-todo-input"
        placeholder="What needs to be done?"
        className="input input__lg"
        name="text"
        autoComplete="off"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <button type="submit" className="btn btn__primary btn__lg">
        Add
      </button>
    </form>
  );
}

Dans TodoForm.jsnous utilisons useState à nouveau pour définir l’état de la nouvelle tâche ajoutée par l’utilisateur :

const [title, setTitle] = useState("");

Ici, nous utilisons useState pour gérer la valeur d’entrée. Lorsque l’utilisateur soumet le formulaire, handleSubmit empêche le rechargement de la page par défaut, ajoute la nouvelle tâche via onAddTodoet efface le champ de saisie.

Ce modèle simple—état + événements-est l’épine dorsale de l’interactivité dans React.

Ensuite, nous appliquerons la même approche pour rendre les autres composants interactifs. Commençons par créer le Todo composant utilisé dans notre App composant.

Ajoutez le code suivant :

import { useState } from "react";
export default function Todo({ id, name, todo, onChangeTodo, onDeleteTodo }) {

  const [isEditing, setEditing] = useState(false);

  let todoTemplate;

  if (isEditing) {
    todoTemplate = (
      <>
        <input
          id={id}
          value={todo.title}
          onChange={(e) => {
            onChangeTodo({
              ...todo,
              title: e.target.value,
            });
          }}
        />
        <button type="button" className="btn" onClick={() => setEditing(false)}>
          Save
        </button>
      </>
    );
  } else {
    todoTemplate = (
      <>
        {todo.title}
        <button type="button" className="btn" onClick={() => setEditing(true)}>
          Edit
        </button>
      </>
    );
  }
  return (
    <>
      <div>
        <label>
          <input
            type="checkbox"
            className="check"
            checked={todo.done}
            onChange={(e) => {
              onChangeTodo({
                ...todo,
                done: e.target.checked,
              });
            }}
          />
          {todoTemplate}
          <button
            type="button"
            className="btn btn__danger"
            onClick={() => onDeleteTodo(todo.id)}
          >
            Delete
          </button>
        </label>
      </div>
    </>
  );
}

Dans le Tous composant, nous utilisons le isEditing état pour basculer entre voir et modifier mode.

const [isEditing, setEditing] = useState(false);

Nous répondons également aux interactions des utilisateurs à l’aide de gestionnaires d’événements transmis depuis le composant parent :onChangeTodo et onDeleteTodo.

Désormais, notre application todo fonctionne parfaitement. Un utilisateur peut facilement ajouter une tâche, vérifier une tâche, modifier une tâche et également supprimer une tâche. Comme défi, essayez d’ajouter un filtre fonctionnalité (par exemple, afficher les tâches « Tous », « Actif » ou « Terminé »). La solution est déjà dans le code source de la démo sur CodeSandbox, mais je vous recommande de l’implémenter d’abord vous-même pour renforcer tout ce que vous avez appris.

Conclusion

L’état est l’un des concepts les plus fondamentaux de React. C’est ce qui donne vie à vos composants, leur permettant de réagir, de se mettre à jour et de refléter les actions des utilisateurs en temps réel.

Dans ce didacticiel, vous avez appris à :

• Comprenez la différence entre les accessoires et l’état.
• Utilisez le useState hook pour ajouter un état aux composants.
• Répondez aux interactions des utilisateurs via des gestionnaires d’événements.
• Gérez les données dynamiques et les mises à jour dans un exemple d’application de tâches réelle.

Chaque fois qu’un utilisateur ajoute, modifie ou supprime une tâche, React restitue l’interface utilisateur en fonction du dernier état, et c’est la magie derrière l’interactivité de React.

Vous disposez désormais d’une base solide pour comprendre comment l’état détermine les applications React. Ensuite, vous pouvez explorer des concepts plus avancés tels que état dérivé, élever l’étatet gérer l’état global avec des outils tels que API de contexte, MobX ou Redux.

Nous avons couvert la plupart de ces sujets en détail sur le blog, et vous les trouverez ci-dessous dans le Lectures complémentaires pour continuer votre parcours d’apprentissage React.

Lectures complémentaires