Iniciando com React, Webpack e Babel

Com o lançamento do webpack 4 resolvi criar um tutorial mostrando como criar um site estático utilizando essas ferramentas.

“A MacBook with lines of code displayed on its screen next to a mug” by Artem Sapegin on Unsplash

O Webpack é uma ferramenta de build que coloca todos os seus assets, incluindo Javascript, imagens, fontes e CSS, em um gráfico de dependência. O Webpack permite usar require() em seu código-fonte para apontar para arquivos locais, como imagens, e decidir como eles são processados em seu bundle Javascript final.

O Babel é um transpilador que te permite escrever javascript de uma maneira mais moderna, utilizando funções e recursos que ainda não estão disponíveis de forma nativa nos browsers. Ele usa um conjunto de plugins para transpilar seu código ECMAScript 6/7 para o ECMAScript 5 para que seu código funcione nos browsers atuais, que ainda não implementaram certas funcionalidades do ESNext.

Para criar o novo projeto e gerenciar as dependências dele, irei utilizar o Yarn em vez do NPM
Para começar, iremos criar um novo projeto no terminal com o comando yarn init -y.
Esse comando geram um novo arquivo chamadopackage.json no diretório corrente. Esse arquivo guarda algumas configurações relacionadas ao seu projeto, como os pacotes que seu projeto depende, comandos que possam ser utilizados para facilitar o desenvolvimento, build e deploy e configurações relacionadas aos pacotes instalados.


Para adicionar o webpack ao seu projeto, basta dar o comando abaixo:

yarn add -D webpack webpack-cli

A opção -D ou --dev diz para o yarn que esse pacote só vai ser utilizado para desenvolvimento, não constando no bundle final do seu projeto.

Após adicionar o webpack, vamos criar uma estrutura básica de arquivos para o nosso projeto:

mkdir src
touch src/index.js

O webpack 4, por padrão, irá procurar um aquivo index.jsdentro da pasta srccomo ponto de entrada para o build do projeto.

Agora vamos adicionar um novo comando para realizar o build do nosso projeto no arquivo package.json . Para isso, vamos adicionar a chave "scripts" e adicionar nosso comando de build chamando o webpack. Após isso, seu arquivo package.json deve estar parecido com o abaixo:

{
"name": "react-tutorial",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "webpack --mode production"
},
"devDependencies": {
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13"
}
}

Após isto, se você der o comando yarn buildo webpack irá criar um gráfico de depenências a partir do arquivo src/index.js , empacotar tudo e colocará o resultado final no arquivo dist/main.js.


Agora vamos adicionar o suporte ao Babel para desfrutar das novas funcionalidades do ECMAScript:

yarn add -D babel-core babel-loader babel-preset-env

O babel-core é a lib que contém as fundações do babel para realizar a transpilação do código de es6/7 para es5.
O babel-loader é um plugin para o webpack, para que você possa utilizar o babel durante o seu processo de build/bundle com o webpack.
O babel-preset-env é um plugin do babel que sabe como transformar as funcionalidades do es6/7 em código es5 de forma a dar suporte a uma grade de browsers.

Após adicionar as dependências precisamos configurar o webpack para utilizar o babel durante o processo de bundling. Teremos que criar um arquivo novo, chamado webpack.config.js com o seguinte conteúdo:

module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};

Nesse arquivo você pode alterar os comportamentos padrões do webpack e customizar o seu bundle.
Na nossa configuração estamos indicando para o webpack utilizar o babel-loader nos arquivos com extensão .js. Isso faz com que o babel seja acionado para transpilar cada arquivo javascript antes do webpack realizar o bundle.

Também precisaremos adicionar um arquivo chamado .babelrc para que o babel utilize o preset env.

{
"presets": [
"env"
]
}

Até agora não escrevemos uma linha de código para a nossa aplicação, então vamos começar a adicionar suporte ao React para criar a página inicial da nossa app.

yarn add react react-dom
yarn add -D babel-preset-react

Vamos alterar o .babelrc para incluir o preset react para que ele seja capaz de transpilar o código com sintaxe JSX:

{
"presets": [
"env",
"react"
]
}

Após esta etapa, poderemos criar o código da nossa app react!
Vamos começar criando o arquivo src/App.js onde definiremos nossa app react.

import React from "react";
const App = () => {
return (
<div>
<p>Bem-vindo a sua nova app!</p>
</div>
);
};
export default App;

Agora precisamos renderizar nossa app no DOM. Para isso abra o arquivo src/index.js e adicione o seguinte conteúdo:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("app"));

Pronto, já temos uma aplicação válida utilizando react, webpack e babel!
Mas para nossa app funcionar de verdade precisamos de um arquivo HTML para injetar nosso bundle e ver a mágica acontecendo…

Para isso nos vamos adicionar ao webpack o pluginhtml-webpack-plugin e o html-loader:

yarn add -D html-webpack-plugin html-loader

Após esta etapa precisamos configurar o webpack para que ele gere um arquivo HTML e injete nosso bundle nele. Faremos isso alterando o arquivo webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};

Notem que na configuração do HtmlWebpackPlugin definimos o template utilizado como base para o nosso arquivo HTML e o nome do arquivo que será gerado pelo plugin.

Precisamos agora criar o arquivo que será utilizado como template, o src/index.html.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack 4 quickstart</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>

Notem que não referenciamos nenhum arquivo javascript nesse arquivo HTML. O Plugin se encarrega de adicionar as linhas necessárias com os nossos assets.

Definimos apenas a divcom id "app" para que nosso componente seja injetado neste nó do DOM.

Feito isto, podemos dar o comando yarn build e depois abrir o arquivo dist/index.html para ver nossa app funcionando!

Com isso temos o setup da nossa app completo e pronto para adicionar novas features :-)

Os código-fonte está disponível no github: https://github.com/reginaldosousa/react-tutorial

Nos próximos posts vamos continuar evoluindo nossa aplicação, adicionando novas rotas, consultando APIs e adicionando suporte a Server Side Rendering.