Comment débuter avec les crochets React: formulaires contrôlés

Les crochets de réaction sont une nouvelle proposition brillante qui vous permettra d’écrire à 90% une réaction plus propre. Selon Dan Abramov, les crochets sont l'avenir de React.

Cela sonne bien, mais qu'est-ce que les crochets et comment vont-ils m'aider à écrire un meilleur code? Content que tu aies demandé.

Les crochets vous permettent d'accéder aux méthodes d'état et de cycle de vie d'un composant fonctionnel. Si la phrase précédente vous semble étrange, vous devriez alors rafraîchir votre mémoire de Réagir ici.

L'équipe de React a déclaré qu'elle vous aiderait à rédiger du code propre sans le bagage de Stateful Components. Après avoir implémenté un formulaire barebone en utilisant Hooks, je suis d’accord avec eux.

Commençons par coder un formulaire simple dans un composant avec état. Nous réécrirons le même formulaire à l'aide de crochets et vous pourrez choisir celui qui vous convient le mieux.

INSTALLER

Rendez-vous sur codesandbox.io, créez un compte, connectez-vous et créez un nouveau bac à sable. Sélectionnez Réagir lors de la création du bac à sable.

sélectionnez Réagir dans la liste des modèles

Maintenant que la Sandbox est ouverte, nous devons nous assurer que nous utilisons une version de React qui prend en charge les crochets. En effet, les hooks ne sont accessibles que dans les versions Alpha pour le moment.

MISE À JOUR: Les hameçons sont maintenant dans la version publique et stable de React v16.8.

Regardez l'éditeur de fichiers sur le côté gauche du bac à sable et:

  • Cliquez sur ‘Dépendances’
  • Supprimer à la fois "réagir" et "réagir"
  • Maintenant, cliquez sur «Ajouter une dépendance»
  • Tapez ‘réagir’ dans la zone de saisie et cliquez sur le menu déroulant situé à droite du premier résultat.
  • Sélectionnez la version 16.8.0-alpha.1.
  • Cliquez maintenant sur la description pour l'installer.
assurez-vous de sélectionner la dernière version alpha

Répétez les mêmes étapes pour ‘react-dom’ et vous devriez être prêt à partir.

CODE

Maintenant que la configuration est terminée, il est temps d’écrire du code. Accédez au bac à sable que vous avez créé, créez un nouveau fichier nommé Form.jsx et collez le code suivant dans:

importer Réagir, {Composant} de "réagir";
classe Form étend Component {
  constructeur (accessoires) {
    super (accessoires);
this.state = {
      Prénom: "",
      nom de famille: "",
      email: "",
      mot de passe: "",
    };
this.handleInputChange = this.handleInputChange.bind (this);
  }
handleInputChange (événement) {
    this.setState ({
      [event.target.name]: event.target.value
    });
  }
render () {
    const {firstName, lastName, email, mot de passe} = this.state;
revenir (
      
        
        
        
        
Formulaire d'exportation par défaut;

Ouvrez maintenant index.js et remplacez le contenu par le code suivant:

importer Réagir de "réagir";
importer ReactDOM de "react-dom";
importer le formulaire de "./Form.jsx";
importer "./styles.css";
fonction App () {
  revenir (
    
      

Un formulaire simple en réaction       
       )  }

const rootElement = document.getElementById ("root");
ReactDOM.render (, rootElement);

Testez le formulaire pour voir si tout fonctionne bien. C’était là le moyen «ancien» d’implémenter une forme contrôlée dans React.

Notez la quantité de passe-partout dont nous avions besoin pour configurer l'état et la méthode de mise à jour à chaque changement d'entrée.

Codons le même formulaire en utilisant React Hooks (enfin!), Mais d’abord, supprimez tout le code de Form.jsx et recommençons.

Commencez par ajouter la ligne suivante en haut du fichier:

importer React, {useState} de 'react';

Il existe donc une méthode inconnue importée ici appelée useState. De quoi s'agit-il et comment l'utilisons-nous?

Bien, useState est le crochet de réaction qui nous permettra d’accéder à un état et de le manipuler dans notre composant. Cela signifie que nous n'aurons pas besoin d'étendre Component comme le fait notre code précédent.

C’est l’un des nombreux nouveaux points d’accroché qui rejoignent l’API de React pour nous aider à écrire du code plus propre. Maintenant, utilisons-le.

importer React, {useState} de "react";
importer "./styles.css";
fonction Form () {
  const [prénom, setFirstName] = useState ("");
  const [nom, setLastName] = useState ("");
  const [email, setEmail] = useState ("");
  const [mot de passe, setPassword] = useState ("");
revenir (
    
       setFirstName (e.target.value)}
        placeholder = "Prénom"
        type = "text"
        nom = "prénom"
        Champs obligatoires
      />
       setLastName (e.target.value)}
        placeholder = "Nom"
        type = "text"
        nom = "nom"
        Champs obligatoires
      />
       setEmail (e.target.value)}
        placeholder = "Adresse e-mail"
        type = "email"
        name = "email"
        Champs obligatoires
      />
       setPassword (e.target.value)}
        placeholder = "Mot de passe"
        type = "mot de passe"
        nom = "mot de passe"
        Champs obligatoires
      />
formulaire par défaut d'exportation;

Nous avons créé notre composant fonctionnel mais il y a un code inconnu que je vais expliquer. Plus précisément, les quatre déclarations au sommet de notre composant.

Bien que cette partie du code paraisse étrange au début, elle est simple à comprendre. Nous ne déclarons plus un seul objet appelé state qui contient l’état de notre composant. Au lieu de cela, nous sommes en train de scinder l’état en plusieurs déclarations.

Supposons que nous voulions déclarer une variable d’état appelée firstName de la manière habituelle qui étend React.Component, nous le faisons généralement dans le constructeur, puis nous y accédons en écrivant this.state.firstName.

Mais avec useState, nous initialisons deux variables appelées firstName et setFirstName. Nous définissons ensuite leurs valeurs sur tout ce que useState () renvoie.

Pourquoi devons-nous déclarer setFirstName aussi?

Comme il s’agit d’un composant fonctionnel, nous n’avons pas mis setState pour nous aider à modifier la valeur de la variable d’état. Ce que nous avons, c'est setFirstName dont le seul but est de mettre à jour firstName chaque fois que nous l'appelons.

Alors quand tu vois:

const [firstName, setFirstName] = useState ("")

Nous déclarons essentiellement une variable d'état et une fonction nous permettant de modifier la variable d'état ultérieurement. La chaîne vide dans l'appel useState est la valeur initiale de firstName et peut être définie sur n'importe quelle valeur requise. Nous allons définir une chaîne vide pour le moment.

Notez que vous pouvez nommer la fonction setFirstName comme vous le souhaitez. C’est une convention, cependant, d’ajouter ‘set’ avant le nom de la variable d’état que nous modifions.

Nous savons maintenant comment créer une variable d'état dans un composant fonctionnel et comment le mettre à jour. Continuons en expliquant le reste du code.

Dans notre première balise d’entrée, nous définissons sa valeur sur la variable d’état que nous avons déclarée en haut de notre composant. En ce qui concerne le gestionnaire onChange, nous lui avons attribué une fonction de flèche qui appelle la fonction qui met à jour notre variable d'état pour nous.

Là où nous avions une méthode dans notre composant de classe précédent appelé handleInputChange, nous avons maintenant une fonction anonyme qui met à jour notre état pour nous.

Vérifiez que tout fonctionne comme il se doit en essayant de saisir du texte dans votre formulaire. Si tout fonctionne, félicitations, vous venez d'utiliser un crochet de réaction. Si ce n’est pas le cas, relancez ce didacticiel et assurez-vous de ne passer aucune instruction.

Ajoutez du style à votre guise et amusez-vous.

Réflexions

MISE À JOUR: Certains d'entre nous peuvent être alarmés à l'idée d'utiliser des fonctions inline dans le gestionnaire onClick. J'ai tweeté Dan Abramov à ce sujet et il m'a répondu avec cette partie de la documentation de Hooks qui explique pourquoi l'utilisation de fonctions en ligne avec Hooks n'est pas une mauvaise chose.

En parcourant notre nouveau code et en le comparant à l’ancien, il est évident que React Hooks peut nous aider à écrire un meilleur code.

En comparant côte à côte le composant de classe et le composant fonctionnel, il est clair que le composant fonctionnel est plus facile à raisonner, utilise moins de code et semble généralement plus propre.

Si vous aimez React Hooks, vous pouvez en apprendre davantage en explorant la documentation officielle et en essayant de réimplémenter certains de vos projets en les utilisant.

Cela dit, j'aimerais entendre vos pensées. Pensez-vous que les crochets sont l’avenir de React ou estimez-vous qu’ils ne sont que des gadgets inutiles? Laissez un commentaire ci-dessous.

Ce post est apparu en premier sur The Andela Way.