5 ferramentas em alta para desenvolvedores React

O GraphQL está crescendo muito e, com isso, todo o ecossistema por volta dessa tecnologia também. Se você ainda não sabe o que é GraphQL, eu dei uma breve introdução sobre suas vantagens nesse post.

O Apollo e o Relay quando aplicados junto ao React servem como clientes para uma API construída com GraphQL, ou seja, são utilizados diretamente para consumir os dados do back-end.

As duas ferramentas facilitam o entendimento dos tipos de requisições, parâmetros, filtros, paginação e seus resultados para o React, que por sua vez, consegue ler os dados retornados da requisição e renderizar em um componente.

Mas qual utilizar, Apollo ou Relay? Na minha opinião, hoje, é melhor ir pelo Apollo. Com uma sintaxe mais clara e com menor curva de aprendizado o Apollo está crescendo desenfreadamente. Por outro lado, o Relay tem se mostrado uma alternativa mais apta para escalabilidade e estruturas mais complexas por lidar melhor com cache em grandes aplicações, por exemplo.

Ah, vale a pena dar uma olhada já que o Relay está tentando diminuir a complexidade do código com sua nova versão Relay Modern (quem sabe o Apollo não fica pra trás).

Outro ponto que é praticamente essencial para TODOS programadores React é a tipagem estática. Geralmente aprendemos a utilizar apenas as PropTypes que fazem a tipagem de propriedades dos nossos componentes de forma dinâmica, isso é, o erro acontece apenas enquanto a aplicação está executando.

Com o crescimento e adoção de técnicas para tipagem estática, bibliotecas como TypeScript e Flow tem se tornado cada vez mais comum por oferecer tipagem para propriedades, estado, parâmetros, retornos de funções, etc, já durante o desenvolvimento, ou seja, o seu editor mostrará qualquer erro de parâmetro sendo passado em tempo-real.

O NextJS é uma ferramenta que tem muito potencial e provavelmente vai ser muito utilizada em projetos React daqui pra frente. Mas o que ela resolve exatamente? Bom, vamos lá…

O React roda do lado do cliente, front-end, ou seja, qualquer requisição aos dados do back-end são feitas após carregamento inicial da aplicação e com isso os motores de busca como o Google (SEO) não conseguem indexar esse conteúdo tornando o React inviável para criação de websites, blogs, e-commerces, etc…

Mas pense, o React não é nada além de Javascript e o NodeJS consegue entender Javascript pelo lado do servidor, então se juntarmos os dois… BOOM! O NextJS permite renderizar a parte visual construída com React no lado do servidor trazendo todos dados em tela já no primeiro carregamento removendo qualquer problema com indexação.

Se você tiver interesse de ir mais a fundo e entender na prática essa ferramenta recomendo a leitura desse post.

O recompose é uma biblioteca feita para React que possui uma série de HOC’s para facilitar a criação de componentes. Ah, mas quando exatamente eu vou usar?

Vamos imaginar a seguinte situação, você cria um componente de Dropdown que guarda apenas uma informação no estado sobre quando o componente está aberto ou fechado. Há a necessidade de transformar esse componente em Stateful apenas para guardar uma informação no estado?

Não podendo ficar de fora, as bibliotecas de CSS-in-JS estão crescendo rapidamente tornando o processo de estilização dos componentes mais agradável. Hoje, as duas bibliotecas mais utilizadas para essa operação são: Styled Components e Emotion.

As duas libs seguem padrões parecidos oferencendo uma sintaxe de estilização baseada em componentes onde você cria um novo componente a partir da aplicação de estilos em uma tag ou outro componente React.

Apesar dessa semelhança as libs possuem algumas diferenças, enquanto que o Styled Componentes oferece uma API vasta com muitos recursos, o Emotion aposta em uma API simplificada com foco em performance (veja alguns testes).

Na minha opinião hoje ambos resolvem muito bem as dificuldades de estilização no React e se você não tem uma necessidade focada em performance deve ir de Styled Components até pela grande aceitação da comunidade levando a fácil resolução de bugs e documentação clara.