On met en place une stack React propre et complète - Olivier ABDELNOUR (Takima)

Summary

Olivier Abdénour, développeur front-end chez Takima, partage son expertise sur la création d'un projet RAC propre et complet. Il présente un ensemble d'outils et de bibliothèques pour faciliter le développement avec React, en utilisant des frameworks comme Next, une gestion de données efficace avec Tank Stack, et des conseils sur la réutilisation de composants. Il aborde également l'optimisation des rendus et l'utilisation des effets avec React, en mettant l'accent sur la gestion des états localement et l'importance des bonnes pratiques pour éviter la complexité et améliorer les performances des applications.

Takeaways

• 😀 Il est essentiel de ne pas se limiter à React pour créer une application, mais d'utiliser un ensemble de concepts complémentaires comme le routage, l'authentification et le SSR.
• 😀 Next.js est un excellent choix pour un framework complet, soutenu par Vercel, avec une documentation riche, une grande communauté et des outils préconfigurés pour faciliter le développement.
• 😀 Pour une gestion de données fluide, utiliser TanStack pour la gestion globale et Zod pour la validation des schémas en runtime est une excellente approche.
• 😀 L'intégration de systèmes de conception comme Tailwind et des bibliothèques de composants prêtes à l'emploi comme Chat CN permet de créer une interface propre et efficace.
• 😀 L'utilisation de Storybook permet de tester et documenter efficacement les composants créés, facilitant ainsi le processus de développement.
• 😀 Pour améliorer la lisibilité et la réutilisabilité du code, il est important de créer des composants très petits et modulaires.
• 😀 L'un des conseils clés pour optimiser les performances est de gérer les états localement dans les composants et d'utiliser des props enfants pour éviter les rendus inutiles.
• 😀 Les tests unitaires, tests de composants avec React Testing Library et tests end-to-end avec Playwright sont essentiels pour garantir la robustesse de l'application.
• 😀 Pour optimiser les rendus React, il est recommandé d'identifier les composants qui nécessitent une gestion d'état local et de ne pas faire de re-rendu global pour toute l'application.
• 😀 Les effets React (useEffect) peuvent entraîner des rendus supplémentaires inutiles. L'utilisation de 'derived state' et de la clé prop pour réinitialiser des composants permet d'éviter cette surcharge de rendu.

Q & A

Pourquoi est-il nécessaire d'avoir un stack complet autour de React ?

Un stack complet est nécessaire car React seul ne suffit pas pour gérer des fonctionnalités comme le routage, l'authentification, et le SSR (Server-Side Rendering). Ces fonctionnalités requièrent des outils supplémentaires, d'où l'importance d'un framework comme Next.js.

Pourquoi avoir choisi Next.js plutôt qu'un autre framework comme Gatsby ou Astro ?

Next.js a été choisi car il est soutenu par Vercel, dispose d'une grande documentation et d'une communauté active. Il offre également des outils préconfigurés comme TypeScript, ESLint, et le routage, ce qui facilite le développement.

Comment Next.js simplifie-t-il le développement d'une application React ?

Next.js simplifie le développement en intégrant des outils comme TypeScript, ESLint, le routage, et une gestion des fetchs d'applications, tout cela via une simple ligne de commande. Cela permet de se concentrer sur le développement plutôt que sur la configuration.

Qu'est-ce que Tank Stack et comment aide-t-il dans la gestion des données ?

Tank Stack est une bibliothèque de gestion d'état global qui gère la validation, la mise en cache et le refetching des données. Elle permet de gérer de manière efficace les données côté client avec des outils intégrés comme Zod pour la validation des schémas.

Pourquoi utiliser un système de design comme Tailwind et Chat CN ?

L'utilisation de Tailwind et Chat CN permet d'avoir des composants prêts à l'emploi et de créer une interface propre et cohérente sans avoir à réinventer chaque élément UI. Cela rend le développement plus rapide et moins redondant.

Quels outils de développement (dev tools) recommandez-vous pour améliorer l'efficacité du codage ?

Il est recommandé d'utiliser React DevTools pour le débogage des composants, et d'utiliser les extensions IDE comme Prettier et Rainbow Brackets pour améliorer la lisibilité du code et l'organisation du travail.

Pourquoi est-il important de créer des composants réutilisables dans React ?

Les composants réutilisables rendent le code plus modulaire, plus facile à maintenir et à comprendre. Cela permet également d'améliorer l'efficacité du développement, car les mêmes éléments peuvent être utilisés à plusieurs endroits sans devoir être redéfinis à chaque fois.

Quelle est la meilleure approche pour optimiser les rendus dans React ?

Pour optimiser les rendus dans React, il est recommandé de gérer les états de manière aussi locale que possible et d'utiliser des props enfants (child props) pour limiter le nombre de composants rendus. Cela réduit le coût de la mise à jour de l'interface.

Comment éviter les rendus inutiles dans React ?

Pour éviter les rendus inutiles, il faut localiser l'état dans les composants où il est réellement nécessaire, et utiliser des props enfants pour contrôler la propagation des mises à jour d'état. Cela permet de rendre uniquement les composants qui ont réellement besoin d'être mis à jour.

Quels sont les avantages de remplacer `useEffect` par des états dérivés ?

L'utilisation d'états dérivés permet de réduire le nombre de rendus, car cela évite les mises à jour répétitives des effets qui causent des re-rendus inutiles. Cela simplifie le code et améliore les performances.