Vamos discutir algumas ferramentas excelentes que podem tornar os desenvolvedores do React mais produtivos e melhorar a qualidade de seu trabalho.
Normalmente, quando eu começo um novo projeto, uso meu próprio modelo para as ferramentas que adicionei a esta lista. Também trabalho com outras ferramentas como a IU de materiais. Eu os estudei, criei vários aplicativos com a ajuda deles e implementei alguns pequenos projetos, após os quais decidi compartilhar os resultados.
Então, vamos dar uma olhada na lista final.
ESLint
O ESLint tem muito a mudar para qualquer desenvolvedor de JavaScript, incluindo os fãs do React. O serviço oferece algoritmos inteligentes que analisam rapidamente o código, em busca de possíveis bugs.
Além disso, ele permite que você corrija automaticamente os problemas encontrados sem alterações de sintaxe.
Para começar, eu recomendaria usar a configuração sugerida pelos desenvolvedores do Airbnb. Contém:
- Suporte integrado para a biblioteca React (por exemplo, suporte para regras de uso de ganchos).
- Foco nas melhores práticas.
ESLint é um must-have para qualquer projeto, e a configuração do Airbnb é uma das minhas favoritas. Eu adicionei algo a ele, mas resta 90% da configuração inicial.
Mordeu
O Bit fornece algo que os desenvolvedores do React precisam como uma plataforma de colaboração. Ele permite que as equipes trabalhem juntas em componentes individuais.
É um utilitário de linha de comando que permite escrever código reutilizável. O Bit é totalmente de código aberto e esta é uma das razões de sua popularidade.
A maior parte da funcionalidade está relacionada à criação de componentes atômicos, para que possam ser facilmente compartilhados com outros desenvolvedores. Além disso, também existe a possibilidade de verificar as dependências dos componentes, testando-os separadamente do projeto principal.
Criar aplicativo React
Como desenvolvedor do React, você sabe muito bem quanto tempo leva para iniciar um novo projeto. Para economizar tempo, os desenvolvedores do Facebook sugeriram o aplicativo Create React .
Este é um "construtor" inicial que permite que você se concentre no desenvolvimento, não na personalização do React. Tudo o que você precisa fazer é executar o comando npx create-react-app my-app. Então você tem um aplicativo totalmente configurado para o projeto.
Criar o aplicativo React aumentará muito sua eficiência se você estiver trabalhando como freelancer do React para vários clientes ao mesmo tempo.
React Cosmos
React Cosmos é um ambiente de desenvolvedor projetado para criar interfaces de usuário escalonáveis e de alta qualidade.
O serviço torna possível envolver-se facilmente na prototipagem e teste de componentes de interface individuais. Além disso, você pode iterar com ele sem medo de quebrar seu código. Ele facilita o processo de depuração, isolando os componentes.
O React Cosmos é melhor usado para trabalhar com aplicativos de nível empresarial. Dividir um projeto em componentes pequenos e reutilizáveis torna possível escrever código de qualidade fácil de manter.
React Toolbox
No início deste artigo, mencionei que uso a IU do material para a maioria dos projetos. Há uma razão para isso: eu amo o material design e a IU de materiais é o que me agrada completamente.
Mas também existem alternativas. Um deles é React Toolbox . Esta é uma coleção de componentes comumente usados desenvolvidos com o Material Design. Ele usa módulos CSS para maior flexibilidade.
No momento em que este livro foi escrito, o React Toolbox inclui 28 componentes. Alguns deles são gaveta de aplicativos, selecionador de data, alternador e lanchonete.
React Bootstrap
O site otimizado para celular é um padrão moderno. Os usuários esperam que seu site tenha um bom desempenho em qualquer dispositivo. Sites com design responsivo destacam até mesmo os mecanismos de pesquisa.
Muitos desenvolvedores usam o Bootstrap para criar sites responsivos e escalonáveis com designs profissionais. O problema é que o Bootstrap vem com componentes nativos que não são integrados ao React.
A solução é o pacote React Bootstrap de código aberto . Todos os componentes do Bootstrap foram modificados especificamente para os desenvolvedores do React.
React Slingshot
Quer acelerar o desenvolvimento do seu aplicativo React? Tente avaliar o React Slingshot . É um template que combina React, Redux e Babel.
A característica mais importante do Slingshot que o diferencia de outras ferramentas é seu feedback rápido. Esse recurso automatiza o processo de linting, teste de unidade e recarregamento a quente sempre que o aplicativo é atualizado. Dessa forma, você pode se concentrar na lógica de negócios em vez de tarefas irrelevantes.
Reactide
Dizem que um desenvolvedor é tão bom quanto seu editor. Talvez isso não seja inteiramente verdade, mas o editor é muito útil em nosso trabalho. Pessoalmente, sou um grande fã de JetBrains e WebStorm. Minha escolha é IDE, mas tento alternativas de vez em quando.
Por exemplo, descobri que o Reactide é um IDE para o React. Fiquei muito surpreso com essa descoberta e experimentei a ferramenta.
Descobriu-se que ele tem características interessantes. Por exemplo, você pode renderizar os componentes do seu projeto diretamente no IDE. Há também um servidor Node.js embutido que é integrado ao simulador de navegador.
Uma ferramenta interessante, embora eu não ache que vá mudar completamente para ela. Mas esta é uma boa opção para quem está trabalhando ou aprendendo o React e não quer ter problemas mesmo durante a fase de configuração.
Biblioteca de teste do React
"Teste primeiro!" - o que repito constantemente.
Em outras palavras, ter um conjunto de ferramentas de teste é importante. A Biblioteca de teste React é uma pequena biblioteca. Ele permite que você teste seu código React sem muitos problemas. A biblioteca é fácil de usar e adiciona recursos às bibliotecas padrão, como react-dom e react-dom / test-utils.
Uma excelente documentação com alguns bons exemplos o ajudará a começar a trabalhar rapidamente.
Livro de histórias
O Storybook fornece um ambiente de desenvolvimento interativo no qual você pode criar novos componentes, testá-los ou selecionar componentes existentes de uma biblioteca.
O Storybook é flexível o suficiente para funcionar com qualquer estrutura JavaScript importante. Por exemplo React, Vue.js, Angular, Svelte, Marko e até mesmo HTML bruto.
A melhor coisa sobre o Storybook é que ele vem com vários add-ons. Aqui estão algumas adições que considero interessantes:
- google-analytics (adiciona suporte do Google Analytics para componentes);
- gracejo ;
- storyshots (verificação de componentes usando instantâneos);
- janela de visualização (alterando a marcação para componentes responsivos)
Eu espero que você aprecie esta lista. Se você usa outras ferramentas legais que não são mencionadas no texto, escreva sobre elas nos comentários!