20 outils React essentiels pour 2020 –

L'écosystème React est devenu une liste croissante d'outils et de bibliothèques de développement. La pléthore d'outils est un véritable témoignage de sa popularité. Pour les développeurs, cela peut être un exercice vertigineux de naviguer dans ce labyrinthe qui change à une vitesse vertigineuse. Pour vous aider à naviguer dans votre cours, voici une liste des outils React essentiels pour 2020.

Crochets

Les crochets sont un nouvel ajout à React à partir de la version 16.8. Ils débloquent des fonctionnalités utiles dans des composants sans classe. Avec Hooks, React n'a plus besoin de méthodes de cycle de vie telles que componentDidMount pour gérer l'état. Cela encourage la séparation des préoccupations car les composants ne gèrent pas leur propre état. Mettre beaucoup de gestion d'état dans les composants de classe fait exploser la complexité. Cela rend les composants avec état plus difficiles à entretenir.

Les crochets de base suivants sont disponibles:

• useState: pour la mutation de l'état dans un composant sans classe sans méthodes de cycle de vie
• useEffect: pour exécuter des fonctions après le rendu, utile pour lancement de requêtes Ajax
• useContext: pour changer les données de contexte des composants, même en dehors des accessoires de composants

Pour:

• atténue la complexité de la gestion des états
• prend en charge les composants fonctionnels
• encourage la séparation des préoccupations

Contre: [19659005] la commutation des données de contexte peut exposer la charge cognitive

Composants fonctionnels

Les composants fonctionnels sont un moyen déclaratif de créer un balisage JSX sans composants de classe. Ils adoptent le paradigme fonctionnel car ils ne gèrent pas l'état dans les méthodes de cycle de vie. Cela met l'accent sur le balisage de l'interface utilisateur sans trop de logique. Parce que le composant repose sur des accessoires, il devient plus facile à tester. Les accessoires ont une relation un à un avec la sortie rendue.

Voici à quoi ressemble un composant fonctionnel dans React:

 const SimpleComponent = ({isInit, data}) =>
<>
  {useEffect (() => {! isInt && loadAjaxData ()})}
  {Les données}

Pour:

• se concentre uniquement sur l'interface utilisateur
• composant testable
• moins de charge cognitive en pensant au composant

Contre:

Create React App

L'outil par excellence pour déclencher un nouveau projet React. Cela gère toutes les dépendances de React via un seul package npm. Plus besoin de travailler avec Babel, webpack et ainsi de suite. L'ensemble de la chaîne d'outils de dépendance est mis à niveau avec react-scripts dans package.json . Il existe un moyen d'intégrer l'application Create React à n'importe quel outil de rendu côté serveur. L'outil génère index.html et les actifs statiques dans le dossier public . Ce dossier public est le point de contact où les ressources statiques sont prêtes pour l'intégration.

Il est facile de commencer:

 npx create-react-app my-killer-app

Et il est encore plus facile de mettre à niveau plus tard:

 npm i react-scripts @ latest

Pour:

• facile à démarrer
• facile à mettre à niveau
• méta-dépendance unique

Contre:

• pas de rendu côté serveur, mais permet l'intégration

Proxy Server [19659003] À partir de la version react-scripts@0.2.3 ou supérieure, il est possible de mandater des requêtes API. Cela permet à l'API back-end et au projet local Create React App de coexister. Du côté client, faire une demande à / my-killer-api / get-data achemine la demande via le serveur proxy. Cette intégration transparente fonctionne aussi bien en développement local qu'en post-construction. Si le développeur local s'exécute sur le port localhost: 3000 les demandes d'API passent par le serveur proxy. Une fois que vous déployez des actifs statiques, il passe par le serveur principal qui héberge ces actifs.

Pour définir un serveur proxy dans package.json :

 "proxy": "http: // localhost / my-killer-api-base-url "

Si l'API principale est hébergée avec un chemin d'accès relatif, définissez la page d'accueil:

 "homepage": "/ relative-path"

Avantages:

• intégration transparente avec l'API back-end
• élimine les problèmes CORS
• configuration facile

Con

• Con
  • peut nécessiter une couche proxy côté serveur avec plusieurs API

  PropTypes [19659003] Déclare le type destiné au composant React et documente son intention. Cela montre un avertissement dans le développement local si les types ne correspondent pas. Il prend en charge toutes les primitives JavaScript telles que bool numéro et chaîne . Il peut documenter les accessoires requis via isRequired .

  Par exemple:

   import PropTypes;
  
  MyComponent.propTypes = {
    boolProperty: PropTypes.bool,
    numberProperty: PropTypes.number,
    requiredProperty: PropTypes.string.isRequired
  };
  

  Pour:

  • documente l'intention du composant
  • affiche les avertissements dans le développement local
  • prend en charge toutes les primitives JavaScript

  Contre:

  TypeScript

  JavaScript qui évolue pour les projets React avec vérification de type de compilation. Cela prend en charge toutes les bibliothèques et tous les outils React avec des déclarations de type. Il s'agit d'un sur-ensemble de JavaScript, il est donc possible de désactiver le vérificateur de type. Cela documente à la fois l'intention et échoue à la génération lorsqu'elle ne correspond pas. Dans les projets Create React App, activez-la en passant - modèle tapuscrit . La prise en charge de TypeScript est disponible à partir de la version react-script@2.1.0 .

  Pour déclarer un type d'accessoire:

   interface MyComponentProps {
    boolProp?: booléen; // optionnel
    numberProp?: nombre; // optionnel
    requiredProp: chaîne;
  }
  

  Pour:

  • la vérification du type de compilation
  • prend en charge tous les outils et bibliothèques React, y compris Create React App
  • une belle façon d'améliorer vos compétences JavaScript

  Contre:

  • a une courbe d'apprentissage, mais choisissez out is possible

  Redux

  Conteneur de gestion d'état prévisible pour les applications JavaScript. Cet outil est livré avec un magasin qui gère les données d'état. La mutation d'état n'est possible que via un message de répartition. L'objet de message contient un type qui signale au réducteur la mutation à déclencher. La recommandation est de tout garder dans l'application dans un seul magasin. Redux prend en charge plusieurs réducteurs dans un seul magasin. Les réducteurs ont une relation un à un entre les paramètres d'entrée et l'état de sortie. Cela fait des réducteurs des fonctions pures.

  Un réducteur typique qui mute l'état pourrait ressembler à ceci:

   const simpleReducer = (state = {}, action) => {
    commutateur (action.type) {
      cas 'SIMPLE_UPDATE_DATA':
        return {... state, data: action.payload};
  
      défaut:
        état de retour;
    }
  };
  

  Pour:

  • gestion prévisible de l'état
  • plusieurs réducteurs dans un même magasin
  • les réducteurs sont de simples fonctions

  Contre:

  • mis en place à partir de zéro peut être un peu pénible

  React-Redux

  Liaisons officielles React pour Redux, il se décline en deux modules principaux: Provider et connect . Le fournisseur est un composant React avec un accessoire store . Cet accessoire est la façon dont un magasin unique se connecte au balisage JSX. La fonction de connexion prend deux paramètres: mapStateToProps et mapDispatchToProps . C'est là que la gestion de l'état de Redux se lie aux accessoires de composants. Lorsque l'état mute ou distribue le feu, les liaisons se chargent de définir l'état dans React.

  Voici à quoi pourrait ressembler une connexion:

   import {bindActionCreators} de 'redux';
  importer {connect} depuis 'react-redux';
  
  const mapStateToProps = (state) => state.simple;
  const mapDispatchToProps = (dispatch) =>
    bindActionCreators ({() => ({type: 'SIMPLE_UPDATE_DATA'})}, répartition);
  
  connect (mapStateToProps, mapDispatchToProps) (SimpleComponent);
  

  Pour:

  • liaisons officielles React pour Redux
  • se lie avec le balisage JSX
  • relie les composants à un seul magasin

  Contre:

  • la courbe d'apprentissage est quelque peu raide

  Redux-Thunk [19659003] Thunk middleware pour Redux pour effectuer des appels d'API asynchrones. Il diffère l'exécution derrière un thunk pour déverrouiller l'asynchronie. Un thunk est une fonction qui diffère l'évaluation. Par exemple, () => 1 + 1 car il n'a pas d'exécution immédiate. Cela vient avec des subtilités, comme l'accès à l'état du magasin et l'expédition. Les paramètres facultatifs sont également pris en charge dans le thunk.

  Par exemple:

   const loadData = () => async (dispatch, getState, optionalAsyncTool) => {
    const state = getState ();
  
    réponse const = attendre optionnel AsyncTool.get ('/ url /' + state.data);
    dispatch ({type: 'SIMPLE_LOAD_DATA', charge utile: response.data});
  };
  

  Pour:

  • outil par excellence pour asynchronie
  • accès à l'état et répartition
  • configurable avec le paramètre facultatif

  Contre:

  • au début, l'utilité n'est pas très claire

  Redux-Logger

  Enregistreur pour Redux qui capture toutes les expéditions passant par le magasin. Chaque répartition s'affiche dans la console de développement dans un message de journal. Il permet de forer dans l'état précédent et suivant. L'action dans l'envoi est également disponible pour l'inspection de la charge utile. Cet enregistreur est utile dans le développement local et peut être extrait après la construction.

  Ce qui suit est une configuration potentielle dans le middleware Redux:

   import {createStore} de 'redux';
  
  laissez middleware = [];
  
  if (process.env.NODE_ENV === 'développement') {// arracher après la construction
    const {logger} = require ('redux-logger');
    middleware.push (enregistreur);
  }
  
  export default () => createStore ({}, applyMiddleware (... middleware));
  

  Pour:

  • une bonne vision de Redux
  • capture toutes les dépêches dans le magasin
  • peut s'exécuter uniquement en tant que développeur local

  Contre:

  • difficile à filtrer les messages indésirables

  Lodash

  Une bibliothèque d'utilitaires JavaScript moderne utile pour les composants React. L'entrée de formulaire de réaction est identique à onChange se déclenche une fois par frappe. Si le composant obtient des données d'une API principale, il déclenche des demandes une fois par frappe. Cela spams l'API back-end et provoque des problèmes lorsque de nombreuses personnes utilisent l'interface utilisateur. Lodash est livré avec des événements anti-rebond, qui déclenchent une demande d'API avec de nombreuses frappes.

  Pour configurer onChange événements anti-rebond:

   onChange = {(e) => debounce (updateDataValue (e.target). valeur), 250)}
  

  Pour:

  • la dépendance modulaire
  • fonctionne bien avec le fractionnement de code
  • facile à utiliser

  Contre:

  • il n'est pas immédiatement évident de savoir quand rebondir sur les événements

  Axios

  client HTTP basé sur qui fonctionne bien dans les thunks. L'outil prend en charge la syntaxe async / attente pour effectuer des requêtes Ajax à partir du navigateur. Il prend en charge la gestion des erreurs en cas d'erreurs via catch . L'API de l'outil prend en charge les requêtes HTTP telles que GET, DELETE, POST, PUT et PATCH. Cela fonctionne également bien avec les appels de l'API Promise comme Promise.all () pour envoyer des requêtes HTTP en parallèle.

  De l'intérieur d'un thunk, axios peut fonctionner comme ceci:

   const loadData = () = > async (dispatch, getState, axios) => {
    essayez {
      réponse const = attendre Promise.all ([
        axios.get('/url'),
        axios.post('/url', getState())
      ]);
  
      dispatch (updateData (réponse [0] .data));
      envoi de retour (updateData (réponse [1] .data));
    } catch (raison) {
      envoi de retour (erreur (reason.message));
    }
  };
  

  Pour:

  • basé sur la promesse
  • prend en charge asynchrone / attend
  • prend en charge la gestion des erreurs

  Contre:

  • il ne peut pas être plus génial

  Jest

  Jest est un test cadre avec un accent sur la simplicité pour les projets JavaScript. La bonne nouvelle est qu'il est intégré à l'application Create React. Il fonctionne avec des projets qui utilisent Babel, TypeScript et Node. Il n'y a pas de configuration sur la plupart des projets React. Les tests peuvent s'exécuter en mode veille, qui assure le suivi des modifications de code et réexécute les tests. L'API le contient et s'attendent à ce que démarre rapidement.

  Un contrôle de cohérence pour s'assurer que les tests s'exécutent est:

   il ('dit que la vérité est vraie', ( ) => {
    attendre (vrai) .àBe (vrai);
  });
  

  Pour:

  • configuration facile avec Create React App
  • API courante
  • s'exécute en mode montre

  Contre:

  • os trop nus pour rendre les composants React

  Enzyme

  A Utilitaire de test JavaScript pour React qui facilite le test des composants. L'API est censée être aussi intuitive que jQuery pour la traversée des composants. Pour obtenir Enzyme, il a besoin de deux packages: enzyme et un adaptateur séparé. L'adaptateur doit être compatible avec la version de React. Par exemple, enzyme-adapter-react-16 pour React ^ 16.4.0 enzyme-adapter-react-16.3 pour ~ 16.3.0 etc., etc. L'adaptateur a besoin d'un fichier de configuration setupTest.js pour s'intégrer à Jest.

  Lorsque vous utilisez React 16, installez Enzyme avec:

   npm i --save-dev enzyme enzyme-adapter-react-16
  

  Pour:

  • prend en charge les composants React
  • prend en charge le framework de test Jest
  • API intuitive

  Contre:

  • un peu difficile à configurer l'adaptateur dans Jest

  Shallow Renderer

  Ceci est rendu peu profond utile pour limiter les tests à un niveau de profondeur. Il rend le composant parent sans affecter ses enfants dans une hiérarchie d'arborescence. Cela isole le test et rend les assertions plus robustes. Le rendu peu profond prend en charge une bonne partie de l'API Enzyme pour traverser les composants. L'API peu profonde appelle des méthodes de cycle de vie comme componentDidMount et componentDidUpdate pendant le rendu. Avec Hooks, le rendu peu profond n'appelle pas useEffect . Une astuce consiste à faire console.log (component.debug ()) pour inspecter ce que le rendu peu profond voit.

  Pour tester un composant React à l'aide du rendu peu profond:

   const component = shallow ();
  attendez (component.find ('p'). at (0) .text ()). toBe ('Dave');
  

  Pour:

  • test des isolats
  • API complète
  • permet un débogage rapide

  Contre:

  • doit naviguer dans la mer des options de l'API d'Enzyme pour trouver ce diamant à l'état brut

  Storybook

  Outil open source pour le test manuel des composants React en isolation. Storybook fournit un bac à sable pour construire des composants pour entrer dans des cas difficiles à atteindre. Il permet de se moquer afin de rendre les composants dans des états clés difficiles à reproduire. La configuration est automatique avec Create React App lors de l'utilisation de react-scripts . Chaque histoire dans Storybook peut cibler un seul composant avec plusieurs états. Les fichiers d'histoire ont une convention comme component.stories.js donc on peut les trouver rapidement.

  Pour commencer avec Storybook:

   npx -p @ storybook / cli sb init
  

  Pour:

  • couvre les boîtiers difficiles à atteindre
  • rend les composants dans le bac à sable
  • s'intègre à l'application Create React

  Contre:

  React Bootstrap

  Il s'agit du frontal le plus populaire framework reconstruit pour React. Chaque composant Bootstrap est construit à partir de zéro en tant que composant React. Cela remplace Bootstrap JavaScript et les dépendances Nukes comme jQuery. La dernière version bêta prend en charge Bootstrap 4.3. React Bootstrap fonctionne avec les milliers de thèmes Bootstrap déjà trouvés dans la version 4. Chaque composant a l'accessibilité à l'esprit et est accessible par défaut. Il prend en charge Create React App prêt à l'emploi et des thèmes personnalisés sont également pris en charge.

  Pour lancer React Bootstrap dans un projet React:

   npm installe react-bootstrap bootstrap
  

  Voici à quoi pourrait ressembler le résultat:

  

  Avantages:

  • reconstruit à partir de zéro avec des composants React
  • accessibilité à l'esprit
  • prend en charge Create React App

  Inconvénients:

  • les thèmes personnalisés peuvent être délicats dans Create React App

  Material-UI

  Composants React populaires pour un développement Web plus rapide et plus facile. Cela permet de créer votre propre système de conception ou de commencer par Material Design. Il existe des modèles et des thèmes disponibles, premium et gratuits. Les thèmes premium ont un prix en fonction de la fonctionnalité. Material-UI est fourni via un package NPM pour une installation rapide.

  Pour commencer avec Material-UI:

   npm install @ material-ui / core
  

  Voici à quoi pourrait ressembler le résultat:

  

  Avantages:

  • créez une interface utilisateur puissante avec moins d'effort
  • propose de nombreux composants
  • propose de nombreux modèles [19659008] Inconvénients:
    • certains modèles premium coûtent cher, mais pourraient en valoir la peine

    Interface utilisateur élémentaire

    Une boîte à outils pour les applications React initialement utilisée dans KeystoneJS. Il s'agit d'une boîte à outils d'interface utilisateur expérimentale née des exigences du monde réel. L'objectif est un ensemble non composé de composants React, autonomes ou regroupés. Il est livré avec un style par défaut discret et des capacités de thème flexibles.

    Pour commencer avec Elemental UI:

     npm i elemental --save
    

    Le résultat pourrait ressembler à ceci:

    

    Pour:

    • composants autonomes réutilisables
    • styles par défaut flexibles
    • inspirés de scénarios réels

    Contre :

    UI sémantique

    La boîte à outils UI d'intégration sémantique UI React officielle. Livré sans jQuery car toutes les fonctionnalités de jQuery sont reconstruites dans React. Une API déclarative fournit des fonctionnalités robustes et une validation des accessoires. L'augmentation via comme permet de contrôler la sortie, utile pour MenuLinks et react-router . Les accessoires raccourcis génèrent du balisage, ce qui facilite l'utilisation des cas d'utilisation. Les sous-composants ont un accès complet au balisage; cette flexibilité déverrouille la personnalisation des composants. Les composants avec état gèrent l'état hors de la boîte, sans câblage supplémentaire. Par exemple, Dropdown s'ouvre au clic sans onClick vers le open prop. La définition d'un accessoire délègue le contrôle à cette valeur, tandis que les autres restent contrôlés automatiquement.

    Voici à quoi pourrait ressembler l'augmentation dans React Semantic UI:

     import {Link} from 'react-router-dom';
    
    
      
         Élément de menu
      
    
    

    Et voici l'apparence:

    

    Pour:

    • jQuery free
    • déclarative via les accessoires
    • l'augmentation permet une personnalisation poussée

    Contre: [19659214] Conclusion

Comme indiqué, l'écosystème de React a explosé au cours des dernières années. C'est l'outil de choix pour les entreprises qui souhaitent réutiliser les composants React dans une suite cohérente. Chaque outil est autonome avec peu d'interdépendances. Pour 2020, ma recommandation est d'essayer ces outils au moins.

En attendant, développez vos compétences React avec notre lecture supplémentaire recommandée:

Mari, père et ingénieur logiciel vivant à Houston Texas. Passionné par JavaScript et le cyber-ing. Tout.