9 outils utiles pour le développement de React –

Cet article a été créé en partenariat avec Sencha . Merci de soutenir les partenaires qui rendent SitePoint possible.

React est un ensemble d’outils et de bibliothèques indépendants les uns des autres, ce qui peut être décourageant pour les développeurs React ayant un travail à faire. Les nombreux outils offrent beaucoup de liberté, car vous pouvez rechercher les meilleurs pour le travail à effectuer. Dans React, il existe de nombreuses façons de résoudre un problème, il est donc utile de connaître plus que quelques outils. Il existe des outils qui sont meilleurs pour résoudre certains problèmes que d’autres, tout dépend du contexte. Vous trouverez ci-dessous une liste d'outils que je trouve utiles dans un projet React de bonne taille, certains sont plus récents que d'autres et certains résolvent un problème spécifique lorsque vous travaillez avec React – mais tous m'ont été utiles.

Pour chaque outil React, Je vous donnerai un bref résumé avec des informations de base avant de plonger un peu plus loin avec des choses sympas qu’il peut faire et mes pensées. Gardez à l'esprit que tous ces outils sont sujets à changement.

create-react-app

Une excellente façon de commencer un projet React consiste à créer une application React. Cet outil abstrait une grande partie de l'outillage React en une seule dépendance. Des outils tels que Webpack, Babel et ESList sont sans danger. Vous pouvez commencer tout un projet React avec une seule commande. L'outil génère un ensemble minimal de fichiers afin que vous puissiez vous concentrer sur l'application. Vous aurez besoin du nœud 6+ pour l'utiliser.

Par exemple, pour lancer une application avec npx :

 npx créer-réagir-application my-killer-app

L'exécution de la commande ci-dessus créera un répertoire et générera des fichiers d'échafaudage. La commande installe des dépendances transitives sans intervention. Il n'y a pas de fichiers de configuration compliqués, seulement le strict minimum pour construire votre application.

Les mises à niveau sont encapsulées dans un seul package NPM. Inutile de jouer avec Webpack et ses amis pour profiter des dernières fonctionnalités. Vous pouvez mettre à niveau Create React App avec une seule commande lorsque de nouvelles versions sont livrées. Pour effectuer la mise à niveau, installez le package [NEM react-scripts @ latest ]

Dans le dossier du projet, vous pouvez trouver des commandes intégrées. L'exécution de npm start par exemple, démarre l'application. Lors de l'exécution, l'application chaude charge les modifications que vous apportez au code. Lorsque vous enregistrez des fichiers de projet, ces modifications sont rechargées dans le navigateur. Toutes les erreurs de compilation survenues apparaîtront dans la console qui a exécuté l'application.

Create React App vous accompagne dans l'automatisation des tests. Lancer npm test lancera Jest et exécutera tous les tests de votre projet. La commande exécute un observateur en mode interactif, elle garde donc trace des modifications apportées au fichier. Lorsque vous apportez des modifications, l'observateur exécute uniquement les tests concernés. Assurez-vous de nommer les fichiers de test *. Test.js pour que Jest puisse les récupérer.

Créez des résumés d'application React pour la configuration de projet. Les développeurs JavaScript ont souvent du mal à configurer les outils modernes. Donc, voici un outil qui automatise cela pour vous sans aucun problème.

Pour:

• commence par une seule commande
• avec une seule dépendance
• sans configuration nécessaire

Con:

Suivant .js

Next.js effectue le rendu côté serveur via une application React isomorphe. Il n'y a aucune installation et prend peu de temps pour commencer. Vous obtenez le fractionnement du code, le routage basé sur les dossiers, le rechargement de code à chaud et le rendu universel. La division de code ne charge que les composants nécessaires sur la page. Le routage recherche un dossier de pages dans le projet et trouve le fichier correspondant à la route liée. Le rechargement de code à chaud surveille les modifications de fichiers et recharge des parties de l'application. Cela convient aux développeurs qui aiment les boucles de rétroaction rapides entre les modifications de code. Le rendu s'effectue à la fois sur le client et sur le serveur car l'application est isomorphe. Cela permet la réutilisation du code car le même code qui s'exécute sur le serveur est également exécuté sur le client.

Pour commencer à utiliser Next.js, procédez comme suit:

 npm install --save next react rea-dom

Assurez-vous de créer un dossier de projet avec un package.json . Dans ce fichier de paquet, connectez Next.js avec les scripts next build et start . Ces scripts correspondent aux scripts que vous exécutez via NPM.

Avec Next.js, vous pouvez héberger des fichiers statiques en créant un dossier static . Tout ce que vous placez dans ce dossier devient un actif statique dans l'application. Cela vous permet de servir des éléments tels que des images ou des feuilles de style CSS.

Vous pouvez exporter Next.js sous forme de pages HTML statiques pour éliminer le rendu côté serveur. Dans le dossier du projet lors de la prochaine exportation génère des pages HTML statiques que vous pouvez héberger n'importe où. L'exportation prend en charge presque toutes les fonctionnalités, URL dynamiques, prélecture, préchargement et importations dynamiques. Par défaut, aucune configuration n'est nécessaire. Il génère des fichiers HTML statiques à partir du répertoire pages . La commande export réside dans le fichier package.json exécutez-la donc avec npm run export . Les fichiers d'exportation apparaîtront dans le répertoire out .

Pour:

• aucune configuration avec fonctions avancées
• l'application est prête pour une utilisation sans tracas
• l'option HTML statique élimine le rendu côté serveur

Con:

• La personnalisation des itinéraires peut s'avérer fastidieuse.

Redux

Dans React, il est fastidieux de passer en revue de nombreux paramètres d'accessoires et d'états. Une hiérarchie de composants peut avoir plusieurs composants React. Une erreur de paramètre unique quelque part dans la chaîne est dangereuse. Cela rend frustrant de déboguer des paramètres lorsqu'il y a beaucoup de composants.

Une meilleure solution consiste à résumer ceci via une machine à états. Redux est un conteneur d'état pour les programmes JavaScript. L'état entier de l'application va à l'intérieur d'un seul magasin. Pour changer d'état, lancez une action et laissez les réducteurs gérer le reste. Pensez à Redux comme une machine à états qui transforme les changements d’état en émettant des actions. La répartition des actions via le magasin est le seul moyen de changer d'état. Les réducteurs ne mutent pas d’état mais ne renvoient un nouvel objet que lorsque l’état change. Cela fait du réducteur une fonction pure qui garde l'application prévisible. Les bogues rampent souvent là où il y a un comportement imprévisible, aussi les réducteurs atténuent-ils ce problème.

Redux est une bibliothèque autonome, que vous pouvez utiliser en JavaScript vanille. Les liaisons React sont disponibles pour câbler une application React avec moins d'effort. Un rend le magasin Redux disponible pour le composant racine. La fonction connect connecte les états aux accessoires de tous les composants du magasin. La fonction de connexion fournit les paramètres nécessaires au bon fonctionnement de chaque composant.

Dans une application React typique, il existe un seul composant racine avec un magasin. Il peut exister une hiérarchie de magasins Redux qui séparent l’arbre d’état. Cela ressemble à React où un seul composant racine peut avoir de nombreux petits composants.

Pour configurer les liaisons Redux dans un projet React:

 npm install --save redux react-redux

Assurez-vous de traiter Redux et React-Redux comme des dépendances distinctes.

Pour:

• englobe la programmation sonore, comme les fonctions pures
• Des liaisons sont disponibles pour React
• la gestion automatique de l'état

.

• configurer à partir de zéro peut être un peu douloureux

Enzyme

Enzyme est comme jQuery pour tester des composants React. Vous pouvez rendre des composants peu profonds sans un navigateur sans navigateur. Vous pouvez parcourir, rechercher des composants et faire des assertions. Cela raccourcit la boucle de rétroaction car cela élimine le navigateur. Le rendu superficiel est utile car il n’existe pas plus d’un niveau de profondeur. Ceci isole le test à un seul niveau dans une hiérarchie de composants React.

L’API d’Enzyme prend en charge la simulation d’événements. La fonction simulate () appelle le gestionnaire d'événements dans un seul nœud. Par exemple, .simulate ('clic') appelle la fonction onClick de prop. Un rendu superficiel isole le noeud à tester, ce qui ajoute le focus.

Enzyme est fourni avec un adaptateur pour chaque version de React. Ainsi, enzyme-adapter-react-16 fonctionne sur React 16.4 ou une version ultérieure. Pour React 16.3.0, utilisez l'adaptateur enzyme-adapter-react-16.3 . Pour Jest 15+, Enzyme n’a plus besoin de configuration spéciale. Pour écrire des tests, importez les fonctions React, Enzyme et le système testé en haut

Par exemple:

 import React from 'react';
importer {peu profond} de 'enzyme';

importer Foo de '../Foo'; // système testé

decrire ('Une suite de tests meurtriers', () => {
  it ('devrait rendre peu profond sans navigateur', () => {
    // organiser
    composante constante = peu profonde ();

    // act
    const result = composant.contains (
 Bar 
);

    // affirmer
    attendre (résultat) .toBe (true);
  });
});

Le déchiffrage superficiel a une large gamme de sélecteurs et de fonctions pour rechercher des nœuds. Plumer un nœud à la fois vous permet d'affirmer la fonctionnalité de manière isolée.

Pour:

• rendu superficiel isole les composants de React
• riche API pour la recherche de nœuds d'intérêt
• pas besoin d'un navigateur sans tête

Con:

• les adaptateurs peuvent être dangereux avec chaque mise à niveau de React

ExtReact

React propose une approche basée sur les composants pour la création d'applications Web, mais React en tant que tel n'inclut aucun composant. ExtReact propose des composants prédéfinis tels que des menus, des grilles, des graphiques et des formulaires pour offrir des fonctionnalités. La communauté open source est grande et de nombreux composants sont disponibles. Cependant, la lutte contre les problèmes de compatibilité entre de nombreuses bibliothèques de composants et React est décourageante. Une meilleure idée est de réduire les risques en obtenant autant de composants de moins de bibliothèques, ou au mieux d'une bibliothèque unique. ExtReact propose le jeu le plus complet de composants dans un package professionnel unique et inclut le support commercial.

Pour commencer, vous avez besoin du nœud 8.11+, du NPM 6+ et de Java 8 & 11. Vous pouvez vous connecter à la version d'évaluation gratuite. Dépôt NPM sur npm.sencha.com . Installez le générateur d'applications avec npm install -g @ sencha / ext-react-gen . Créez ensuite une application avec de l'application killer-app ext-react-gen . Cela génère une application nommée killer-app . Allez dans le dossier du projet et faites un npm start pour lancer une application nue Reab

Importer des composants ExtReact à partir du paquet ext-react . Un composant peut venir avec son propre magasin pour obtenir des données. De nombreux accessoires sont disponibles avec des fonctionnalités prédéfinies. Par exemple, onSelect indique au composant List ce qu'il faut faire en cliquant sur un élément de la liste. Des trieurs sont disponibles pour trier les éléments de liste du composant.

Supposons donc que vous souhaitiez importer un composant List de base:

 importez React, {Component} à partir de 'react';
importer {liste} de '@ sencha / ext-modern';

export default class BasicList étend le composant {
  store = Ext.create ('Ext.data.Store', {
    autoLoad: true,
    Procuration: {
      type: 'reste',
      URL: 'data / people.json'
    },
    trieurs: ['first_name']
  });

  tpl = data => (
    

      
 {data.first_name} 
    
  );

  onSelect = (list, record) => {
    console.log (`$ {record.get ('prénom_nom' ')}`);
  };

  render () {
    revenir (
      
    )
  }
}

ExtReact propose plus de 115 composants d'interface utilisateur prédéfinis avec un support commercial complet. Les composants ExtReact sont conçus pour une intégration transparente sur toute la durée de vie de l'application.

Pour:

• large gamme de composants React préconstruits
• moins de dépendances sur les nombreuses options open source
• de composants professionnels avec support commercial

Con:

Les outils de développement de React vous permettent d'inspecter les composants de React directement dans le navigateur. Il peut inspecter une hiérarchie de composants, avec des accessoires et un état. Envoyé comme une extension de navigateur pour Chrome et Firefox, et comme une application autonome. Les utilisateurs d'Opera peuvent installer l'extension Chrome avec les extensions Chrome activées. L'icône d'extension s'allume sur les sites Web utilisant React et dit d'ouvrir les outils de développement.

Dans les applications React, notez l'onglet React dans les outils de développement. En cliquant sur l'onglet, une hiérarchie de composants apparaît dans une arborescence. Les composants avec l'état affichent un bouton de réduction d'arborescence de couleur différente. Vous pouvez naviguer dans l’arbre avec les touches fléchées ou hjkl comme avec Vim. Un clic droit vous permet d'accéder à des options telles que l'affichage dans le volet des éléments, le défilement dans l'affichage ou l'affichage du code source.

Le volet latéral vous donne davantage d'informations sur chaque composant. Il vous permet d’apporter des modifications au navigateur et de les mettre en évidence. Vous pouvez manipuler les objets et les objets state plus store en tant que variable globale.

Utilisez la barre de recherche pour rechercher des composants par leur nom. Cela vous fait gagner du temps lorsqu'il y a de nombreux composants dans un arbre. La barre de recherche prend en charge regex pour effectuer des recherches précises. Une astuce consiste à rechercher le composant à l'aide de l'inspecteur DOM standard ou de l'onglet Eléments. Choisissez l'élément de la page et passez à l'onglet Réagir. Le composant est sélectionné dans l’arbre de réaction. Un clic droit a l'option "Rechercher le nœud DOM" qui vous ramène à l'onglet normal.

Pour:

• permet de visualiser les composants React dans un arbre
• . Les manipuler et les déboguer à volonté
• utile. outils de recherche pour trouver des composants

Con:

• complément supplémentaire, mais offre une version autonome

Les outils pour le développeur Redux prennent en charge le rechargement à chaud et la relecture d'action. Expédié en tant qu'extension de navigateur, application autonome et composant React. Le composant React réside dans l'application hôte. L'outil vous permet d'inspecter chaque charge utile d'état et d'action. Remontez dans le temps en annulant des actions. Les modifications de code réévaluent les actions marquées comme étant en cours.

Installez l'extension via le Chrome Web Store ou les modules complémentaires Mozilla. Le composant React est disponible pour les navigateurs ne prenant pas en charge l'extension. Des modifications à votre projet sont nécessaires pour utiliser l'extension. L'extension doit être configurée dans le magasin Redux, avec les options d'extension.

Par exemple, pour configurer les outils de développement Redux avec les options:

 const store = createStore (
  fenêtre .__ REDUX_DEVTOOLS_EXTENSION__ && fenêtre .__ REDUX_DEVTOOLS_EXTENSION __ ({
    actionCreators,
    trace: true,
    traceLimit: 5
  })
)

Les actions disponibles dans Dispatcher proviennent de actionCreators . Ceci est une liste de fonctions d'action. Importer toutes les actions d’intérêt du projet dans cette variable. Les traceurs incluront la trace de la pile pour chaque action envoyée. L'inspection de l'onglet Trace permet de cliquer pour accéder au code. La valeur par défaut pour cette option est false. Une limite de trace définit le nombre maximal de cadres de pile affichés, la valeur par défaut étant 10.

L'application de tout middleware dans le magasin nécessite composeWithDevTools . Obtenez cette fonction à partir du paquet [NOM] de redux-devtools-extension . La fonction applyMiddleware entre dans cette fonction en tant que paramètre. Cela permet à l'outil de développement de fonctionner à côté du middleware.

Pour:

• L'outil de déplacement temporel de l'application
• conserve la trace des modifications de code lors du rechargement à chaud
• de traces de pile de débogage par action

.

• La configuration requise nécessite des modifications de code dans le projet

invariant redux-immutable-state

. Middleware générant une erreur lors de la mutation d'un état dans ou entre les répartiteurs. Les réducteurs supposent que les arguments ne mutent pas. Chaque fois que les réducteurs retournent à l'état, il doit s'agir d'un nouvel objet. Une bonne pratique consiste à éviter tout état de mutation en dehors du réducteur. Cela nécessite beaucoup de discipline de la part du programmeur. Donc, une bonne idée est d'automatiser cette inspection à l'aide d'un outil.

Cet outil est utile pour détecter les bogues lors du développement uniquement. Il fait beaucoup de copie d'objet pour imposer l'immuabilité. Cela signifie une consommation de mémoire élevée qui dégrade les performances de l'application. Pour cette raison, n'activez pas cet outil en production. Une idée est de définir une variable d'environnement NODE_ENV par exemple, vers production .

Pour utiliser cette bibliothèque en tant que middleware:

 import {applyMiddleware, createStore} à partir de 'redux' ;

laisser middleware = [];

// Assurez-vous d'ajouter UNIQUEMENT ce middleware en développement!
if (process.env.NODE_ENV! == 'production') {
  middleware.push (require ('redux-immutable-state-invariant'). default ());
}

const store = createStore (
  applyMiddleware (... middleware)
)

Si vous ne modifiez pas l’état, l’outil disparaît. L'état de mutation dans ou entre les répartiteurs et l'outil crie avec un message d'erreur.

Pour:

• sans faille et fonctionne avec n’importe quel flux de travail
• la discipline de la programmation automatique
• génère des erreurs avec un message descriptif

Con: [19659014] beaucoup de copies d'objets affectent les performances, mais ne l'activez que dans dev

. redux-logger

Un enregistreur d'actions pour Redux. Capture les actions du distributeur dans la console de journalisation du navigateur. Livré avec de nombreuses options et permet d'avoir un aperçu de chaque action déployée. Lorsque des actions se répercutent dans l'application, cela enregistre et vous permet d'explorer chaque action. Chaque entrée de journal capture l’état précédent et actuel, ainsi que l’action du répartiteur. Considérez chaque action comme un message de journal. L'enregistreur vous permet de voir à quoi ressemblent ces messages lorsqu'ils changent d'état dans l'application.

Pour utiliser l'enregistreur, configurez-le dans le magasin Redux:

 import {applyMiddleware, createStore} à partir de 'redux';

// Logger avec options par défaut
importer un enregistreur à partir de 'redux-logger';

const store = createStore (
  applyMiddleware (enregistreur)
)

Assurez-vous que l'enregistreur est le dernier argument de applyMiddleware pour qu'il capture les actions. Des options sont disponibles pour modifier le comportement de l’enregistreur. Vous devez importer createLogger de redux-logger . Appelez ensuite la fonction createLogger avec un objet options. Par exemple, le prédicat spécifie une fonction appelée avant chaque action. Doing (getState, action) => action.type! == UP_COUNT élimine les actions qui comptent. Une option collapsed est une fonction qui renvoie la valeur true si le groupe de journaux doit être réduit. Doing (getState, action) => action.type === DOWN_COUNT réduit les types d'action réduisant le nombre.

Pour:

• capture les actions du répartiteur telles que les messages de journalisation
• vous permet d'accéder en détail aux actions. chaque action et inspecter l'état de l'application
• vous permettent d'ajuster ce qui est capturé

Con:

• uniquement un enregistreur côté client, mais vous pouvez envoyer des messages avec un peu d'effort

Conclusion

L'utilité de React provient d'un ensemble d'outils et de bibliothèques qui fonctionnent bien. Ces outils sont souvent légers, vous pouvez donc brancher et jouer à volonté. La programmation ne consiste pas à réinventer la roue, mais à réutiliser des solutions existantes qui fonctionnent bien. La popularité de React découle du fait que vous pouvez choisir ce qui résout le problème immédiat. Cela vous permet de vous concentrer sur les problèmes pour lesquels la solution n’est pas déjà bonne.

Époux, père et ingénieur en logiciel vivant à Houston, au Texas. Passionné par JavaScript et le cyber-ingénierie.