00:00:00У React появился новый инструмент для поиска антипаттернов под названием React Doctor.
00:00:05Его создал Эйдан Бай, тот самый талантливый разработчик, который подарил нам Million.js,
00:00:11React Grab, React Scan и Amy.
00:00:14И в сегодняшнем видео мы изучим этот инструмент, разберемся, как он работает,
00:00:19и испытаем его в деле.
00:00:20Будет интересно, так что давайте приступим.
00:00:27React Doctor — это простой CLI-инструмент для обнаружения типичных антипаттернов React,
00:00:33таких как лишние useEffect, проблемы доступности или проп-дриллинг.
00:00:38В основе лежит OX lint — один из самых быстрых линтеров JavaScript,
00:00:43написанный на Rust.
00:00:44Благодаря Rust он способен сканировать десятки тысяч строк кода
00:00:49буквально за миллисекунды.
00:00:50Инструмент строит абстрактное синтаксическое дерево (AST) вашего проекта, выявляя
00:00:56специфичные паттерны React: использование хуков, структуру пропсов и границы компонентов.
00:01:01Он базируется на более чем 47 лучших практиках React и включает полезные проверки,
00:01:08например, поиск случайно захардкоженных ключей безопасности или, как здесь,
00:01:13анализ паттерна состояния загрузки. Он подскажет, когда лучше использовать его,
00:01:19а когда стоит перейти на useTransition.
00:01:21Этот проект полностью открытый и еще совсем свежий.
00:01:25Так что это отличная возможность для сообщества внести свой вклад,
00:01:30добавляя новые проверки на соответствие лучшим практикам.
00:01:33На мой взгляд, самое крутое в этом проекте — его интерфейс.
00:01:36У него отличный дизайн и эстетика, а благодаря OX lint он работает невероятно быстро.
00:01:42Ко всему прочему, его можно запускать как навык для вашего ИИ-агента
00:01:47или использовать программно, например, в Node.js API.
00:01:52А теперь давайте проверим его на практике.
00:01:54У меня есть проект на React — простой инструмент для визуализации биржевых графиков,
00:02:00который я написал шесть лет назад, когда ИИ еще даже не был мейнстримом.
00:02:04Будет очень любопытно взглянуть, насколько хорошо я писал код на React в то время.
00:02:09Итак, я запускаю команду react-doctor в своем репозитории.
00:02:12И, как видите, результат появляется мгновенно.
00:02:15Только посмотрите на это!
00:02:16У моего проекта почти идеальный балл.
00:02:18Приятно осознавать, что даже шесть лет назад я писал
00:02:24качественный код на React.
00:02:25Ладно, давайте посмотрим, что он обнаружил.
00:02:27Мы видим предупреждение об использовании индекса массива в качестве ключа — очень дельное замечание.
00:02:31Также он распознал, что Recharts — тяжелая библиотека,
00:02:35и советует использовать ленивую загрузку.
00:02:38А еще он заметил четыре вызова useState в одном useEffect
00:02:44и предложил рассмотреть использование useReducer.
00:02:46Все замечания абсолютно по делу.
00:02:48Спасибо, React Doctor.
00:02:49Теперь попробуем запустить его на более крупной кодовой базе.
00:02:52Вот популярный CRM-проект под названием 20, который позиционируется
00:02:57как альтернатива Salesforce с открытым исходным кодом.
00:02:59Он написан на React.
00:03:00Давайте клонируем репозиторий и посмотрим, как React Doctor его оценит.
00:03:04При запуске React Doctor автоматически определяет, что это монорепозиторий,
00:03:08и распознает отдельные пакеты.
00:03:12Для начала оценим пакет их маркетингового сайта.
00:03:15Здесь всё тоже довольно неплохо.
00:03:18Есть одна ошибка, но это всего лишь отсутствие тега alt.
00:03:22В целом, я бы сказал, что результат очень достойный.
00:03:25Хорошо, теперь давайте проверим, например, фронтенд-пакет.
00:03:30Тут ситуация похуже: найдено 99 ошибок, но оценка всё еще в «зеленой зоне».
00:03:35Вот что я вам порекомендую.
00:03:37Если вы разработчик и хотите улучшить свое портфолио на GitHub,
00:03:41это отличный инструмент для сканирования open-source проектов
00:03:47и поиска мест, где можно внести значимый вклад.
00:03:48Вот и всё, друзья, это был краткий обзор React Doctor. На мой взгляд,
00:03:52это очень приятный, легкий и удобный инструмент для проверки кода
00:03:58и контроля качества ваших React-проектов.
00:03:59Я определенно буду использовать его в своей работе в будущем.
00:04:03Если видео было вам полезно, пожалуйста, дайте мне знать,
00:04:07нажав на лайк под этим роликом.
00:04:09И не забудьте подписаться на наш канал, чтобы не пропустить
00:04:14наши новые видео.
00:04:15С вами был Андрис из Better Stack, увидимся в следующих выпусках!