Desmitificando React: Uma reflexão para iniciantes

Em busca de respostas

Você provavelmente já ouviu falar em React a biblioteca do Facebook que vem fazendo muito barulho e se consolidando cada vez mais na comunidade Frontend.

Devo arriscar que ao ouvir falar de React, provavelmente se deparou com diversos conceitos que vivem sendo associados à biblioteca: Webpack, Babel, Virtual DOM, Redux, Server Side Rendering, Preact, React Native, WebComponents… Bastante coisa né?

A quantidade de termos faz com que muitos acreditem que React é mágico ou que precisam aprender todas essas tecnologias para serem capazes de começar a se aventurar com a biblioteca.

Isso não é verdade.

O que acontece é que o desenvolvimento de aplicações modernas exige velocidade no desenvolvimento e qualidade no produto final. Não é de se espantar que estes requisitos façam surgir uma complexidade e até mesmo uma fadiga ao serem combinados.

Por isso, é importante saber isolar conceitos e definir responsabilidades.

Apenas uma biblioteca JavaScript

Isso mesmo. React está mais para jQuery do que para Angular, apesar da primeira comparação não ser tão comum. O próprio site do React o define como "Uma biblioteca JavaScript para criar interfaces".

Isso pode parecer simplificar demais, mas não é.

É exatamente essa simplicidade o maior benefício da biblioteca: Uma maneira abstrata e generalizada de criar componentes. Abstração e generalização são ferramentas poderosíssimas no mundo da programação e são elas as responsáveis pela simplicidade do React.

HTML, CSS e JavaScript

Se você está começando agora no mundo da programação pode ter se assustado ainda mais com a quantidade de termos que estão relacionados com o React, por isso, vamos dar um passo atrás e esquecer toda a parafernalha de frameworks e bibliotecas modernas.

De uma maneira bem simplificada, nossos navegadores entendem praticamente três coisas: HTML, CSS e JavaScript.

Isso significa que não importa qual foi o processo para criar estes arquivos. Pode ter sido um programa em Java que compilou para JavaScript, uma aplicação toda escrita em Elm, arquivos editados e enviados diretamente ao servidor ou até mesmo um SPA em Angular, Vue, ou React que foi empacotado via Webpack ou Parcel. No final, o browser vai baixar esse HTML, estilizá-lo com CSS e executar o JavaScript que a página necessitar.

Mais simples, não é mesmo? Então por que toda a mistificação do React?

JSX

Você provavelmente viu alguns exemplos de React e eles usavam um HTML maluco dentro do JavaScript. Esse HTML maluco se chama JSX e na verdade não é HTML e sim uma extensão da sintaxe do JavaScript.

O JSX é usado para ajudar na declaração de componentes React e que no fim das contas é transpilado para JavaScript puro. (Transpilação é uma forma de compilação que transforma um código em outro, no mesmo nível de abstração. Wiki)

Pode parecer bem estranho no começo mas ele nos permite usar todo o poder do JavaScript na criação e declaração de nossos componentes, além de usar uma sintaxe baseada no XML, ou seja: se assemelha muito ao HTML que estamos acostumados, mas que também pode servir para componentes nativos, como acontece com o Reactive Native. Ou seja, uma camada de abstração que permite que o React seja extensível.

Viu como a abstração é importante?

Para entender melhor, vejamos um exemplo de como adicionar um elemento simples a uma página web usando JavaScript puro e as alternativas com React e React + JSX.

Vanilla JS

Nosso primeiro exemplo usa apenas JavaScript com os métodos de consulta e alteração do DOM em instruções imperativas e estruturadas:

1. Busca por um elemento com ID myApp e armazena uma referência ao mesmo na variável rootElement
2. Cria um elemento do tipo span usando o método createElement do objecto document e o armazena em uma variável message.
3. Modifica algumas propriedades do elemento (className e innerText)
4. Por fim, adiciona o elemento ao nosso documento como um filho de rootElement

É a típica receita de bolo escrita de forma procedural e imperativa. Faz o que se propõe a fazer de forma direta, porém não é tão fácil de ver a estrutura final do elemento já que o montamos linha a linha. Apesar de não ser um problema neste exemplo, para elementos maiores e mais complexos, é fácil se perder e precisar executar a aplicação para ver a estrutura final.

Vamos dar uma olhada em como faríamos isso com React e JSX?

React com JSX

Neste exemplo temos alguns scripts externos que adicionam o React e algumas de suas dependências ao nosso documento e um script que declara um componente e o adiciona ao nosso DOM.

O resultado é praticamente o mesmo, com exceção do texto da tag span, porém ao invés de imperativamente construir linha a linha o nosso elemento, nós o declaramos em uma única instrução usando JSX e delegamos ao React + ReactDOM a responsabilidade de renderizar/adicionar esse elemento ao nosso DOM.

Mesmo em um exemplo simples como esse, podemos reparar que a quantidade de instruções é menor. Buscamos um elemento por seu ID, declaramos nosso componente e o adicionamos ao DOM em três instruções expressivamente consistentes.

React sem JSX

Este exemplo é o mesmo que o anterior. Na verdade o exemplo anterior será transpilado para esta sintaxe e o browser irá recebé-lo e o executar nessa forma: sem JSX e realizando as chamadas aos métodos de createElement do React diretamente. (Nota: não é o mesmo createElement do object document, mas um método próprio do React que delega a criação desse documento para a própria biblioteca)

Apesar de todas as aplicações React poderem ser construídas dessa maneira, nós perdemos um nível de abstração e com ele uma das grandes vantagens do React: a maneira declarativa de criar componentes. A estrutura do nosso componente final não está clara, se assemelhando mais ao exemplo inicial onde usamos a forma imperativa.

Conclusão

Os exemplos, apesar de bem simples, se diferenciam apenas nos níveis de abstração e na maneira como declaramos e criamos os elementos. Sendo o exemplo React + JSX o mais abstrato dos três.

É assim que o React funciona.

Resumindo: Ao usar React, nós não precisamos criar os componentes da nossa aplicação de forma imperativa e podemos delegar a responsabilidade de como tais elementos devem ser renderizados à própria biblioteca, que faz uso de uma extensão da sintaxe do JavaScript, chamada JSX, para realizar a declaração destes elementos que são transpilados para instruções JavaScripts puras.

Dúvidas? Escreva nos comentários :)

Quer saber mais sobre React? Tem muita coisa rolando por aí que pode te ajudar. Alguns links interessantes para quem quer começar:

Canal #react-studies do TC — Link para entrar no slack

Medium ReactBrasil — https://medium.com/reactbrasil

Blog do BrazilJS — https://braziljs.org/blog/tag/react-do-basico-ao-avancado/

Blog do Willian Justen— https://willianjusten.com.br/comecando-com-react/