Introduction

Dans cette quête, nous allons rendre nos composants React dynamiques à l'aide d'un outil appelé state. Nous verrons également comment React DevTools peut faciliter le développement d'applications React.

C'est parti ! 🚀

🤓 À la fin de cette quête, tu seras en mesure de :

✅ Comprendre comment fonctionne le state en React. ✅ Comprendre comment nous pouvons utiliser un state dans un composant. ✅ Utiliser les React DevTools et voir à quel point ils sont utiles pour le développement d'applications React.

State dans les Composants à base de Classes

Le state (état) d'un composant est parfois appelé local state (état local), car chaque instance d'un composant possède sa propre version de cet état.

Les props sont en read-only (lecture seule), du point de vue du composant qui les reçoit : il ne peut pas les modifier.

Un composant doit donc s'appuyer sur son state pour maintenir des données dynamiques, c'est-à-dire des données qui peuvent changer au fil du temps.

Ce premier exemple d'un stateful component (composant avec état ou le fameux "composant intelligent") est un compteur.

Il gère une valeur de type number, stockée dans le state, qui commence à 0 et peut être incrémentée en appuyant sur un bouton. Dans cet exemple, nous utilisons la gestion des événements de React pour appeler une fonction qui incrémente le compteur lorsque le bouton "+" est pressé.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <h1>Counter example</h1>
        <p>Counter value: {this.state.count}</p>
        <button
          onClick={event => {
            const newCount = this.state.count + 1;
            this.setState({ count: newCount });
          }}
        >+</button>
      </div>
    )
  }
}

Encore du nouveau code ! Tu peux le voir en action sur cet exemple. Voyons cela en détail.

👷‍♀️ Le constructeur

Une nouvelle méthode a été introduite par rapport au premier exemple : constructor. Elle devrait t'être familière, car tu l'as déjà rencontrée dans les cours et ateliers sur la programmation orientée objet (POO).

constructor est un mot-clé spécial en JavaScript. En POO, le constructor (constructeur) est une méthode particulière qui est utilisée pour initialiser une instance. Ici, le but principal du constructor est d'initialiser le state (en attribuant une valeur initiale à this.state).

En l'absence d'un constructor explicitement écrit, la classe React.Component fournit un constructeur par défaut, qui a pour but d'initialiser le composant et ses props. Il est donc possible de se passer de l'écriture d'un constructor, si tu n'as pas besoin d'initialiser un state.

Mais dès qu'un constructor est écrit, il prend le pas sur le constructeur de la classe parente. C'est un peu comme remplacer le constructeur de la classe parente ou le masquer. La ligne super(props); est donc nécessaire : elle permet d'appeler le constructeur de la classe parente React.Component pour initialiser le composant. Si tu oublies cette ligne, le composant ne fonctionne pas et tu obtiens alors un message d'erreur similaire à celui affiché ci-dessous. Tu peux essayer de commenter cette ligne sur CodePen pour voir ce que la console affiche.

Le state

Le state est un objet, une structure similaire aux props, avec cette différence majeure : le composant peut changer les valeurs de son état. Ici, le state (this.state) est initialisé avec une seule paire clé-valeur : la valeur initiale 0 est associée à la clé count.

En général, le state peut contenir plusieurs paires clé-valeur.

👓 Lire une valeur depuis le state

Regarde la ligne de render qui affiche le compteur : {this.state.count}. Cette syntaxe ressemble beaucoup à this.props.name du composant WelcomeMessage. Si une instance de composant pouvait parler, elle traduirait this.state.count par : "la valeur count stockée dans mon state".

Modifier le state

En dehors du constructor, où l'état est initialisé par une affectation, tu ne dois jamais, jamais écrire ceci :

// PAS BIEN ! 
// (si c'est écrit à l'extérieur du constructor)
this.state = {
  count: 10
};

De la même façon, tu ne dois jamais tenter de changer directement une valeur directement à l'intérieur de l'objet state :

// PAS BIEN !
this.state.count = 10;

Alors qu'elle ne vont pas nécessairement causer d'erreurs fatales, ces deux approches risquent de générer des bugs.

Afin de modifier une valeur dans le state, il faut appeler une méthode fournie à cet effet par React : this.setState().

Voici ce que tu fais dans la fonction appelée lorsque tu cliques sur le bouton:

• La valeur actuelle du compteur est récupérée via this.state.count, à laquelle on ajoute 1 pour obtenir la nouvelle valeur du compteur. Nous stockons temporairement cette nouvelle valeur dans newCount.
• Lors de l'appel de this.setState(), nous lui fournissons un objet qui contient les mises à jour à appliquer au state.
• Ici, l'objet passé en argument à setState n'a qu'une seule clé : count, avant le symbole ":"; la nouvelle valeur du compteur, newCount, est mise après le ":".
• Résultat: la nouvelle valeur de this.state.count sera la valeur précédente, plus un.

C'est là que la "magie" de React opère : React détecte les appels à this.setState() dans un composant et rafraîchit l'affichage pour prendre en compte les nouvelles données de l'état. Ce rafraîchissement de l'affichage est déclenché par l'appel de la méthode render() qui met à jour l'état.

Enfin : tout comme chaque instance d'un composant a ses propres valeurs dans les props, chaque instance d'un composant avec état gère ses propres valeurs dans le state. C'est pourquoi nous parlons de local state (état local). Il est contenu dans l'instance de composant et visible uniquement par cette instance.

React DevTools

Ci-dessous, nous avons une vidéo qui explique ce que sont les React DevTools et comment les utiliser. Ces outils sont utiles pour vérifier le state ou les props de n'importe quel composant à n'importe quelle étape ainsi que l'arbre des composants. Tu peux jeter un coup d'œil à ces outils et à la façon dont nous pouvons les utiliser pour aider au développement de nos applications React.

💪 Challenge

Ton objectif est de créer deux composants Counter qui suivent leurs propres valeurs de comptage.

Voici les étapes, mais lis toutes les instructions du défi avant de commencer

• Utilise ce template pour commencer (tu peux utiliser ce template pour tous tes futurs projets React)
• Assure-toi d'être connecté au CodeSandbox.
• Change le nom du projet en stateful-counter-app.
• Crée un dossier components dans le dossier src.
• Crée un composant Counter (src/components/Counter.js).
• Importe le composant Counter dans le composant App.
• Appelle le composant Counter deux fois dans l'application.
• Passe une prop title dont la valeur est "Counter App 1" à la première instance du composant Counter et "Counter App 2" à la deuxième.
• Fais le rendu de la prop dans le composant Counter
• Initialisez un constructeur avec un state dont une des clés s'appelle count et a une valeur égale à zéro.
• Utilisez l'exemple précédent dans cette quête pour mettre à jour le state à chaque clic sur le bouton.
• Affiche ce composant à partir du composant App.

🧐 Validation criterias

• [ ] Il y a deux instances du composant Counter appelées à l'intérieur du fichier App.js.
• [ ] Chaque instance du composant Counter suis la valeur de comptage de son state indépendamment de l'autre instance du même composant.
• [ ] À chaque clic sur le bouton, la valeur de comptage du state changera et affichera la nouvelle valeur sur la page.
• [ ] Le code est disponible sur CodeSandbox.