O Processo de Build do React: Como um Aplicativo React é Convertido em HTML e JavaScript

O processo de build de uma aplicação React é essencial para converter o código React em arquivos estáticos que podem ser servidos por qualquer servidor web, como IIS, Apache ou NGINX. Neste artigo técnico, vamos explorar em detalhes o que acontece durante o build de uma aplicação React, como o código é transformado em HTML e JavaScript, e como servir o aplicativo em servidores como IIS, Apache e NGINX.

1. O Processo de Build no React

1.1 Estrutura de um Aplicativo React

Um projeto React desenvolvido com create-react-app normalmente possui a seguinte estrutura:

meu-projeto/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   └── index.js
├── node_modules/
├── package.json
└── README.md

• public/index.html: Este é o arquivo HTML principal, e o único HTML servido pela aplicação. Ele possui uma <div id="root"></div> onde o conteúdo gerado pelo React será injetado.
• src/index.js: Ponto de entrada do JavaScript. Aqui, o React é inicializado e renderizado dentro da <div id="root"> do HTML.
• Componentes React (como App.js): São os componentes que estruturam a interface da aplicação.

1.2 O que acontece no Build?

Quando você executa o comando npm run build, o seguinte processo ocorre:

1. Transpilação com Babel:
   O código React escrito em JSX e ES6 é convertido para uma versão de JavaScript que todos os navegadores entendem, normalmente ES5. Isso é feito pelo Babel, um transpilador que converte código moderno em uma versão compatível com navegadores mais antigos.
2. Agrupamento (Bundling) com Webpack:
   O Webpack é uma ferramenta que combina todos os arquivos e dependências do projeto em um conjunto de arquivos compactos. Ele pega todos os arquivos JavaScript, CSS e até mesmo imagens e os otimiza para serem enviados ao navegador de forma eficiente. Durante o processo de agrupamento, o Webpack também realiza:

• Minificação: Ele remove espaços em branco, comentários e outros elementos desnecessários, resultando em um arquivo menor.
• Separação de código: Dependendo da configuração, o Webpack pode dividir o código em pequenos “chunks” para otimizar o carregamento (lazy loading).

1. Geração dos Arquivos de Build:
   O build final gerado pelo Webpack será armazenado na pasta build/. Ele inclui:

• Um arquivo HTML (index.html), onde o React injetará a aplicação.
• Arquivos JavaScript (main.js, vendor.js) que contêm o código transpilado e agrupado da aplicação.
• Arquivos CSS minificados que estilizam a aplicação.

Aqui está um exemplo do que a pasta build/ pode conter:

build/
├── index.html
├── static/
│   ├── css/
│   ├── js/
│   └── media/
└── asset-manifest.json

• index.html: É a base do aplicativo e inclui links para os arquivos CSS e JavaScript gerados.
• static/: Contém os arquivos estáticos minificados, como JavaScript e CSS.

2. Como Servir o Aplicativo React em Servidores Web

Agora que a aplicação React foi convertida em arquivos HTML e JavaScript, ela pode ser servida por servidores web como IIS, Apache ou NGINX.

2.1 Servindo o React no IIS

O Internet Information Services (IIS) é um servidor web da Microsoft. Para servir sua aplicação React, siga os seguintes passos:

1. Habilitar o IIS (caso não esteja instalado):
   No Windows, vá em Painel de Controle > Programas > Ativar ou desativar recursos do Windows e marque a opção Serviços de Informações da Internet.
2. Configurar o Site no IIS:

• Abra o Gerenciador do IIS.
• Crie um novo site, apontando o caminho físico para a pasta build/ do seu aplicativo React.
• Defina o index.html como o documento padrão.

1. Configuração do Web.config (opcional):
   Se necessário, crie um arquivo web.config na pasta build/ para lidar com URLs amigáveis (React usa o React Router para navegação sem recarregar a página). Um exemplo de web.config seria:

   <configuration>
     <system.webServer>
       <rewrite>
         <rules>
           <rule name="React Routes" stopProcessing="true">
             <match url=".*" />
             <conditions logicalGrouping="MatchAll">
               <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
               <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
             </conditions>
             <action type="Rewrite" url="/" />
           </rule>
         </rules>
       </rewrite>
     </system.webServer>
   </configuration>

2.2 Servindo o React no Apache

1. Instalar o Apache:
   No Ubuntu ou outra distribuição Linux, use o comando:

   sudo apt install apache2

2. Configurar o Site:

• Mova os arquivos da pasta build/ para o diretório raiz do seu site, geralmente /var/www/html.
• Certifique-se de que o arquivo index.html está acessível.

2. Arquivo .htaccess para React Router:
   Caso esteja usando o React Router, adicione um arquivo .htaccess no diretório build/ para redirecionar todas as requisições para o index.html:

   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]

2.3 Servindo o React no NGINX

1. Instalar o NGINX:
   No Ubuntu ou outras distribuições Linux, use:

   sudo apt install nginx

2. Configurar o NGINX:

• Mova os arquivos da pasta build/ para o diretório padrão do NGINX, geralmente /var/www/html.
• Configure o arquivo /etc/nginx/sites-available/default para servir o aplicativo. Um exemplo de configuração NGINX para React seria:

   server {
     listen 80;
     server_name seu-dominio.com;

     root /var/www/html;
     index index.html;

     location / {
       try_files $uri /index.html;
     }
   }

3. Reiniciar o NGINX:

   sudo systemctl restart nginx

Conclusão

O processo de build de um aplicativo React transforma o código JSX e ES6 em arquivos HTML, CSS e JavaScript otimizados, prontos para serem servidos por qualquer servidor web. Dependendo do servidor que você está usando (IIS, Apache ou NGINX), é possível configurar o ambiente facilmente para hospedar sua aplicação React e garantir que ela funcione corretamente, inclusive com roteamento de URLs amigáveis.