React: 22 ferramentas milagrosas para devs

Ferramentas para desenvolvedores/as React

Como já sabemos, o React é uma biblioteca JavaScript para criar interfaces de usuário incríveis. 

Acontece que nem todo mundo usa as mesmas ferramentas ou, até mesmo, conhecem as grandes que existem por aí que possibilitam uma experiência de desenvolvimento em React mais divertida e proativa. 

Se você ainda não utilizou o React, ou tem amigos/as que podem estar interessados/as em utilizar, o que você diz quando perguntam por que deveriam usar essa biblioteca?

Além de dizer o quão ótima a biblioteca é (o que deve ser a primeira coisa a ser dita), também gosto de mencionar que as ferramentas criadas pela comunidade opensource ajudam a elevar a experiência para um outro nível de excitação.  

Então, aqui estão 22 ferramentas que você pode usar para construir suas apps em React em 2019. Ah, essa lista não está em ordem de importância).  👾 

1. webpack-bundle-analyzer

Já se perguntou quais pacotes ou partes da sua aplicação está ocupando todo o espaço? Bem, você pode descobrir se utilizar o webpack-bundle-analyzer. Esse pacote irá te ajudar a identificar output files que mais ocupam espaço. 

O que ele faz é criar um servidor ativo que apresentará para você uma visão interativa do treemap do conteúdo dos seus pacotes configuráveis. Com isso no seu toolkit, você será capaz de identificar o local dos arquivos apresentados, seu tamanho gzip, o tamanho analisado e seus parents/children pertencentes.   

Os benefícios? Você consegue otimizar sua aplicação React com base no que você vê! 

Dá uma olhada:

Dessa forma, você consegue ver claramente que são os arquivos .pdf que estão ocupando mais espaço na aplicação. 

No entanto, essa captura de tela é muito mínima. Você também pode acessar as opções úteis para ver mais detalhadamente, como, por exemplo generateStatsFile: true e, além disso, optar por gerar um arquivo HTML estático que pode ser salvo em algum lugar fora do seu ambiente de desenvolvimento, para uso posterior.

2. react-proto

O react-proto é uma ferramenta de prototipagem para developers e designers. Ele é um software para desktop, então você precisa fazer o download e instalá-lo antes de começar a usar. 

Aqui um exemplo do software em uso:

O app permite você declarar as propriedades e seus tipos, visualizar os componentes em árvore, importar uma imagem em background, defini-los como stateful ou stateless, definir quem serão os componentes parents, aumentar ou diminuir o zoom e exportar seu protótipo para um projeto novo ou existente. 

Apesar do aplicativo parecer mais adaptado para usuários/as de mac, ele ainda funciona bem para quem utiliza o Windows.

Quando terminar de mapear suas interfaces com o/a usuário/a, você pode exportar para um projeto existente ou para um novo. Se você optar por exportar para um projeto existente e escolher o diretório raiz, ele será exportado para ./src/components como este:

Veja um dos componentes que tivemos no exemplo:

O react-proto conquistou mais de 2000 estrelas no GitHub. 

Pessoalmente falando, acredito que o app ainda precisa ser mais trabalhado para um update, especialmente com o  lançamento dos Hooks de React.  

Ele também não permite zoom out a menos que você tenha uma imagem visível no background. Em outras palavras, se você importar uma imagem para background, diminuir o zoom, e depois excluir a imagem, você não será mais capaz de aumentar o zoom, pois os botões estarão cinza. 

A única forma de aumentar o zoom novamente é se você importar a imagem de fundo e só removê-la depois de dar o zoom. 

Essa falha foi um ponto negativo que mudou minha perspectiva sobre o app. No entanto, ele está nessa lista pois não encontramos nenhuma alternativa opensource em nenhum outro lugar – o que torna esse o ponto positivo. 

3. why-did-you-update

O why-did-you-update te notifica sobre re-renderizações evitáveis. Isso é incrivelmente útil não só para te orientar a respeito de correções no desempenho do seu projeto, como também para te ajudar a entender o modo com o React funciona. 

Consequentemente, quando você entende melhor como o React funciona, isso te torna um/a desenvolvedor/a React melhor.

Você pode anexar um listener a qualquer componente personalizado declarando uma propriedade estática extra whyDidYouRender com seu valor true:

Depois disso, seu console será acionado com avisos beeeem insistentes (para não dizer irritantes):

Mas, não leve a mal – tome isso como uma coisa boa! Aproveite essas mensagens para consertar essas re-renderizações desnecessárias e elas finalmente te deixarão em paz!

4. create-react-app

Todo mundo sabe que o create-react-app é a maneira mais rápida de começar a desenvolver um projeto React (com recursos modernos inclusos imediatamente).

O que poderia ser mais fácil do que o npx create-react-app <name>?

Todos os meus tutoriais no Medium (junto com o dev.to) estão mostrando como criar interfaces React com o create-react-app, simplesmente porque é rápido e fácil.

Agora, o que alguns de nós talvez não saiba é como criar um projeto TypeScript usando create-react-app. Mas, tudo o que você precisa fazer é adicionar –typescript no final:

Isso te poupará o trabalho de adicionar manualmente o TypeScript aos seus projetos.

5. react-lifecycle-visualizer

React-lifecycle-visualizer é um pacote npm para rastrear e visualizar métodos de ciclo de vida de componentes arbitrários do React. 

Semelhante ao why-did-you-render, você pode permitir que qualquer componente da sua escolha exiba o visualizador do ciclo de vida:

Isso apresentará o visualizador dessa forma:

Só que, uma desvantagem disso é que, atualmente, só funciona para componentes de classe, portanto, os Hooks ainda não são suportados. 

6. Guppy

O Guppy  é um gerenciador de aplicações amigável e gratuito. Além disso, é também um executor de tarefas para o React, que é executado no desktop. 

Aparentemente, eles parecem priorizar aqueles/as que são mais novos/as no desenvolvimento em React. No entanto, também pode ser útil para desenvolvedores/as avançados/as.

O Guppy fornece uma interface gráfica amigável para muitas tarefas típicas que as pessoas que desenvolvem em React encaram regularmente, como a criação de novos projetos, a execução de tarefas e o gerenciamento de dependências.

O suporte para Windows foi adicionado em agosto de 2018, então você pode ter certeza de que se trata de uma multiplataforma.Vê só como o guppy é:

7. React-testing-library

Eu sempre curti o react-testing-library porque parece certo ao escrever os testes de unidade. Este pacote fornece utilitários de teste do React DOM que incentivam boas práticas de teste.

Ele tem como objetivo solucionar o problema de testar os detalhes da sua implementação, pois, o que ele irá fazer é testar a entrada/saída dos componentes React da mesma maneira que o/a usuário/a veria.

Testar os detalhes da implementação não é uma maneira eficaz de garantir que seu app funcione conforme o esperado. 

Claro que, assim, você terá mais confiança em como está obtendo os dados que seus componentes precisam, qual método de classificação usar, etc. Mas, se você precisar alterar a maneira como implementou para direcionar a um banco de dados diferente, então os seus testes de unidade falharão, porque esses são detalhes de implementação à base de lógica acoplada.

Essa é uma questão sobre o que o react-testing-library resolve, porque, no fim das contas, você só quer que a interface do usuário funcione e seja apresentada corretamente. Como obter dados para esses componentes não importa, desde que eles ainda apresentem o comportamento esperado.

Aqui está um código para exemplificar como você faria os testes usando esta biblioteca:

8. React Developer Tools

React developer tools é uma extensão que permite a inspeção da hierarquia de componente React no Chrome e Firefox Developer Tools. 

Esse é, provavelmente, o mais conhecido nesta lista e continua a ser uma das ferramentas mais úteis que os/as desenvolvedores/as React podem usar para depurar suas aplicações.

9. Bit

Uma boa alternativa para o uso de bibliotecas de componentes como material-ui ou semantic-ui-react é o Bit. Ele permite que você explore milhares de componentes opensource e use-os para criar seus projetos.

Existem tantos componentes React diferentes disponíveis, que qualquer pessoa pode usar, incluindo guias, botões, gráficos, tabelas, barras de navegação, menus suspensos, loading spinners, seletores de datas, breadcrumbs, ícones, layouts, etc. E todos eles são enviados por outros/as desenvolvedores/as React, assim como você e eu.

Mas também existem utilitários úteis disponíveis, assim como calcular valores entre datas.

10. Storybook

Se você ainda não conhece o Storybook, eu recomendo fortemente que você comece a usá-lo caso queira uma experiência mais fácil na criação de componentes UI. 

Essa ferramenta inicia um servidor de desenvolvimento ativo com recarga suportada imediatamente, onde é possível desenvolver os componentes do React em tempo real isoladamente.

Um outro ponto positivo a respeito do Storybook é que você consegue usar os addons existentes que são opensource para elevar sua experiência em desenvolvimento a outro nível. 

Por exemplo, com o pacote storybook-readme, você pode criar documentações readme enquanto desenvolve os componentes React para uso em produção na mesma página. Isso é o suficiente para servir como as páginas de documentação normais:

11. React Sight

Você já imaginou como poderia ser sua aplicação em um fluxograma? 

Pois bem, o react-sight permite que você tenha essa visualização da aplicação React apresentando a você uma árvore viva do componente de todo o seu aplicativo – ao vivo. Ele também suporta React Router, Redux e React Fiber.

Com essa ferramenta, você passa o mouse sobre os nós, que são os links para os componentes diretamente relacionados a eles na árvore.

Se estiver com problemas para visualizar os resultados, digite chrome:extensions na barra de endereço, procure a caixa react-sight e clique na opção  Allow access to file URLs, conforme mostrado abaixo:

12. react-cosmos

O react-cosmos é uma ferramenta para criar componentes React reutilizáveis. 

Ele verifica o seu projeto em busca de componentes e permite que você:

1. Renderize componentes sob qualquer combinação de acessórios, contexto e estado;
2. Simule todas as dependências externas (ex: API responses, localStorage, etc)
3. Veja o estado da sua aplicação evoluir em tempo real enquanto interage com instâncias em execução.

13. CodeSandbox

Essa é, sem dúvida, uma das melhores ferramentas disponíveis para colocar a mão na massa com o React mais rápido que a velocidade de um piscar de olhos (ok, talvez não tão rápido).

Essa ferramenta chamada CodeSandbox é um editor online que permite criar aplicações web desde o protótipo até o deploy – tudo do site!

Originalmente, o CodeSandbox era compatível apenas com o React nos estágios iniciais, mas agora foram expandidos para modelos adicionais para bibliotecas como Vue e Angular. 

Eles também ajudam a dar o pontapé inicial do seu próximo projeto React através de geradores de sites estáticos comuns, como Gatsby ou NextJS.

Há tantas coisas para falar a respeito do CodeSandbox! Ele é incrivelmente ativo! 

Se você quiser explorar alguns projetos que outras pessoas estão criando, é só clicar em Explore e obter acesso a vários exemplos de código para ajudar a renovar seu próximo projeto: 

Uma vez que você começa a editar dentro de um projeto, você percebe que o que você está prestes a usar é, na verdade, o editor VSCode – que é poderoso.

Eu adoraria escrever um artigo inteiro sobre todos os recursos que você pode usar no CodeSandbox hoje, mas parece que o trabalho já foi feito.

14. React Bits

React bits é uma coleção de patterns, técnicas, dicas e truques do React, todos escritos em um formato semelhante a um documento online, onde você pode acessar rapidamente diferentes patterns e técnicas de design, anti-patterns, styling, variações de UX e outros materiais úteis relacionados a React, todos na mesma guia.

Eles têm um repositório no GitHub atualmente com 9.923 estrelas.

Alguns exemplos incluem conceitos como proxying, composição para lidar com variações UX em diferentes cenários e até expõe algumas dicas que todo/a desenvolvedor/a React deve se atentar.

Veja abaixo um exemplo da página deles. Como você pode ver no menu lateral à esquerda, há muitas informações:

15. Folderize

Folderize é uma extensão do VSCode lançada há pouquíssimo tempo (agosto de 2019). Ela permite transformar um arquivo de componente em uma estrutura de pastas de componentes. Seu componente React ainda será um componente, ele apenas foi convertido em um diretório.

Por exemplo, vamos dizer que você está criando um componente React que utiliza algum arquivo como suporte para exibir algumas informações como a meta data. A lógica do componente de meta data está ocupando muitas linhas, então você decide dividir isso em um arquivo separado. 

Só que quando você decide fazer isso, você passa a ter dois arquivos relacionados um ao outro.

Portanto, se você tiver um diretório será assim:

Você talvez, então, queira abstrair o FileView.js e o FileMetadata.js em uma estrutura de diretório da mesma forma que a Apples – especialmente se você estiver pensando em adicionar mais componentes relacionados a arquivos como o FileScanner.js. 

É isso que o Folderize faz, para que eles possam ter uma estrutura semelhante a esta:

16. React Starter Projects

Aqui está uma ótima lista de react starter projects que você pode acessar em uma única página. Então, se você é o tipo de pessoa que acha rápido e útil apresentar uma enorme lista de opções para escolher ao mesmo tempo, então essa é para você.

Uma vez que você ache um projeto inicial que goste, basta clonar o repositório e fazer suas próprias modificações personalizadas para o sua próxima aplicação. 

No entanto, nem todos eles são para serem usados através da clonagem do repositório, pois alguns são para instalação – o que os torna um anexo do seu projeto. Isso facilita obter atualizações e manter seu projeto mais limpo.

Veja como é a página:

17. Highlight Updates

Essa é, sem dúvida, a ferramenta mais importante que alguém poderia ter em sua caixa de ferramentas de desenvolvimento. Este é um recurso da extensão React Devtools e permite ver quais componentes em suas páginas estão sendo renderizados desnecessariamente:

Ele ajuda a identificar gargalos durante o desenvolvimento de suas páginas e facilita ainda mais quando colorem problemas graves de re-renderização com laranja/vermelho.

A menos que você queira criar uma aplicação medíocre, por qual motivo você não iria querer uma lindeza dessa ao alcance? 

18. React Diff Viewer

O react-diff-viewer é um visualizador de diferenças de texto simples e bonito, feito com Diff e React. Ele suporta recursos como split view, inlice view, diff de palavras, destaque de linha, etc.

Isso pode ser útil se você estiver tentando incorporar esse recurso em suas anotações e personalizá-lo para deixá-lo mais sob-medida para sua aplicação (theme colors, combinar sua documentação com o Storybook, etc.).

19. js.coach

O site que eu mais uso para procurar material relacionado a React é o js.coach. E eu ainda não sei por que não vejo muitas menções a este tesouro, uma vez que encontro praticamente tudo o que preciso apenas nesta página. 

É rápido, fácil, atualizado constantemente e nunca falha em me fornecer os resultados necessários para todos os meus projetos.

Recentemente, eles adicionaram o guia React VR, que é maravilhoso!

20. awesome-react

O repositório opensource awesome-react do GitHub é uma lista de coisas incríveis relacionadas ao React.

Eu provavelmente poderia fingir que não existem outros sites e apenas aprender React através deste link. Você encontrará muitos recursos úteis que certamente te ajudarão a criar ótimas aplicações React!

21. proton-native

O proton-native fornece um ambiente React para criar aplicações desktop nativas entre plataformas. 

É uma alternativa ao Electron e possui algumas funcionalidades interessantes, incluindo:

• Mesma sintaxe que o React Native;
• Funciona com bibliotecas React existentes, como Redux;
• Multi-plataforma;
• Componentes nativos. Sem mais Electron;
• Compatível com todos os pacotes normais do Node.js. 

Quer aprender mais sobre? Leia aqui.

22. Devhints React.js Cheatsheet

Uma página muito interessante de truques para React, embora esteja faltando alguns Hooks do React. Mas, não se preocupe, eu vou criar uma para reactv16.8 +, portanto, fique atento/a a isso.

Por fim,

E isso conclui o final deste post! Espero que você tenha encontrado informações valiosas aqui. ✌️

Este é um artigo traduzido, você pode acessar a versão original em inglês aqui.
Todos os créditos para o autor: jsmanifest.

ferramentas react

Last modified: 06/09/2019