Como o React JS funciona?
Uma dúvida muito comum entre nós desenvolvedores, é como os frameworks que utilizamos no nosso dia-a-dia funcionam por baixo dos panos e nos ajudam na construção de aplicações. Foi uma dúvida como essa a respeito de React que me levou a uma pesquisa para entender um pouquinho mais a fundo o funcionamento dessa tão poderosa ferramenta e quero compartilhar esse conhecimento com você!
OBS: Nesse artigo vou abordar exclusivamente o funcionamento de React JS, futuramente posso escrever outro post para explicar sobre React Native.
O que é o React?
Antes de responder a pergunta de como funciona, primeiro vamos entender o que é o React e o que ele faz.
React JS é uma biblioteca JavaScript, ou seja, um código que foi compartilhado para ser reutilizado. Esse código compartilha funções que resolvem problemas com uma abordagem genérica (por isso pode ser facilmente reutilizado). Dessa forma, em projetos mais complexos, principalmente, permite ao desenvolvedor focar apenas no seu problema principal, não necessitando ‘reinventar a roda’.
O React traz soluções relacionadas a construção de interfaces de usuário, não apenas para aplicações web com o React JS, mas também mobile com React Native e realidade virtual com React 360. Algumas das soluções do React JS são a componentização, para reutilizarmos pedaços da nossa interface facilmente, transformando em componentes, e a facilidade de manipulação da DOM — esse aspecto é muito vantajoso para aplicações que possuem muitos elementos que recebem interação do usuário e disparam eventos que alterem a DOM.
Como funciona o React JS?
Existem basicamente dois modos de iniciar uma aplicação usando React JS: ou você configura todos os pré-requisitos necessários manualmente; ou utiliza boilerplates como o create-react-app (CRA) que já pré-configuram o necessário para você. De qualquer modo, sua aplicação no final terá um funcionamento similar a este:
Baseada nesse gráfico que fiz, vou explicando ponto a ponto para você.
1. O HTML
Nas nossas aplicações front-end, de um jeito ou de outro, sempre chegamos em um código HTML e em React isso não é diferente. Normalmente, temos um arquivo index.html localizado dentro da pasta public (padrão do CRA). Esse arquivo contém em seu body apenas uma div com o id root e será nessa div que toda a interface que montarmos com React JS será inserida. Também pode acontecer de nesse arquivo HTML conter uma tag script que importa um arquivo chamado bundle.js que será explicado em seguida.
Perceba que nossa aplicação inteira só possui UMA ÚNICA página HMTL, e a interface é dinamicamente manipulada via JavaScript. Assim, compreendemos o conceito de SPA ( single page application )
2. O INDEX.JSX
Comumente chamado de index ( podendo ter extensão .jsx .js .tsx ou .ts ) e presente em toda aplicação React JS (dentro da pasta SRC no padrão CRA), esse arquivo é o responsável por injetar nosso componente principal dentro da div com id root utilizando a função render da lib react-dom (manipulação da DOM).
A função recebe como parâmetro o componente a ser injetado, nesse caso, <App/> — note que quando estamos trabalhando com rotas em React, dentro de App teremos um componente responsável por retornar dinamicamente o componente correspondente a página da rota acessada. E como segundo parâmetro, passamos o elemento HTML no qual o código de nossos componentes será injetado (como falei anteriormente, será a div root). Sendo assim, <App/> é o componente principal e responsável por manipular todos outros componentes que serão renderizados.
📌 Caso seu componente <App/> esteja envolto pelo <React.StrictMode> isso significa que o React está configurado para realizar uma checagem no nosso código em modo desenvolvimento, se algum erro for lançado pelo modo estrito, o React não irá renderizar a interface Tal comportamento não ocorre no modo de produção.
3. WEBPACK E BABEL
O arquivo bundle.js (pode ser outro nome também, mas esse nome é como um padrão na comunidade React) é gerado pelo webpack.
Mas o que esse webpack faz? É uma biblioteca, um empacotador de código - bundler, que recebe em suas configurações um arquivo JS de entrada (no caso de React é o nosso index.jsx) e realiza um mapeamento de todas as dependências do nosso código a partir desse arquivo e em seguida organiza essas dependências em pequenos pacotes a serem entendidos pelo browser, permitindo que a gente lide com módulos próprios (separando as responsabilidades do nosso código com export e import) como é feito em Node.js. O bundler trata todos arquivos da aplicação como módulos (.sass, .jsx, .csj, .png, .js, .css, etc ), porém, ele só entende JavaScript, então, para poder realizar o empacotamento desses outros arquivos como módulos, ele utiliza loaders que nós instalamos como dependência e configuramos, como o Babel.
O Babel transpila nosso código JavaScript com sintaxe moderna que utilizamos em React (algo que pode não ser reconhecido e interpretado ainda por muitos browsers) em código JavaScript reconhecido por todos.
Depois de todo esse processo similar a uma compilação, temos como output nosso arquivo empacotado bundle.js, o único que precisa ser importado em nosso HTML, e com ele inserido, ao abrirmos nosso arquivo HTML temos toda a aplicação funcionando.
Agora você deve estar se perguntando, como eu rodava minhas aplicações React antes se eu nunca configurei nada disso?
E a resposta é simples, se você utiliza boilerplates como create-react-app, todo esse processo de configuração de webpack e loaders é abstraído e realizado pela lib react-scripts. Analisando seu package.json você achará o seguinte:
Veja que react-scripts é responsável por rodar a aplicação em modo desenvolvimento com o comando start e também realiza seu build para quando mandarmos para produção. Em desenvolvimento, é comum utilizar o webpack-dev-server que serve nossa aplicação na porta 3000 e fica assistindo as mudanças, realizando o processo de “re-compilação” com o webpack de maneira mais rápida mas menos eficiente e refletindo essas mudanças em tela. Já em produção, o código todo é “compilado” de maneira mais eficiente e mais demorada, passando até por um processo de minificação que otimiza o código e o deixa menos pesado (porém, mais difícil de ser lido por pessoas), e então o arquivo de output é inserido dinamicamente via JavaScript no arquivo index.html.
Resumindo, sua aplicação precisa necessariamente de um arquivo HTML que é o template da página carregado pelo browser, um arquivo JavaScript que é o ponto de entrada para a estrutura React e um bundler para empacotar seu código e no final anexar o script gerado necessário para o React manipular o HTML.
Com isso, abordamos o básico necessário para entendermos o funcionamento do React JS. Obrigado por chegar até aqui e espero que essa leitura tenha esclarecido suas dúvidas e trazido novos questionamentos para motivar seus estudos acerca dessa poderosa ferramenta!
Se quiser entender um pouco mais sobre webpack e configurações gerais do React vou deixar como recomendação alguns artigos muito bons que me ajudaram na compreensão desse assunto!
