React State pour les débutants absolus

L’état est l’un des concepts les plus essentiels que tout développeur JavaScript moderne doit comprendre.

Si vous ne comprenez pas l’état, vous ne serez pas en mesure d’utiliser et de tirer pleinement parti de bibliothèques puissantes telles que React pour construire vos applications.

Voyons exactement ce qu’est l’état, comment il existe déjà dans vos applications JavaScript maintenant, et comment React nous permet de le gérer beaucoup plus facilement avec des crochets intégrés comme useState.

Vous voulez une excellente ressource pour apprendre React ? Devenez un pro de React en 30 minutes par jour avec le React Bootcamp

.

Qu’est-ce que l’état ?

Ce qui peut vous surprendre, c’est que tout site Web ou toute application que vous construisez avec du simple JavaScript comporte déjà un état. Il n’est simplement pas évident de savoir où il se trouve.

Voici un exemple de base :

Disons que nous construisons une application de compteur avec JavaScript. Nous voulons que cette application soit capable d’afficher le compteur actuel, ainsi que d’augmenter et de diminuer le compteur d’une unité.

Elle consistera uniquement en l’affichage du compte actuel, ainsi qu’en un bouton pour augmenter le compte d’une unité et un autre pour le diminuer d’une unité.

Voici à quoi ressemblera la version finale de notre application :

Voici le balisage de départ de notre application :

En termes simples, l’état est une donnée que nous devons gérer dans le temps au sein de notre application

L’état est souvent modifié par l’entrée de l’utilisateur et c’est le cas dans notre application ici.

Quel est l’état de notre application de compteur ? C’est le nombre de compteurs.

Notre utilisateur peut augmenter ou diminuer la valeur de l’état en cliquant sur le bouton approprié. Ce qui est important, c’est que nous voulons afficher ces changements à notre utilisateur.

Problèmes avec l’état en JavaScript simple

Bien que l’état semble être un concept simple, sa gestion pose deux problèmes lorsque vous utilisez uniquement JavaScript :

1. Il n’est pas évident de savoir ce qu’est l’état ou où il se trouve.
2. La lecture et la mise à jour de l’état est un processus peu naturel et souvent répétitif lors de l’utilisation d’API natives de navigateur comme document.

Comment mettre à jour l’état du compteur lorsque l’utilisateur clique sur l’un des boutons ?

Nous devons d’abord obtenir une référence à chaque élément. Pour ce faire, en JavaScript, il est courant d’ajouter un attribut id unique à chaque élément, de sélectionner chaque élément en JavaScript avec la méthode document.querySelector et de stocker la référence dans une variable locale :

Maintenant que nous avons des références à chaque élément HTML, comment faire fonctionner le bouton d’incrémentation ?

Nous devons d’abord écouter un événement de clic sur notre bouton d’incrémentation. Ensuite, lorsque le bouton est cliqué, nous devons obtenir la valeur actuelle du compte à partir de l’élément ayant l’id « count ».

Pour ce faire, nous plongeons dans le document HTML à l’aide de l’API de document et obtenons cette valeur avec count.innerText. La valeur innerText est une chaîne, nous la convertissons donc en un nombre, ajoutons 1, puis réécrivons cette valeur dans count.innerText.

Pour faire fonctionner le bouton de décrémentation, nous reprenons les mêmes étapes. La seule différence est que nous utilisons l’expression Number(count.innerText - 1).

Ce n’est pas trop de code, mais vous pouvez voir qu’il y a un certain nombre d’étapes ici qui ne sont pas très intuitives et répétitives :

• Ajouter un identifiant arbitraire à des éléments HTML
• Recherche de l’élément en utilisant JavaScript
• Stocke la référence de l’élément dans une variable
• Écoute de l’événement approprié sur l’élément
• Obtenir la valeur de l’état actuel en utilisant l’API du document
• Ecriture de la nouvelle valeur d’état dans la page avec .innerText

Ce sont beaucoup d’instructions de bas niveau qui sont nécessaires au fonctionnement de notre programme, mais elles ne nous aident pas à réfléchir à l’état sous-jacent.

Comme nous l’avons vu, l’état se trouve dans le navigateur. Cela signifie que nous devons d’abord « trouver » l’état et ensuite impérativement (d’une manière que l’ordinateur comprend mieux que nous) mettre à jour cette valeur.

Heureusement, React nous offre une façon beaucoup plus simple de mettre à jour l’état et de penser à l’état.

Comment React nous aide-t-il à gérer l’état ?

Un avantage significatif de l’utilisation de React et la raison pour laquelle il est dans votre intérêt d’utiliser React pour développer vos applications JavaScript est qu’il vous donne des modèles beaucoup plus faciles pour mettre à jour votre état.

Contrairement à JavaScript, React se charge du travail difficile de mise à jour de ce que l’utilisateur voit. Tout ce que nous avons à faire est de lui dire quel état nous gérons et quelle doit être la nouvelle valeur.

Au lieu de laisser l’état vivre dans le navigateur et de devoir le retrouver à chaque fois que nous avons besoin de le lire ou de le mettre à jour, nous pouvons simplement le placer dans une variable, puis mettre à jour la valeur de cette variable. Une fois cette opération effectuée, la mise à jour et la nouvelle valeur seront affichées à nos utilisateurs.

C’est tout le concept de la gestion de l’état dans React

Au lieu d’utiliser un document HTML, nous pouvons écrire toutes nos balises dans un composant React.

Il est écrit de manière identique à une fonction JavaScript ordinaire et il affiche les mêmes éléments HTML en utilisant une syntaxe identique appelée JSX.

export default function Counter() {
  return (

  ) ;
}

Comment pouvons-nous réaliser la même application de comptoir avec React ?

Dans notre application React, une fois que nous avons identifié notre état, nous le contrôlons à l’aide d’une variable JavaScript.

Cette variable peut être déclarée de plusieurs façons. La façon la plus populaire de gérer l’état d’un composant est avec le hookuseState.

Un hook dans React fonctionne de manière très similaire aux fonctions JavaScript ordinaires. Cela signifie que nous pouvons l’appeler en haut de notre composant et lui passer la valeur par défaut comme valeur de départ pour notre application de comptage.

Puisque la valeur de départ de notre compteur est zéro, nous appelons simplement notre hook et lui passons la valeur 0 et cette valeur est placée dans notre variable state.

import { useState } de 'react' ;

export default function Counter() {
  // la valeur du compteur vit et est gérée ici !
  const [count] = useState(0) 
    
  retour (

  ) ;
}

Il n’y a plus besoin d’utiliser count.innerText. Nous pouvons simplement afficher et lire la valeur de notre état en utilisant count.

Comme toute variable JavaScript, nous pouvons la nommer comme nous le souhaitons. Elle ne doit pas nécessairement s’appeler count. Vous pouvez l’appeler littéralement n’importe quoi d’autre, tant qu’il s’agit d’un nom JavaScript valide.

La valeur de retour de useState est un tableau. Lorsque nous le déstructurons, la première valeur déstructurée est la variable d’état. La seconde est la fonction de mise à jour de l’état.

import { useState } de 'react' ;

export default function Counter() {
  const [count, setCount] = useState(0) 
    
  retour (

  ) ;
}

Comment faire fonctionner le bouton d’incrémentation ?

Voici ce que nous n’avons pas besoin de faire :

• Nous n’avons pas besoin d’ajouter un identifiant à nos éléments HTML
• Nous n’avons pas besoin de plonger dans le DOM et de déterminer quel bouton est le bon
• Nous n’avons pas besoin d’écouter un événement de clic avec document.addEventListener

Pour mettre à jour l’état lorsque vous cliquez sur un bouton, ajoutez la prop onClick à chaque bouton. Cela vous permet d’appeler une fonction lorsque l’utilisateur appuie sur le bouton.

Pour le bouton d’incrémentation, nous mettrons à jour l’état en passant le nombre + 1 à setCount, et pour le bouton de décrémentation, nous passerons le nombre - 1 à setCount.

import { useState } de 'react' ;

export default function Counter() {
  const [count, setCount] = useState(0) 
    
  fonction incrementCount() {
    setCount(count + 1) ;
  }
    
  function decrementCount() {
    setCount(count - 1) 
  }
    
  return (

  ) ;
}

C’est tout le code dont nous avons besoin pour créer une application de compteur fonctionnelle avec React.

Lorsque chaque bouton est pressé et que l’état est mis à jour, React fera tout le travail de mise à jour de la page pour que l’utilisateur puisse voir le nouvel état.

C’est le grand avantage de l’utilisation de React par rapport au simple JavaScript : lorsque l’état est géré à l’aide de crochets comme useState et que React se charge de mettre à jour efficacement ce que l’utilisateur voit, nous pouvons créer des applications plus simples et plus fiables où l’état est facile à voir, à lire et à mettre à jour.

Vous voulez apprendre encore plus de React avec moi ?

Si vous avez apprécié ce tutoriel sur React, consultez mon site web Bootcamp React.

Il vous donnera toute la formation dont vous avez besoin pour :

• Passez du statut de débutant absolu à celui de professionnel de React en seulement 30 minutes par jour
• Créez 4 projets React complets, du début jusqu’au déploiement
• Apprenez une pile puissante de technologies pour construire n’importe quelle application que vous aimez

Cliquez pour rejoindre le React Bootcamp