5 ferramentas em alta para desenvolvedores React
Provavelmente você já percebeu que o ecossistema do React é muito aquecido e diversas tecnologias por volta dessa ferramenta surgem todos os dias: GraphQL, Flow, NextJS, Apollo, Relay, etc…
Claro que seu tempo é limitado e por isso vamos analisar nesse post as ferramentas mais interessantes para você estudar.
Chega de conversa fiada e bora pra lista!
1. Apollo / Relay (GraphQL)
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).
2. Flow / TypeScript (Tipagem estática)
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 que mudaria basicamente em um componente ReactJS utilizando Flow, por exemplo? Veja o exemplo abaixo de um componente sem tipagem estática:
// Sem flow
import React, { Component } from 'react';
export default class Button extends Component {
state = {
counter: 0,
};
updateCounter = () => {
this.setState(state => ({ counter: state.counter + 1 }));
};
render() {
return (
<button onClick={this.updateCounter} type={this.props.type}>
{this.props.children}
</button>
);
}
}
Agora adicionando tipagem às propriedades e estado do componente:
// Com flow
import * as React from 'react';
type Props = {
type: string,
children: React.Node,
};
type State = {
count: number,
};
export default class Button extends Component<Props, State> {
state = {
counter: 0,
};
updateCounter = () => {
this.setState(state => ({ counter: state.counter + 1 }));
};
render() {
return (
<button onClick={this.updateCounter} type={this.props.type}>
{this.props.children}
</button>
);
}
}
Veja que apenas repassamos um objeto informando o tipo de valores para cada propriedade e informação no estado do componente. A tipagem estática vai muito além do que apenas isso mas a essência é essa.
Mas qual utilizar? Flow ou TypeScript? Hoje estamos em um cenário com o TypeScript dominando grande parte do ecossistema Javascript e o Flow crescendo aos poucos. Já que o Flow é uma ferramenta da Facebook provavelmente veremos ela sendo “empurrada” dentro das bibliotecas do Facebook como ReactJS e React Native.
Nesse caso a decisão é a seguinte, se você está estudando para ter algum resultado imediato em alguma vaga, por exemplo, vá de TypeScript. Caso você esteja apostando para o futuro vá de Flow já que provavelmente o suporte será mais intenso à essa alternativa dentro do React.
3. Next.js (server-side rendering)
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.
4. Recompose
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?
Veja como podemos fazer isso com o recompose de maneira simples:
import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
const Dropdown = ({ opened, toggleDropdown }) => (
<div>
<button type="button" onClick={toggleDropdown}>
Abrir/fechar
</button>
<ul className={`dropdown ${opened ? 'dropdown-open' : ''}`}>
<li>ReactJS</li>
<li>React Native</li>
<li>NodeJS</li>
</ul>
</div>
);
export default compose(
withState('opened', 'setOpened', false),
withHandlers({
toggleDropdown: (props) => {
props.setOpened(!props.opened);
},
}),
)(Dropdown);
Nesse exemplo utilizamos o compose para unir mais de um HOC em um mesmo componente. Utilizamos então o HOC withState que adiciona uma propriedade opened que pode ter seu valor atualizado através da função setOpened e inicia com um valor padrão false.
Além disso, utilizamos outro HOC chamado withHandlers que adiciona novos métodos ao componente capazes de acessar as propriedades do mesmo e manipulá-las como for melhor. Dessa forma, criamos um componente Dropdown com uma informação opened manipulável sem a criação de um Stateful component.
O recompose vai muito além disso e você pode entender todas suas features aqui.
5. Styled componentes / Emotion (CSS-in-JS)
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.
Chegando ao fim
Estamos chegando ao fim de mais um post e dessa vez um pouco diferente trazendo algumas das tecnologias que desenvolvedores React devem ficar de olho. Dessas citadas acima não vejo uma ferramenta que você pode se dar ao luxo de não entender pelo menos o básico de seu funcionamento.
Se você gostou desse post ou teria inclusive vontade de inserir mais um item nessa lista deixa seu comentário aí em baixo para discutirmos.
