Top 5 des leçons apprises pour la création d'applications React

Jun 17 2022

J'ai récemment donné une conférence sur "Lessons I Learned building React Applications", lors d'une conférence. J'ai pensé que c'était une bonne conversation qui devait être documentée sous la forme d'un article de blog.

Dans cet article de blog, je vais passer en revue mes 5 principales leçons sur la création d'applications React au fil des ans. Allons droit au but.

Leçon 1 : Utiliser des composants fonctionnels

Les composants de classe dans React, sont une histoire du passé. Les composants de classe sont source de confusion pour les personnes et les machines. Voici mes principales raisons pour lesquelles vous devriez commencer à utiliser des composants fonctionnels pour vos applications React.

Pourquoi des composants fonctionnels ?

Plus simple à apprendre et à écrire.
Moins de codes.
Plus facile à entretenir et à tester.
Disponibilité des crochets dans les composants fonctionnels.

Donc, si vous débutez et apprenez React, vous n'avez pas à vous soucier des composants de la classe. Vous pouvez apprendre directement les composants fonctionnels. Si vous avez déjà une application React, assurez-vous simplement d'écrire vos nouveaux composants en tant que composants fonctionnels.

Remarque : Gardez à l'esprit que React prend toujours en charge les composants de classe, vous n'avez donc pas à réécrire vos composants de classe en composants fonctionnels.

import React, { useState } from "react";
const YesNoButtonComponent = () => {
  const [button, setButton] = useState("");
  const onButtonPress = (buttonName) => {
    setButton(buttonName);
    console.log(buttonName);
  };
  return (
    <div>
      <button onClick={() => onButtonPress("Yes")}>Yes</button>
      <button onClick={() => onButtonPress("No")}>No</button>
     </div>
  );
};

Les composants fonctionnels sont l'avenir de React !

Leçon 2 : Décomposez les composants — si nécessaire !

Chaque composant est un bloc de construction qui est un élément réutilisable de l'interface utilisateur. En les rassemblant, vous obtenez une application complète.

Voici une stratégie simple que je suis, lorsque j'ai besoin de décomposer des composants au sein d'une application.

Quand est-ce que je décompose les composants ?

La gestion de l'état devient un cauchemar !
Problèmes de performances avec le nouveau rendu du composant ou de l'application.
La lisibilité du code en prend un coup.
Travailler avec plusieurs développeurs sur la base de code devient un défi.
Tester le composant est plus difficile.

Leçon 3 : TypeScript est une bouée de sauvetage !

Au cours de la dernière année environ, j'ai basculé mes projets vers TypeScript. Je ne savais pas alors à quel point mon expérience de développeur allait être meilleure avec ce commutateur.

Voici quelques-unes des principales raisons pour lesquelles je pense que TypeScript est une bouée de sauvetage :

Détectez les problèmes tôt au moment de la compilation.
Intellisense est précis.
Plus facile de refactoriser le code.
Code lisible.
Plus facile à entretenir et à tester.
Documentation de haute qualité avec TSDoc.

type HeadingProps = {
  title: string;
  bold: boolean;
}
export const Heading = ({ title, bold }: HeadingProps) => {
  return (
    <div>
      {bold ? "Bold Title: " : "Regular Title: "}
      {title}
    </div>
  );
};

Leçon 4 : Commencez par l'état local !

Souvent, lorsque les projets React sont lancés, les développeurs pensent immédiatement qu'ils ont en quelque sorte besoin d'une bibliothèque de gestion d'état externe. Il n'est pas rare de voir des équipes configurer Redux/MobX/XState ou des bibliothèques similaires lorsqu'elles commencent à créer une application React.

Je recommanderais de commencer par l'état local pour votre application React et de prendre des décisions de gestion d'état au fur et à mesure que votre application se développe. Souvent, votre application n'a vraiment pas besoin de solutions complexes pour la gestion des états. Alors pourquoi apporter tout le volume supplémentaire de bibliothèques, si vous pouvez vous en passer ?

Voici un flux de travail que vous pouvez suivre pendant que votre application se développe :

1. Commencez d'abord par l'état local : lorsque vous commencez à créer votre application, conservez l'état local pour chaque composant. Et cela peut suffire la plupart du temps, et vous pouvez utiliser le hook useState pour gérer l'état.

2. Transmettre l'état via les props : si un composant enfant a besoin d'accéder à l'état d'un parent, il peut alors être transmis via les props du parent au composant enfant.

3. Lift state up : il peut y avoir des situations où un composant non enfant a besoin d'accéder aux données d'un autre composant. Dans ce scénario, vous pouvez utiliser le concept d' état de levage jusqu'au composant parent commun.

4. Utiliser le contexte : Le contexte est conçu pour partager des données globales pour une arborescence de composants React. Si vous souhaitez éviter de faire passer certains accessoires à travers plusieurs couches de composants, utilisez le contexte. Le contexte est généralement utilisé pour les données telles que les informations démographiques, le thème, etc. qui sont nécessaires à la plupart des composants.

5. Si tout ce qui précède ne suffit pas, optez pour la gestion d'état externe : si vous avez essayé toutes les méthodes ci-dessus, que l'état de votre application continue de croître et que vous pensez qu'elle pourrait bénéficier de l'utilisation d'une solution de gestion d'état externe ; alors allez-y. Il existe de nombreuses options telles que Redux, MobX, XState, etc., que vous pouvez intégrer à votre application.

Leçon 5 : Testez, testez et testez !

Dernier point mais non le moindre — Testez votre code ! Une fois que vous avez suivi toutes les autres bonnes pratiques de React, votre code devrait être facile à tester. Il existe différents types de tests que vous pouvez effectuer avec votre application React, et je les recommande tous.

Tests unitaires

Jest est le framework de test le plus populaire pour les tests unitaires. Il existe également d'autres frameworks comme Mocha que vous pouvez utiliser. Les tests unitaires sont la forme de test la plus basique, qui vous permet de tester les plus petites unités de votre code.

Essais de composants

Tout dans React est un composant et suit l'approche basée sur les composants. Vos composants sont des unités individuelles réutilisables qui peuvent être testées efficacement. Cette forme de test est très cruciale dans React.

La bibliothèque de tests React de Kent C.Dodd est une solution légère pour tester les composants React. Il fournit des utilitaires de test React DOM simples qui encouragent les meilleures pratiques de test. De nombreuses équipes ont réussi à tester leurs composants avec cette bibliothèque. Vérifiez-le, si vous ne l'avez pas fait.

Tests automatisés de bout en bout

Ce type de test teste essentiellement l'application dans son ensemble. Il simule la façon dont un utilisateur clique sur l'application et la teste dans un navigateur. Le framework le plus populaire et le plus facile à utiliser pour tester JavaScript de bout en bout (ou tout ce qui s'exécute sur un navigateur) est Cypress . J'ai utilisé Cypress pour tester des applications frontales, et c'est un jeu d'enfant à configurer et à faire fonctionner. Cela impliquera des tests dans un environnement de navigateur réaliste et je recommande fortement d'inclure ces tests dans votre application React.

Conclusion

Eh bien, c'est un enveloppement ! J'espère que vous avez apprécié la lecture de cet article sur les leçons que j'ai apprises en travaillant avec React au fil des ans. Il n'y a pas de règle définie lors du développement d'applications React. React lui-même est une bibliothèque flexible, donnant aux développeurs la liberté de prendre des décisions. Avec la liberté vient la responsabilité, c'est ce qui rend React intéressant pour moi.

Si vous avez aimé cet article, n'oubliez pas de le partager avec votre réseau. Vous pouvez me suivre sur twitter @AdhithiRavi pour plus de mises à jour.