00:00:00React vient de se doter d'un nouvel outil d'analyse d'anti-patterns appelé React Doctor.
00:00:05Il a été créé par Aidan Bai, le développeur très talentueux à l'origine de Million.js,
00:00:11React Grab, React Scan et Amy.
00:00:14Et dans la vidéo d'aujourd'hui, nous allons examiner cet outil, voir comment il fonctionne
00:00:19et l'essayer par nous-mêmes.
00:00:20Ça va être très intéressant, alors plongeons dans le vif du sujet.
00:00:27React Doctor est un outil CLI simple conçu pour détecter les anti-patterns React courants,
00:00:33tels que les use effects inutiles, les problèmes d'accessibilité ou le prop drilling.
00:00:38Sous le capot, il utilise OX lint, l'un des linters JavaScript les plus rapides,
00:00:43écrit en Rust.
00:00:44Et parce qu'OX lint repose sur Rust, il peut analyser des dizaines de milliers de lignes
00:00:49de code en quelques millisecondes.
00:00:50Il s'en sert pour construire un arbre syntaxique abstrait (AST) de votre projet,
00:00:56recherchant des structures React spécifiques comme l'usage des hooks ou le destructuring.
00:01:01Il s'appuie sur plus de 47 bonnes pratiques React et inclut des analyses utiles comme,
00:01:08par exemple, la détection de clés de sécurité codées en dur par erreur,
00:01:13ou l'analyse des patterns d'état de chargement pour suggérer quand
00:01:19utiliser useTransition à la place.
00:01:21Ce projet est entièrement open source et encore tout récent.
00:01:25C'est donc une excellente occasion pour la communauté d'y contribuer
00:01:30en ajoutant d'autres vérifications de bonnes pratiques qui pourraient manquer.
00:01:33Je pense que la partie la plus cool de ce projet est l'interface utilisateur.
00:01:36Le design et l'esthétique sont superbes, et grâce à OX lint, c'est ultra rapide.
00:01:42En plus de tout cela, vous pouvez l'exécuter comme une compétence pour votre agent de codage
00:01:47ou l'utiliser de manière programmatique sur une API Node.js, par exemple.
00:01:52Maintenant, essayons cet outil nous-mêmes.
00:01:54J'ai ce projet React qui est un simple outil de visualisation de graphiques boursiers,
00:02:00que j'ai écrit il y a six ans, bien avant que l'IA ne soit monnaie courante.
00:02:04Ce sera très intéressant de voir comment j'écrivais du React il y a six ans.
00:02:09Je vais donc lancer la commande React Doctor dans mon dépôt.
00:02:12Et comme vous pouvez le voir, nous obtenons instantanément un résultat.
00:02:15Et regardez ça !
00:02:16Mon projet a un score presque parfait.
00:02:18Ça me fait chaud au cœur de savoir que même il y a six ans, j'écrivais du code React
00:02:24de bonne qualité.
00:02:25Voyons un peu ce qu'il a découvert.
00:02:27Nous avons un avertissement sur l'utilisation de l'index comme clé, ce qui est très juste.
00:02:31Ensuite, il a reconnu que "recharts" est une bibliothèque lourde.
00:02:35Il me conseille donc d'utiliser le lazy loading à la place.
00:02:38Il a aussi remarqué que j'ai quatre appels useState dans un seul useEffect.
00:02:44Et que je devrais envisager d'utiliser useReducer.
00:02:46Tous ces points sont très valables.
00:02:48Merci, React Doctor.
00:02:49Maintenant, essayons de le lancer sur une base de code plus large.
00:02:52Voici un projet CRM très populaire appelé "20", qui se veut une alternative
00:02:57open source à Salesforce.
00:02:59Et c'est écrit en React.
00:03:00Clonons ce dépôt et voyons comment React Doctor l'évalue.
00:03:04Une fois lancé, on voit que React Doctor détecte automatiquement que ce projet
00:03:08est un monorepo et reconnaît les différents packages.
00:03:12Calculons d'abord le score pour leur package de site marketing.
00:03:15Comme on peut le voir ici, c'est également plutôt bon.
00:03:18On a une erreur, mais c'est juste une balise "alt" manquante.
00:03:22Globalement, je dirais que c'est un très bon score.
00:03:25Très bien, vérifions maintenant le package "front", par exemple.
00:03:30Celui-ci s'en sort un peu moins bien avec 99 erreurs, mais reste dans la zone verte.
00:03:35Voici ce que je recommanderais :
00:03:37Si vous êtes un développeur souhaitant améliorer son portfolio GitHub, c'est un super outil
00:03:41pour scanner divers projets open source et identifier les endroits où vous pouvez
00:03:47apporter des contributions significatives.
00:03:48Voilà donc React Doctor en résumé. Je pense que c'est un outil léger et pratique
00:03:52qui peut vraiment aider à la relecture et à la vérification de la cohérence
00:03:58de vos projets React.
00:03:59Et je l'utiliserai certainement dans mes propres projets à l'avenir.
00:04:03Si vous avez trouvé cette vidéo utile, n'hésitez pas à me le faire savoir
00:04:07en cliquant sur le bouton "J'aime" sous la vidéo.
00:04:09Et n'oubliez pas de vous abonner à notre chaîne pour ne pas manquer
00:04:14nos prochaines vidéos.
00:04:15C'était Andris de Better Stack, et je vous dis à bientôt dans les prochaines vidéos.