As melhores ferramentas e bibliotecas do React para acelerar o desenvolvimento front-end

Sendo a estrutura de front-end JavaScript mais popular, o ecossistema React é dinâmico e cheio de ferramentas e pacotes úteis que você pode integrar ao seu aplicativo. Discutiremos alguns dos mais úteis aqui e mostraremos como usá-los.

React DevTools

React Devtools é uma extensão do Chrome e do Firefox extremamente útil para depurar aplicativos React. Você pode pensar nele como o inspetor de elementos do Chrome — ele permite que você navegue para baixo na árvore do seu aplicativo, mas em vez de visualizar HTML e CSS, você está visualizando adereços e estado.

Você também pode selecionar elementos da mesma forma que inspecionaria os elementos com as ferramentas de desenvolvimento do Chrome, o que pode ser útil ao trabalhar com aplicativos complicados.

A extensão também inclui o React Profiler, que cronometra a renderização de componentes e ajuda a eliminar o desempenho ruim e “ jank ” em seu aplicativo.

O criador de perfil pode fazer uma varredura em seu aplicativo e gerar um gráfico de barras dos componentes com maior renderização intensiva.

Roteador React

react-router é o pacote ideal para lidar com o roteamento baseado em caminho em seu aplicativo. Ele adiciona um novo componente que fica no nível superior do seu aplicativo e direciona para outros componentes com base no caminho do URL, permitindo que você organize tudo em “ Container ” componentes que representam páginas individuais.

Por exemplo, a < App > principal componente de seu aplicativo pode ser semelhante a este:

 exportar função padrão App () {return (< Router > < div > < Navbar / > < Switch > < Route path = "/ about" > < About / > < / Route > < Route path = "/ users" > < Users / > < / Route > < Route path = "/" > < Home / > < / Route > < / Switch > < / div > < / Router >); }

A tag < Switch > componente examina todos os seus filhos e encontra uma tag < Route > componente com um argumento de caminho que corresponde ao caminho fornecido. Se houver correspondência, todos os componentes filhos da tag < Route > são renderizados, geralmente contendo um componente de contêiner para uma página inteira.

Você pode até definir caminhos com variáveis, como users /: userID, que podem ser recuperados no componente filho com useParams ().

Como o React Router lida sozinho com todo o roteamento, ele é incrivelmente rápido para o cliente. Isso é conhecido como Aplicativo de Página Única ou SPA. Em vez de solicitar novas páginas de um servidor, o cliente reescreve dinamicamente a página atual. No caso do React Router, ele roteia com base no URL para fornecer uma experiência perfeita — seus usuários pensarão que seu site está carregando instantaneamente.

Redux

Redux é um contêiner de estado para seu aplicativo React. Ele adiciona um armazenamento de dados global ao qual você pode se conectar a partir de qualquer componente, completo com ações e redutores que você pode despachar para modificar o estado atual.

Na verdade, Redux é apenas um invólucro sofisticado para a API de contexto do React. O contexto permite que você passe dados para qualquer componente sem passar adereços manualmente por meio de componentes intermediários. Embora você possa implementar seu próprio armazenamento de dados global básico semelhante ao Redux com bastante facilidade, o Redux tem algumas vantagens sobre essa abordagem.

Em primeiro lugar, as ferramentas de depuração do Redux são fantásticas. Como o estado é imutável e só pode ser atualizado por meio de ações e redutores, ele permite a depuração da Viagem no Tempo. Você pode voltar no tempo e observar como suas ações afetam o estado atual e explorar sua árvore de estados usando Redux Devtools.

Redux também pode ser estendido com middleware e fornece uma boa plataforma para interoperabilidade de pacotes. Por exemplo, Redux Saga é um modelo de efeito colateral para Redux que torna mais fácil trabalhar com ações assíncronas, como buscar dados de um banco de dados ou cache do navegador.

O Redux também gerencia as atualizações de componentes de maneira limpa — uma única mudança no estado não aciona uma nova renderização de cada componente conectado, apenas daqueles que ele afeta, evitando erros desnecessários.

Componentes estilizados

os componentes estilizados tornam o trabalho com CSS no React mais fácil. Embora você possa simplesmente dar nomes de classe a tudo e estilizá-los como de costume, não é tão “ inteligente ” e não se conecta a adereços e estado com muita facilidade. O React tem seu próprio sistema de estilo, mas usa uma sintaxe diferente e é um pouco desajeitado.

Os componentes estilizados solucionam esse problema permitindo que você escreva CSS diretamente em uma string literal, criando um novo “ componente estilizado ” no processo. Por exemplo, você pode criar um botão que muda de cor com base em adereços primários, substituindo o valor do plano de fundo por uma função que observa os adereços, assim:

 const Button = styled.a` border-radius: 3px; preenchimento: 0,5 rem 0; fundo: $; borda: 2px branco sólido; `

Você não está limitado a primitivos também — você pode fazer versões estilizadas de seus próprios componentes.

React Bootstrap

Bootstrap é a biblioteca de componentes front-end mais popular da web. Ele fornece muitos componentes diferentes para elementos de IU comuns, como barras de navegação, formulários, cartões e muito mais, evitando que você os escreva do zero.

O React Bootstrap oferece os primitivos do Bootstrap como componentes do React, que você pode estender com um estilo personalizado para atender às necessidades do seu aplicativo. O bootstrap elimina o problema de ajustar a formatação nos bastidores, como preenchimento, margens, flexbox e layout, deixando você se concentrar no estilo e na funcionalidade do seu aplicativo.

Você pode navegar na biblioteca de componentes aqui para saber mais.

Livro de histórias

Se o seu aplicativo usa muitos componentes, você pode estar interessado em uma maneira melhor de gerenciá-los e testá-los. O Storybook fornece um ambiente em sandbox para construir e testar componentes de IU isoladamente, bem como uma maneira fácil de gerenciar e organizar sua biblioteca de componentes como um todo.

Cada componente pode ser visualizado isoladamente e tem vários “ botões giratórios ” que controlam os dados que estão sendo enviados a eles. Você pode até escrever documentação estendida para o componente, o que ajuda a melhorar a usabilidade interna. Claro, o Storybook requer algum nível de configuração extra para cada componente, e escrever a documentação não é gratuito, mas para grandes equipes com uma pasta ./components muito confusa, o Storybook pode ajudar a organizá-lo.

Se você quiser fazer uma demonstração de como é usá-lo, eles têm muitas demonstrações ao vivo disponíveis online de empresas como IBM, Uber e Coursera que usam o Storybook para gerenciar suas bibliotecas de componentes.

Se o Storybook for demais para você, experimente o Styleguidist, que fornece um guia de estilo fácil de gerenciar para seus desenvolvedores consultarem.