Retour • 07/07/2024

Les meilleures librairies React en 2024

Écris par Melvyn Malherbe le 07/07/2024

Quel sont les meilleurs librairies React catégorisées par fonctionnalités et type pour 2024. J'ai fouillé tout le web pour t'aider à choisir.

Pour ça j'ai défini 5 catégories :

• Commencer un nouveau projet
• Les packages managers
• Les State Management
• Le Data Fetching
• Le Routing
• Le Style CSS
• Les UI libraries
• Les Animations Libraries
• Les graphiques
• Les form
• Les librairies de Type Checking

Ce sont les catégories de base pour créer des applications.

Commencer un nouveau projet

Pour créer un projet en 2024, il te faudra utiliser un "framework" ou un "outil" qui te permet de le faire. React ne peut pas vraiment être utilisé seul.

Si tu souhaites faire une SPA, la meilleure solution est d'utiliser ViteJS qui est très simple à utiliser et prendre en main.

En règle générale, tu vas vouloir créer des applications fullstack et pour ça je te recommande NextJS.

• ViteJS (pour les SPA)
• NextJS (✨ recommandé par moi et react.dev)
• Remix

Packages managers

Les packages managers te permettent de télécharger des librairies et de les mettre à jour.

Je suis un grand fan de pnpm car il est beaucoup plus rapide, efficace, efficient et simple à utiliser que les alternatives. J'ai fait une vidéo sur le sujet..

• pnpm (✨ recommandé)
• yarn
• npm

State Management

Le state management est devenu essentiel dans des applications dès que tu commences à avoir plusieurs états et logique partagée à des endroits distincts.

Je te recommande vivement d'utiliser Zustand, c'est de loin l'outil le plus simple et flexible pour scale. Surtout si c'est un "petit" ou "moyen" projet.

Le plus populaire au monde reste Redux, mais il est devenu un peu trop complexe pour les débutants.

• Redux
• Zustand (✨ recommandé)
• Recoil
• Jotai

Data Fetching

En React il ne faut pas utiliser useEffect avec un fetch à l'intérieur pour fetch tes données. Je te recommande de toujours utiliser une librairie.

La librairie la plus efficace et populaire est TanStack Query.

Elle possède la plus grosse communauté et est plutôt simple à utiliser.

• TanStack Query (✨ recommandé)
• SWR

Routing

Le routing n'est pas un problème si tu utilises NextJS ou Remix.

Par contre pour ViteJS, tu peux te poser la question de comment faire un routing.

En règle générale je te conseille d'utiliser React Router qui est la librairie qui a le plus d'expérience et la plus de communauté.

TanStack Router est arrivé très récemment. Je ne doute pas qu'il sera génial bientôt mais pour l'instant, je ne le recommande pas.

• React Router (✨ recommandé)
• TanStack Router

Style CSS

Toute application React a besoin de gérer des styles et l'affichage de ton application. Pour ça tu peux vouloir utiliser des librairies si tu ne veux pas faire un CSS Global (ce que je ne te recommande pas).

Je te conseille vivement d'utiliser TailwindCSS car il est très simple à utiliser et il est très performant.

Si tu aimes le CSS-in-JS, tu peux utiliser PandaCSS ou PigmentCSS qui est un super choix.

Les autres librairies tels que Styled Components ou Emotion sont maintenant moins intéressantes car elles utilisent une build lors du runtime.

• TailwindCSS (✨ recommandé)
• PandaCSS
• PigmentCSS
• Emotion (❌ pas recommandé)
• Styled Components (❌ pas recommandé)

UI libraries

Si tu souhaites créer une application rapidement, et accessible tu pourrais être intéressé d'utiliser une UI library.

Récemment une tendance des "librairies qui n'en sont pas une" est apparue, comme Shadcn. Shadcn/UI utilise Radix avec TailwindCSS et te permet de copier / coller des composants.

C'est sûrement la solution la plus en vogue en ce moment car elle est la plus optimisée pour la stack NextJS.

Tu pourrais être intéressé aussi par Chakra UI ou MUI qui sont de bons outils mais qui utilisent du CSS-in-JS.

Le choix de la UI librairie va donc revenir à ton choix de style CSS.

• Shadcn (✨ recommandé)
• Chakra UI
• MUI

Animations Libraries

Pour gérer les animations, tu peux avoir envie d'utiliser plus que le CSS basique. Et pour ça il y a Framer Motion et React Spring.

Ces deux librairies offrent des API très simples à utiliser et te permettent de créer des animations complexes voire impossibles en CSS, tout ça rapidement.

• Framer Motion (✨ recommandé)
• React Spring

Graphiques

J'ai testé des dizaines de librairies de graphiques et je reviens toujours sur Recharts qui offre de loin la meilleure DX (développement expérience) que j'ai trouvée.

Elle offre une API simple et des composants qui marchent rapidement avec un très haut niveau de customisation.

• Recharts (✨ recommandé)
• Chart.js (❌ pas recommandé)
• Plotly
• Visx (sympa aussi)

Form

Les formulaires sont l'endroit où il y a eu le moins d'avancées ces dernières années

TanStack Form est sorti en V0 ce qui ne me donne pas encore envie de l'utiliser.

Et React Hook Form domine le marché de loin depuis plusieurs années.

• TanStack Form
• React Hook Form (✨ recommandé)

Type Checking

Pour éviter les bugs quand tu fetch des données et dans beaucoup de cas où tu n'es pas très sûr des données que tu reçois, il faut utiliser des librairies de type checking.

Celle que j'aime le plus c'est Zod qui recopie exactement la syntaxe de TypeScript.

Sinon Valibot est beaucoup moins populaire mais offre une alternative bien plus performante

• Zod (✨ recommandé)
• Valibot

Conclusion

Tu as maintenant toutes les librairies qu'il te faut pour créer des applications React de fou furieux.

Mais attention...

Il faut d'abord maîtriser React et pour ça je t'invite à t'inscrire à BeginReact qui sont des cours totalement gratuits et accessibles pour les débutants.