Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

3. Présentation d’un state

Alors, qu’est-ce qu’un state (ou « état »), et à quoi cela peut bien servir ? Je vous propose de repartir de notre composant App.tsx initial :

import React, { FunctionComponent } from 'react';

const App: FunctionComponent = () => {
  const name: string = "React";

  return (
    <h1>Hello, {name} !</h1>
  );
}

export default App;

En fait, dans ce composant en apparence très simple, il y a une petite amélioration possible. On pourrait utiliser un state à la ligne 4, plutôt que de simplement déclarer une constante.

Et pourquoi on voudrait faire ça ?

Et bien, comme son nom l’indique, une constante est une valeur qui ne peut pas changer dans le temps, contrairement à un state. Dans notre exemple simpliste, on aurait pu directement écrire « React » dans le code JSX. Mais dans la « vraie » vie, vous aurez par exemple une liste d’éléments disponible au niveau de votre composant, et cette liste pourra être modifiée dans le temps : ajout d’un nouvel élément, suppression, etc.

De plus, un state est une donnée privée d’un composant React qui permet de sauvegarder l’état des données de ce composant, et qui est un système spécifique mis en place par React pour gérer ce genre de problématique. Il est donc indispensable de l’utiliser lorsqu’on en a besoin.

Donc nous allons reprendre notre composant App.tsx, et lui ajouter un state.