Snowpack com React - Um guia básico - Blog Cod3r
18/02/2021 99 0
Colocar um projeto em produção, muitas vezes, é algo bem complicado. Para ajudar, podemos seguir algumas etapas, sendo o processo build um dos mais importantes. Como ele é possível "compactar" todos os arquivos, deixando-os menores, com o intuito de melhorar o desempenho.
Há várias formas e ferramentas para fazer isso, sendo o webpack o mais usado. No entanto, conforme o seu projeto cresce, o build vai ficando maior e mais lento. Então, para solucionar esse problema, surgiu o Snowpack. Nesse artigo, vou explicar o que é o Snowpack e fazer um exemplo prático para observar como ele funciona com o React.
Como o Snowpack funciona?
Snowpack se declara como a ferramenta de bundle mais rápida que existe, mas como ela faz isso? Simples, ela pega toda a aplicação criada salva em cache e sempre que você modifica um arquivo no seu Editor, ele faz o build apenas do arquivo em questão. Ou seja, se você tem em tela 1 componente, mas modificou um que não está sendo exibido diretamente, somente o arquivo modificado vai sofrer um build, gerando assim um ganho de desempenho muito superior a qualquer outro.
Já o Webpack funciona de uma forma bem diferente. Sempre que salvamos um arquivo, todo o projeto é "refeito", resultando em um processo mais demorado.
Primeiramente, vamos usar um comando para criar o projeto e configurar o Snowpack. Outro ponto positivo do Snowpack é que, por padrão, ele suporta projetos em React. Ou seja, ele compreende perfeitamente arquivos jsx (ou tsx), resultando em então é uma preocupação a menos. Para prosseguir basta usar o seguinte comando:
Nele criamos um template padrão e em branco do React.
O próximo passo é baixar o React e o ReactDOM, usando o seguinte comando:
Se olharmos o nosso arquivo index.html, vamos ter algo do tipo:
Aqui temos basicamente uma página HTML, como qualquer outra, mas com o pequeno detalhe na tag script
Estamos definindo a forma como o JavaScript vai funcionar, no caso do Snowpack é a partir do sistemas de módulos do JavaScript. Logo depois, estamos apontando para o arquivo index.js, que servirá de arquivo de entrada para o projeto.
Snowpack na prática
Agora vamos entrar no mundo do React e fazer toda a configuração manual de um projeto. Vamos lá!
Primeiramente, vou criar uma pasta chamada src na raiz do projeto e jogar o index.js lá.
IMPORTANTE! Devemos modificar o caminho que está presente dentro do index.html. Sem isso o projeto não irá funcionar.
Agora vamos modificar a extensão do arquivo index.js para index.jsx, deixando o projeto mais receptível ao React.
Dentro dele vamos importar o React e o ReactDOM, duas dependências necessárias para o React funcionar corretamente.
Depois, vamos criar o primeiro "Componente" em tela, com o seguinte código:
ReactDOM.render(<h1>Olá Mundo</h1>, document.getElementById('root'));
Porém, se formos no navegador, será retornado um erro. Como resolvê-lo?
A solução é simples! Como não definimos um id específico dentro do nosso index.html para renderizar os nosso componentes, dentro dele devemos deixar assim:
Dessa forma, o erro vai sumir e projeto será renderizado corretamente.
Por questões de organização, vamos criar mais uma pasta dentro de src chamada components. Nela colocaremos todos os componentes que usaremos dentro desse mini projeto. Logo em seguida, criaremos um arquivo chamado App.jsx, que vai suportar o nosso componente.
Dentro de App.jsx daremos a seguinte estrutura para ele:
Dentro do index.jsx vamos importar o App e colocar para ser renderizado em tela a partir do render:
Nada será alterado na tela, pois é a mesma mensagem. No entanto, agora já estamos utilizando um componente React para ser renderizado diretamente em tela.
Por fim, vamos trazer um pouco de estilo para o Snowpack. Basta criar um arquivo css referente ao componente. Vou usar os seguintes estilos:
Depois vamos realizar o import desse estilo dentro do nosso componente:
E agora vamos definir onde a nossa classe será aplicada e utilizá-la:
Tendo como resultado final:
Feito isso, podemos perceber como o Snowpack funciona e como podemos usá-lo. Creio que agora você tem uma ideia do quão simples e rápido é o desenvolvimento com o Snowpack, pois não precisamos de praticamente nenhuma configuração adicional para que funcione corretamente.
É claro que o universo do Snowpack é bem maior, como plugins por exemplo; podemos trazer mais conteúdos sobre essa belezinha em um próximo post!