Conhecendo o React

Embora o React não seja tão recente, pois está em desenvolvimento desde 2011, foi apenas de um ano pra cá que ele começou a ser mais utilizado. Trata-se de uma biblioteca criada pelo pessoal do Facebook. Sua funcionalidade basicamente é renderizar componentes. Contrariando o que muita gente pensa, ele não é um framework! Pra fazer uma analogia, o React seria apenas o “V” do MVC.

Certo, mas quem usa esse tal de React? Pra citar alguns exemplos: Instagram, Facebook, Twitter, Yahoo, Zendesk, Wix e Netflix. Recentemente no Brasil, a globo.com passou a usar o React na sua plataforma de vídeos.

Só em ver o nome dessas empresas já dá pra imaginar, mas pra não deixar dúvidas: o React tem sim uma ótima performance. Isso porque ele trabalha com a abordagem do Virtual DOM, e através de um poderoso algoritmo de diferenciação que ele detecta as mudanças no Virtual e altera no Real apenas o que é necessário.

A criação de componentes no React segue o princípio da responsabilidade única, ou seja, uma vez criado, o componente deve fazer apenas uma coisa e fazê-la bem, do contrário talvez seja melhor criar subcomponentes.

É possível dar um exemplo prático do que o React faz. Vou mostrar uma espécie de contador utilizando o mesmo. O código está no github: https://github.com/Lindaines/react-basico-tutorial.git.

Entre no diretório do projeto e dê um npm install para instalar as dependências. Nesse caso precisaremos do Webpack para fazer o empacotamento dos arquivos Javascript; do Babel para fazer o transpile do JSX para JS e claro, o React.

Nas dependências também há o Webpack server, para iniciá-lo basta digitar npm start, que irá executar o script de inicialização configurado no package.json. Feito isso, basta acessar a aplicação na porta 8081 do localhost.

A aplicação é bem simples, clicando no botão somar ou subtrair, o valor do contador será atualizado. O React então percebe essa mudança de estado e renderiza o componente contador novamente, isso tudo muito rápido.

Agora vamos entender melhor o código, começando pelo arquivo app.jsx:

O React é orientado a componentes, então a primeira coisa a ser feita é criar o nosso componente. Como pode-se perceber, o componente é uma classe que herda de React.Component.

Toda vez que a classe é instanciada, o atributo contador é criado e inicializado com o valor 0. O método updateContador é chamado pelo onclick dos botões que o método render retorna.

Repare esse retorno. Muitas pessoas não gostam do JSX justamente por conta da forma que ele retorna o HTML, que pode parecer estranha de começo. Eu particularmente não vejo problema, mas se você se sentir incomodado, saiba que o React não exige o uso do JSX. É perfeitamente possível a utilização do JavaScript puro pra escrever seus componentes.

Quem vai “colocar” o componente de fato dentro do index.html é o index.js, que vai renderizar o componente dentro do elemento que possui o id = “contador”.

O React prega a reutilização de componentes, então é possível renderizar o componente que criamos quantas vezes quisermos. Veja o exemplo:

Lembrando que, apesar dos componentes serem “clones”, eles são totalmente independentes. Então, alterar o estado de um não vai influenciar em absolutamente nada o estado dos outros. Esse encapsulamento é um dos pontos mais fortes da biblioteca.

Nesse exemplo, o componente foi renderizado pelo cliente, mas ele também poderia ser renderizado no servidor. Isso porque o React é isomórfico, algo que tem sido levado bastante em consideração, pois facilita muito a manutenção, melhora o desempenho e não prejudica a indexação feita pelos motores de busca.

Então é isso galera!

Lembrem-se de dar uma chance pro React na próxima vez que precisarem desenvolver pra front-end! :)