00:00:00O React acaba de ganhar uma nova ferramenta de varredura de anti-padrões chamada React Doctor.
00:00:05Ela foi criada por Aidan Bai, o mesmo desenvolvedor super talentoso que criou o Million.js,
00:00:11React Grab, React Scan e Amy.
00:00:14E no vídeo de hoje, vamos dar uma olhada nessa ferramenta, ver como ela funciona e testá-la
00:00:19nós mesmos.
00:00:20Vai ser muito divertido, então vamos mergulhar nisso.
00:00:27O React Doctor é uma ferramenta de CLI simples projetada para detectar anti-padrões comuns do React,
00:00:33como use effects desnecessários, problemas de acessibilidade ou prop drilling.
00:00:38Por baixo dos panos, ele utiliza o OX lint, um dos linters de JavaScript mais rápidos, escrito em
00:00:43Rust.
00:00:44E como o OX lint é feito em Rust, ele consegue escanear dezenas de milhares de linhas de código em
00:00:49milissegundos.
00:00:50Ele usa isso para construir uma árvore sintática abstrata (AST) do seu projeto, buscando por
00:00:56padrões específicos do React, como uso de hooks, estruturas de props e limites de componentes.
00:01:01Ele é baseado em mais de 47 boas práticas de React e inclui varreduras úteis, como, por exemplo,
00:01:08buscar chaves de segurança codificadas acidentalmente ou verificar padrões de estados de
00:01:13carregamento, fornecendo um bom relatório sobre quando usá-los em vez de
00:01:19optar pelo use transition.
00:01:21Este projeto é totalmente de código aberto e ainda é bem recente.
00:01:25Por isso, é uma ótima oportunidade para a comunidade contribuir com o projeto, adicionando
00:01:30outras verificações de boas práticas que você ache que estão faltando.
00:01:33Acho que a parte mais legal deste projeto é a interface.
00:01:36Tem um design e uma estética muito bonitos e, graças ao OX lint, é muito veloz.
00:01:42Além disso, você também pode executá-lo como uma habilidade para seu agente de codificação
00:01:47ou usá-lo programaticamente em algo como uma API Node.js, por exemplo.
00:01:52Agora, vamos testar essa ferramenta.
00:01:54Eu tenho este projeto baseado em React, que é apenas uma ferramenta básica de visualização de gráficos de ações,
00:02:00que escrevi há seis anos, quando a IA nem era uma realidade ainda.
00:02:04Vai ser muito interessante ver o quão bem eu escrevia código React seis anos atrás.
00:02:09Vou executar o comando react-doctor no meu repositório.
00:02:12E, como podem ver, recebemos o resultado instantaneamente.
00:02:15E olhem só.
00:02:16Meu projeto teve uma pontuação quase perfeita.
00:02:18Sinceramente, aquece meu coração saber que, mesmo há seis anos, eu já escrevia um código
00:02:24React de boa qualidade.
00:02:25Tudo bem, vamos ver o que ele descobriu.
00:02:27Recebemos um aviso sobre usar o índice (i) como chave, o que é muito válido.
00:02:31Depois, ele também reconheceu que o recharts é uma biblioteca pesada.
00:02:35Então, ele me aconselha a usar o lazy loading em vez disso.
00:02:38E também notou que tenho quatro chamadas de use state em um único use effect.
00:02:44E que eu deveria considerar o uso do use reducer.
00:02:46Pontos muito válidos.
00:02:48Obrigado, React Doctor.
00:02:49Agora vamos tentar executá-lo em uma base de código maior.
00:02:52Aqui está um projeto de CRM muito popular chamado 20, que deve ser como uma alternativa
00:02:57de código aberto ao Salesforce.
00:02:59E ele é escrito em React.
00:03:00Vamos clonar este repositório e ver como o React Doctor o avalia.
00:03:04Ao executá-lo, vemos que o React Doctor detecta automaticamente que este projeto é
00:03:08um monorepo e reconhece os pacotes.
00:03:12Vamos primeiro ver a pontuação do pacote do site de marketing deles.
00:03:15Como podemos ver aqui, também é muito boa.
00:03:18Temos um erro, mas é apenas uma tag "alt" faltando.
00:03:22No geral, eu diria que é uma pontuação muito boa.
00:03:25Certo, agora vamos verificar o pacote "front", por exemplo.
00:03:30Este foi um pouco pior, tivemos 99 erros, mas ainda está na zona verde.
00:03:35Então, aqui está o que eu recomendo.
00:03:37Se você é um desenvolvedor que quer melhorar seu portfólio no GitHub, esta é uma ótima ferramenta
00:03:41para escanear vários projetos de código aberto e identificar onde você pode fazer
00:03:47contribuições significativas.
00:03:48Então, aqui está pessoal, esse é o React Doctor em resumo. Acho que é uma ferramenta
00:03:52super leve e prática que pode ajudar significativamente na revisão e na verificação
00:03:58de sanidade dos seus projetos React.
00:03:59Com certeza passarei a usá-lo em meus próprios projetos daqui para frente.
00:04:03E pessoal, se acharam este vídeo útil, por favor, deixem seu joinha clicando no botão de curtir
00:04:07abaixo do vídeo.
00:04:09E também não se esqueçam de se inscrever no canal para não perderem nenhum
00:04:14de nossos vídeos futuros.
00:04:15Eu sou o Andris, da Better Stack, e vejo vocês nos próximos vídeos.