Comment Learning React m'a appris JavaScript

Voici quelques-unes des fonctionnalités les plus intéressantes de React que j'ai rencontrées en tant que développeur JavaScript apprenant React pour la première fois. J'espère que mes expériences peuvent vous aider à mieux connaître ces fonctionnalités.

Avoir des enfants est un excellent moyen de découvrir tout ce que vous avez prétendu connaître toute votre vie. C'est incroyable de voir comment des questions comme «D'où viennent les cacahuètes?», «Pourquoi l'eau est bleue et blanche comme neige?», Ou «Pourquoi la lune brille-t-elle?», Peuvent vous faire réévaluer si vous êtes réellement un adulte

De la même manière, l'apprentissage de React a montré à quel point j'ai fait semblant de comprendre le nouveau JavaScript.

Pour un peu de contexte, j'utilise JavaScript depuis plus de 15 ans et j'ai déployé des applications JavaScript sur plusieurs plateformes pour plusieurs organisations. J'ai été membre de l'équipe jQuery UI pendant deux ans et membre de l'équipe NativeScript pendant quatre ans. Malgré cela, l'utilisation non triviale de React des fonctionnalités JavaScript modernes m'a obligé à apprendre de nouvelles choses sur un langage que j'utilise depuis des années.

Dans cet article, je veux partager quelques choses que j'ai ramassées lors de mon apprentissage de React . J'espère que le fait d'entendre mes expériences peut vous aider à apprendre (et à utiliser!) Certaines de ces fonctionnalités également, surtout si vous apprenez React pour la première fois.

Feature # 1: Destructuring

Avant d'essayer React, j'avais entendu le terme déstructurant, et j'en avais même vu des démonstrations dans des discussions et autres, mais je n'ai jamais compris pourquoi je devais m'en soucier. Et puis j'ai vu mon tout premier exemple de crochets React qui ressemble à ceci.

 import  React, {useState}  de   'react' ;

 fonction   Exemple  ()  {
  
   const  [count, setCount]  = useState ( 0 );

   retour  (
     < div > 
       < p >  Vous avez cliqué {count} fois  </  p > 
       <  bouton   onClick  =  {()  =>  setCount (count + 1)}>
        Cliquez moi
       </  bouton > 
     </  div > 
  );
}

Pour nos besoins, ne vous inquiétez que de la ligne de code ci-dessous, car c'est celle qui exploite la déstructuration.

 const [ count setCount] = useState ( 0 )

React.useState () est une API étrange (plus de détails dans une minute), mais parce que useState () est une API commune dans les bases de code React, il est important de comprendre ce qui est

La méthode useState () de React renvoie un tableau avec deux entrées, et const [count, setCount] = useState (0) destructures ces deux entrées en deux constantes , count et setCount respectivement.

Cela m'a dérouté au début, donc je vais essayer de le dire autrement. En substance, la ligne de code ci-dessus est une meilleure façon de créer manuellement des constantes locales à partir d'un tableau, ce que vous auriez pu faire traditionnellement comme ceci.

 const  results = useState (0);
 const   count  = résultats [0];
 const  setCount = résultats [1];


 const  [ count setCount] = useState (0);

Personnellement, je pense que React.useState n'est pas le meilleur exemple de déstructuration, juste parce que la méthode useState est une API si étrangement conçue. (Je suis vraiment curieux de savoir pourquoi il est logique d'avoir une méthode qui renvoie un tableau avec deux entrées.)

Pour moi, un bien meilleur exemple de déstructuration est une fonction qui prend un objet comme argument. Par exemple, supposons que vous ayez la fonction suivante qui traite un utilisateur:

  fonction   processUser (user) {
  console.  journal  (utilisateur.  nom );
  console.  log  (user.address);
}

Avec la déstructuration, vous pouvez placer les propriétés d'objet que vous attendez de recevoir directement dans votre définition de fonction, comme telles.

  function   processUser ({ nom adresse}) {
  console.  journal  ( nom );
  console.  journal  (adresse);
}

Dans ce cas, la déstructuration nettoie un peu votre code et rend également votre fonction plus facile à utiliser pour les autres développeurs, car vous répertoriez les propriétés d'objet que vous attendez dans votre définition de fonction.

Résumé : La déstructuration ne change pas fondamentalement la façon dont vous écrivez JavaScript, mais peut être un moyen pratique de garder votre code concis, en particulier dans les zones de votre base de code où vous devez beaucoup faire circuler les objets.

Il y a deux semaines, je ne savais pas que les noms de propriété calculés étaient une chose JavaScript, et je n'en avais jamais vu d'exemple dans le code du monde réel. Ensuite, sur la documentation des formulaires React j'ai vu ce code:

 handleInputChange (event) {
  const  cible  = événement.  cible ;
  const  value  =  target .  type  ===  'checkbox' ?  cible . Vérifié:  cible .  valeur ;
  const  nom  =  cible .  nom ;

  this.setState ({
    // Ceci est la propriété calculée  nom 
    [ nom ]:  valeur 
  });
}

Comme dans l'exemple précédent, concentrons-nous uniquement sur les lignes de code utilisant la fonctionnalité qui nous intéresse, qui dans ce cas est l'utilisation suivante d'une propriété calculée.

  this . setState  ({
  [name]:  valeur 
});

Ce code transmet un objet à la méthode setState () de React avec une seule paire nom-valeur. Le point important ici, et là où les propriétés calculées entrent en jeu, est que la propriété est créée dynamiquement sur la base de la variable name . Tout cela pourrait avoir plus de sens si vous regardez le code ci-dessous, qui montre comment accomplir la même tâche avec et sans nom de propriété calculé.

 ce  .setState ({
  [name]:  valeur 
});


 var  myObject = {};
myObject [name] =  valeur ;
 this  .setState (myObject);

Comme je l'ai mentionné plus tôt, je n'avais pas vu cette syntaxe avant d'apprendre React, et je pense que c'est parce que c'est une chose assez rare à faire. En fait, j'ai vraiment du mal à penser à un scénario non-React où j'utiliserais jamais cette syntaxe. (Peut-être pourriez-vous me le dire dans les commentaires?)

Cela étant dit, il est important pour les développeurs de React de comprendre cette syntaxe car elle revient souvent quand il s'agit de l'état. La méthode setState de React accepte un objet partiel - alias un objet qui contient une partie de votre état, que React prend soin de fusionner avec le reste de votre état sous le capot - et dans ce scénario, il est assez courant d'avoir besoin pour créer dynamiquement un objet avec une clé dynamique.

Résumé : Vous pouvez créer dynamiquement des noms de propriété en plaçant [] autour d'un nom de propriété lors de la création de littéraux d'objet. Vous n'aurez probablement pas besoin de l'utiliser sauf si vous travaillez avec l'état dans React, mais il est important de reconnaître la syntaxe lorsque vous la voyez.

Fonctionnalité n ° 3: Syntaxe de propagation

La ​​syntaxe de propagation est le nom officiel de JavaScript ... opérateur. Chose intéressante, je connaissais quelque peu ... uniquement parce que je le connaissais de Java (oui, Java), où il est connu sous le nom d'arguments variables, ou varargs, et ressemble à quelque chose comme ça.

 public class MyClass {
  message public void ( String  foo,  String   bar  String  ... bang) {
     Système  .out.  print  (foo);
     System  .out.  print  ( bar );
     pour  ( String  myString: bang) {
       Système  .out.  print  (myString);
    }
  }
}


 nouveau  MyClass (). Message ( "a"  "b"  "c"  "d"  "e" );

Comme vous pouvez vous y attendre, l'implémentation de JavaScript de cette fonctionnalité est similaire à Java mais meilleure. Tout d'abord, vous pouvez répliquer le code Java précédent à l'aide du code JavaScript ci-dessous.

  fonction   message  (a, b,  ... c )   {
  console.log (a + b + c.join ( "" ));
}


message ( "a"  "b"  "c"  "d"  "e" );

Ici, c est connu comme paramètre de repos et il contient un tableau de tous les arguments que l'utilisateur fournit au-delà des paramètres formellement définis, donc dans ce cas ["c", "d", "e"]. Les paramètres de repos sont de vrais tableaux JavaScript, ce qui signifie que toutes les fonctions de tableau JavaScript sont disponibles sur eux, et c'est la raison pour laquelle c.join () fonctionne dans l'exemple ci-dessus.

Tout cela étant dit, j'ai jamais utilisé d'arguments variables en Java, et je n'utiliserai probablement jamais de paramètres de repos en JavaScript. D'après mon expérience, la conception d'une fonction qui prend un nombre variable d'arguments est un excellent moyen de garantir que vos collègues ne vous aiment pas.

Mais la syntaxe de propagation de JavaScript peut être utilisée pour plus que des paramètres de repos. Le plus utile, à mon avis, est d'utiliser la syntaxe étalée dans les littéraux d'objets. Par exemple, considérons l'exemple suivant de MDN montrant comment utiliser la syntaxe de propagation pour cloner et fusionner des objets.

  var  obj1 = {foo:  'bar' x:  42 };
 var  obj2 = {foo:  'baz' y:  13 };

 var  clonedObj = { ...  obj1};


 var  mergedObj = { ...  obj1,  ...  obj2};

Il s'agit du seul exemple pragmatique de l'opérateur de diffusion que j'ai vu, car le clonage et la fusion d'objets est une tâche courante dans votre application JavaScript moyenne.

Résumé : Le ... L'opérateur est connu sous le nom de syntaxe étendue en JavaScript. Il peut être utilisé dans les définitions de fonctions ou lors de la gestion d'objets ou de tableaux, et il est particulièrement utile lors de la fusion d'objets. ressemble à ceci?

 const isLoading = determineIfLoading ()
if ( isLoading   &&  console.log ( "Votre application est en cours de chargement" ))

Je ne le ferais pas, et vous ne le feriez probablement pas non plus. Mais cette technique est quelque chose que pratiquement toutes les applications React utilisent dans sa méthode render () . (C'est même recommandé dans la documentation officielle de React .)

L'approche est appelée rendu conditionnel, et cela fonctionne parce que JavaScript fait quelque chose connu sous le nom d'évaluation de court-circuit. Pour expliquer ce qu'est l'évaluation des courts-circuits, revenons à la déclaration if ci-dessus.

 if ( isLoading   &&  console.log ( "Votre application est en cours de chargement "))

Il s'agit d'une expression JavaScript avec deux opérandes— isLoading et console.log ("...") . Si le premier opérande de cette expression est vrai l'interpréteur JavaScript passera au deuxième opérande, dans ce cas, l'instruction console.log et l'exécutera. Mais, et c'est là que l'évaluation des courts-circuits entre en jeu, si le premier opérande est faux l'interpréteur sautera ou court-circuitera le deuxième opérande et n'exécutera jamais la console . log .

À la fin de la journée, vous consolidez une façon plus traditionnelle d'écrire une if déclaration - quelque chose comme ça, qui fait la même chose.

 const  isLoading = determineIfLoading ();
 if  (isLoading) {
  console.  journal  ( "Votre application est en cours de chargement" );
}

Je considère l'approche du court-circuit comme hacky dans la plupart des codes, car cela vaut généralement la peine de rendre le code plus verbeux pour le rendre plus lisible.

Cependant, je trouve que React utilise l'évaluation des courts-circuits pour être plutôt élégant. . Par exemple, voici un exemple d'utilisation de l'évaluation des courts-circuits dans une méthode React render () pour créer une interface utilisateur.

  return  (
  < div   class  =  "page" >
    {this.state.isLoading && < div > Chargement ... </  div >}
    < div   class  =  "tout le reste" > ... </  div >
  </  div >
);

Ici, React utilise la variable this.state.isLoading pour afficher de façon conditionnelle une certaine interface utilisateur, qui dans ce cas est

Loading ...

.

Ce code fonctionne à cause de évaluation des courts-circuits. Plus précisément, le

Chargement en cours ...

n'est rendu que lorsque this.state.isLoading est vrai .

Et je dois admettre que ce code est étonnamment propre, surtout si vous le comparez à une implémentation fonctionnellement identique en utilisant une instruction if plus traditionnelle, qui ressemble à ceci.

 var  loadingContent =  this  .state.isLoading?
   < div >  Chargement ...  </  div >  :  "" ;

 retour  (
   < div   class  =  "page" > 
    {loadingContent}
     < div   class  =  "tout le reste" >  ...  </  div > 
   </  div > 
);

Dans presque toutes les situations, je préfère le code verbeux mais lisible au code concis mais illisible, mais je dois dire que dans cette situation spécifique, l'évaluation des courts-circuits nettoie vraiment la logique du composant.

De plus, parce que la syntaxe {conditionnelle && } est utilisée de manière cohérente dans la documentation et les didacticiels React, l'approche devient de plus en plus lisible une fois que vous comprenez ce qu'elle fait et une fois que vous commencez à utiliser la syntaxe vous-même.

Résumé : Comprendre le fonctionnement de l'évaluation des courts-circuits est important pour comprendre le fonctionnement de JavaScript et peut être utile pour écrire des méthodes propres de React render () .

Récapitulation

Entre la destruction, les noms de propriété calculés, la syntaxe étalée et l'évaluation des courts-circuits, l'apprentissage de React m'a obligé à apprendre de nouvelles choses sur un langage que j'utilise depuis des années.

ks périodiquement, car cela peut ouvrir votre esprit à de nouvelles façons de penser et à de nouvelles façons de résoudre les problèmes de codage auxquels vous n'auriez peut-être pas pensé auparavant.

Donc, si vous ne l'avez pas déjà fait, essayez React même si c'est juste pour construire une application idiote pour voir ce que vous en pensez. Et si vous le faites, essayez KendoReact notre ensemble premium de composants d'interface utilisateur qui rendent la construction de composants React riches super facile ?

---