Guillaume David - August 8, 2022
La communauté React est très active et cela se voit dans la quantité monstrueuse de bibliothèques disponibles. Alors dans cet article, je vous parle de 5 bibliothèques très populaires que j’utilise quotidiennement.
Redux
La gestion de l’état dans une application React peut être difficile, cela peut vite devenir une usine à gaz pour des applications complexe. Heureusement pour nous, la communauté a créé des bibliothèques de gestionnaire d’état. Le plus populaire d’entre eux : Redux.
Redux est un state manager, c’est-à-dire qu’il va gérer le state de votre application, la mettre à jour… Si vous êtes un habitué de React, vous devez vous rendre compte de la puissance de cet outil qui permet d’outrepasser les limites de useState.
Styled Components
Styled Components est une bibliothèque de CSS in JS. C’est-à-dire, qu’on utilise le JavaScript pour générer du CSS. C’est une méthode de stylisation de plus en plus utilisée par les développeurs, car elle apporte quelques avantages dont notamment le fait le style et le reste de la page dans le même fichier. Avec React, cela permet d’associer un composant avec son style.
Cette bibliothèque vous apportera donc une meilleure maintenabilité de vos composants, de plus, son utilisation est assez simple de quoi vous permettre de vite le tester !
React Testing Library
Je parle rarement des tests dans mes articles, pourtant et là, je m’adresse aux développeurs débutants, il faut savoir que cela représente 50 % du métier de développeur. Pour cela, la communauté a créé une multitude d’outils pour tester son code et parmi eux, React Test Library.
C’est une bibliothèque accès front end qui se concentre sur l’accessibilité de votre code. Sa philosophie et de vous mettre dans la peau de l’utilisateur, il encourage donc à faire des tests les plus de l’utilisation réelle de votre application ce qui permet alors de leur faire confiance.
De plus, elle est recommandée par les développeurs de React eux même.
React Router DOM
Vous ai-je déjà dit que React n’a pas de fonction de routage intégré par défaut ?
React router dom permet donc d’ajouter le routage (uns fonction de navigation dans votre application) à React. Il est le plus populaire pour cela et tout comme React testing library, il est conseillé par les développeurs de React.
Next.js
Pour finir, un petit dernier un peu particulier, car ce n’est pas une bibliothèque, mais un framework.
Next.js est un framework basé sur React qui ajoute pas mal de fonctionné à ce dernier. Avant d’aller plus loin, sachez que React ne fonctionne que du côté client et ne fait pas de rendu coté serveur. Cela pose quelques problèmes dont je reviendrais dans un autre article. Pour l’anecdote d’ailleurs, saviez-vous que le site officiel de React utilise un framework basé sur React ? Un concurrent de Next.js, Gatsby.
Pour cela, des framework basé sur React ont vu le jour et parmi les plus populaires, on a Next.js.
Vous l’avez compris, il permet le rendu coté serveur et génère le HTML de manière dynamique. Il prend en charge aussi le SSG (Static site generation) mais je ne vais plus rentrer dans les détails (ce sera là aussi dans un prochain article).
Pour conclure, Next.js est fourni par défaut avec plusieurs fonctionnalités d’un système de routage par exemple
