Les meilleurs outils et bibliothèques React pour accélérer le développement front-end

Étant le framework JavaScript frontal le plus populaire, l'écosystème React est vivant et plein d'outils et de packages utiles que vous pouvez intégrer dans votre application. Nous aborderons ici certains des plus utiles et vous montrerons comment les utiliser.

React DevTools

React Devtools est une extension Chrome et Firefox extrêmement utile lors du débogage des applications React. Vous pouvez le considérer comme l'inspecteur des éléments de Chrome: il vous permet de naviguer dans l'arborescence de vos applications, mais plutôt que d'afficher du HTML et du CSS, vous affichez les accessoires et l'état.

Vous pouvez également sélectionner des éléments comme vous le feriez avec les outils de développement de Chrome, ce qui peut être pratique lorsque vous travaillez avec des applications complexes.

L'extension inclut également le React Profiler, qui multiplie le rendu des composants et aide à éliminer les mauvaises performances et les «jank» dans votre application.

Le profileur peut analyser votre application et générer un graphique à barres des composants les plus gourmands en rendu.

Routeur React

react-router est le package incontournable pour gérer le routage basé sur les chemins dans votre application. Il ajoute un nouveau composant qui se trouve au niveau supérieur de votre application et achemine vers d'autres composants en fonction du chemin de l'URL, vous permettant de tout organiser en composants «Conteneur» qui représentent des pages individuelles.

Par exemple, le haut Le composant de votre application peut ressembler à ceci:

export default function App() {
  return (
    
      

        

        
          
            
          
          
            
          
          
            
          
        

      
    
  );
}

le Le composant regarde tous ses enfants et trouve un composant avec un path argument qui correspond au chemin donné. S'il correspond, tous les composants enfants du sont rendus, contenant généralement un composant conteneur pour une page entière.

Vous pouvez même définir des chemins avec des variables, telles que users/:userID, qui peut être récupérée dans le composant enfant avec useParams().

Parce que React Router gère tout le routage lui-même, il est incroyablement vif pour le client. C'est ce qu'on appelle une application à page unique ou SPA. Au lieu de demander de nouvelles pages à un serveur, le client réécrit dynamiquement la page actuelle. Dans le cas de React Router, il achemine en fonction de l'URL pour offrir une expérience transparente – vos utilisateurs penseront simplement que votre site se charge instantanément.

Redux

Redux est un conteneur d'état pour votre application React. Il ajoute un magasin de données global auquel vous pouvez vous connecter à partir de n'importe quel composant, avec des actions et des réducteurs que vous pouvez envoyer pour modifier l'état actuel.

En réalité, Redux n'est qu'un wrapper sophistiqué pour l'API contextuelle de React. Le contexte vous permet de transmettre des données à n'importe quel composant sans passer manuellement les accessoires via les composants intermédiaires. Bien que vous puissiez implémenter votre propre banque de données globale de base similaire à Redux assez facilement, Redux présente quelques avantages par rapport à cette approche.

Tout d'abord, les outils de débogage de Redux sont fantastiques. Étant donné que l'état est immuable et ne peut être mis à jour que via des actions et des réducteurs, il permet le débogage de Time-Travel. Vous pouvez remonter dans le temps et regarder vos actions affecter l'état actuel, et explorer votre arborescence d'états à l'aide de Redux Devtools.

Redux peut également être étendu avec un middleware et fournit une bonne plate-forme pour l'interopérabilité des packages. Par exemple, Redux Saga est un modèle d'effets secondaires pour Redux qui facilite le travail avec des actions asynchrones, telles que la récupération de données à partir d'une base de données ou d'un cache de navigateur.

Redux gère également proprement les mises à jour des composants: un seul changement d’état ne déclenchera pas le rendu de chaque composant connecté, mais uniquement de ceux qu’il affecte, évitant ainsi les secousses inutiles.

Composants stylisés

styled-components facilite le travail avec CSS dans React. Bien que vous puissiez simplement donner à tout des noms de classe et les styliser comme d'habitude, ce n'est pas aussi «intelligent» et ne se connecte pas aux accessoires et à l'état très facilement. React a son propre système de style, mais il utilise une syntaxe différente, et c'est un peu maladroit.

Styled Components résout ce problème en vous permettant d'écrire du CSS directement dans une chaîne littérale, créant un nouveau «composant stylé» dans le processus. Par exemple, vous pouvez créer un bouton qui change de couleur en fonction de props.primary en remplaçant le background value avec une fonction qui recherche des accessoires, comme ceci:

const Button = styled.a`
border-radius: 3px;
padding: 0.5rem 0;
background: ${props => props.primary ? "palevioletred" : "white"};
border: 2px solid white;`

Vous n'êtes pas limité non plus aux primitives: vous pouvez créer des versions stylisées de vos propres composants.

Réagir Bootstrap

Bootstrap est la bibliothèque de composants frontaux la plus populaire sur le Web. Il fournit de nombreux composants différents pour les éléments d'interface utilisateur courants tels que les barres de navigation, les formulaires, les cartes et bien plus encore, vous évitant de les écrire à partir de zéro.

React Bootstrap propose les primitives de Bootstrap en tant que composants React, que vous pouvez étendre avec un style personnalisé pour répondre aux besoins de votre application. Bootstrap évite d'avoir à modifier le formatage des coulisses comme le rembourrage, les marges, la boîte flexible et la mise en page, vous laissant vous concentrer sur le style et les fonctionnalités de votre application.

Vous pouvez parcourir leur bibliothèque de composants ici pour en savoir plus.

Livre d'histoires

Si votre application utilise beaucoup de composants, vous pourriez être intéressé par une meilleure façon de les gérer et de les tester. Storybook fournit un environnement en bac à sable pour créer et tester des composants d'interface utilisateur de manière isolée, ainsi qu'un moyen simple de gérer et d'organiser votre bibliothèque de composants dans son ensemble.

Chaque composant est visible de manière isolée et possède plusieurs «boutons» qui contrôlent les données qui leur sont envoyées. Vous pouvez même rédiger une documentation étendue pour le composant, ce qui contribue à améliorer la convivialité interne. Bien sûr, Storybook nécessite un certain niveau de configuration supplémentaire pour chaque composant, et l'écriture de documentation n'est pas gratuite, mais pour les grandes équipes avec un ./components dossier, Storybook peut vous aider à l'organiser.

Si vous souhaitez faire une démonstration de son utilisation, de nombreuses démos en direct sont disponibles en ligne par des sociétés comme IBM, Uber et Coursera qui utilisent Storybook pour gérer leurs bibliothèques de composants.

Si Storybook est trop pour vous, vous pouvez essayer Styleguidist, qui fournit un guide de style facile à gérer pour vos développeurs.