Artigo original: https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/

Nota de tradução: assim como em outros artigos mais antigos sobre React, enfatizamos que, a partir da versão 18 do React, muitas modificações ocorreram e é possível que, tendo a versão mais recente instalada, as configurações feitas neste projeto não funcionem. Para o projeto funcionar, é preciso a instalação da versão sugerida no projeto.

Você já vem usando o create-react-app, também conhecido como CRA, há algum tempo. É ótimo e você pode começar a programar diretamente. Porém, quando você precisar sair do create-react-app e começar a configurar sua própria aplicação do React, haverá um momento em que precisará abrir mão do controle automático e começar a explorar por conta própria.

Este guia abordará uma configuração mais simples do React que, pessoalmente, tenho usado em quase todos os meus projetos com React. Ao final deste tutorial, teremos nosso próprio esqueleto (em inglês, boilerplate) pessoal e aprenderemos algumas configurações a partir dele.

Índice

  • Por que criar sua própria configuração?
  • Configurando o Webpack 4
  • Configurando o Babel 7
  • Adicionando o Prettier
  • Adicionando mapa de origem para obter melhores logs de erro
  • Configurando o ESLint
  • Encontrei erros! O que faço agora?
  • Adicionando o processador de CSS LESS
  • Fazendo o deploy da aplicação do React no Netlify
  • Conclusão

Por que criar sua própria configuração?

Existem razões específicas que tornam a criação da sua própria configuração do React algo sensato a se fazer. Provavelmente, você já está familiarizado com o React e deseja aprender a usar ferramentas como o Webpack e o Babel por conta própria. Essas ferramentas de construção são poderosas. Se tiver um tempo extra, sempre é bom aprender mais sobre elas.

Os desenvolvedores são naturalmente pessoas curiosas. Se você sente que gostaria de saber como as coisas funcionam e qual parte faz o quê, deixe-me ajudá-lo com isso.

Além disso, ocultar a configuração do React por meio do create-react-app é voltado para desenvolvedores que estão começando a aprender React, já que a configuração não deve ser um obstáculo para começar. No entanto, quando as coisas ficam mais sérias, é claro que você precisa de mais ferramentas para integrar ao seu projeto. Pense em:

  • Adicionar carregadores do Webpack para LESS e SASS
  • Realizar a renderização no lado do servidor
  • Usar novas versões do ES
  • Adicionar MobX e Redux
  • Criar sua própria configuração apenas para fins de aprendizado

Se você procurar pela Internet, encontrará alguns truques para contornar as limitações do CRA, como o "create-react-app rewired". Por que não aprender a configurar o React por conta própria, no entanto? Eu vou ajudar você a chegar lá, passo a passo.

Agora que você está convencido a aprender um pouco sobre configuração, vamos começar iniciando um projeto em React do zero.

Abra o prompt de comando ou o Git bash e crie um diretório.

mkdir react-config-tutorial && cd react-config-tutorial

Inicialize o projeto com o NPM executando:

npm init -y

Agora, instale o React:

npm install react react-dom

Além disso, você pode visualizar o código-fonte no GitHub enquanto lê este tutorial para obter explicações sobre as configurações.

Configurando o Webpack 4

Nota da tradução: o próprio Webpack recomendado neste tutorial está na versão 4. No momento da tradução, a versão do Webpack é a versão 5.

Nosso primeiro passo será configurar o Webpack. É uma ferramenta muito popular e poderosa para configurar não apenas o React, mas também quase todos os projetos de front-end. A função principal do Webpack é pegar vários arquivos JavaScript que escrevemos em nosso projeto e transformá-los em um único arquivo minificado, para que ele seja rápido de ser servido. A partir do Webpack 4, não é mais necessário escrever um arquivo de configuração para usá-lo, mas neste tutorial escreveremos um para entendermos melhor.

Primeiro, vamos fazer algumas instalações

npm install --save-dev webpack webpack-dev-server webpack-cli

Isso instalará:

  • webpack — que inclui todas as funcionalidades principais do Webpack
  • webpack-dev-server — esse servidor de desenvolvimento executa automaticamente o Webpack novamente quando nosso arquivo é alterado
  • webpack-cli — permite executar o Webpack a partir da linha de comando

Vamos tentar executar o Webpack adicionando o seguinte script ao arquivo package.json:

"scripts": {
 "start": "webpack-dev-server --mode development",
},

Agora, crie um arquivo index.html na raiz do seu projeto com o seguinte conteúdo:

<!DOCTYPE html>
<html>
 <head>
 <title>My React Configuration Setup</title>
 </head>
 <body>
 <div id="root"></div>
 <script src="./dist/bundle.js"></script>
 </body>
</html>

Crie um diretório chamado src e, dentro dele, crie um arquivo chamado index.js.

mkdir src && cd src && touch index.js

Então, escreva um componente do React no arquivo:

import React from "react";
import ReactDOM from "react-dom";
class Welcome extends React.Component {
  render() {
    return <h1>Hello World from React boilerplate</h1>;
  }
}
ReactDOM.render(<Welcome />, document.getElementById("root"));

Execute o Webpack usando npm run start … Ocorrerá um erro.

You may need an appropriate loader to handle this file type
"Você pode precisar de um carregador adequado para lidar com esse tipo de arquivo"

Configurando o Babel 7

O componente do React que escrevemos acima utilizou a sintaxe de classe, que é uma característica do ES6. O Webpack precisa do Babel para processar o ES6 em sintaxes do ES5, a fim de que essa classe funcione.

Vamos instalar o Babel no nosso projeto:

npm install --save-dev @babel/core @babel/preset-env \@babel/preset-react babel-loader

Por que precisamos desses pacotes?

  • @babel/core é a dependência principal que inclui o script de transformação do Babel.
  • @babel/preset-env é o preset padrão do Babel usado para transformar ES6+ em código ES5 válido. Opcionalmente, configura automaticamente polyfills do navegador.
  • @babel/preset-react é usado para transformar JSX e a sintaxe de classe do React em código JavaScript válido.
  • babel-loader é um loader do Webpack que conecta o Babel ao Webpack. Vamos executar o Babel a partir do Webpack usando este pacote.

Para integrar o Babel ao nosso Webpack, precisamos criar um arquivo de configuração do Webpack. Vamos criar um arquivo webpack.config.js:

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }
    ]
  },
};

Esta configuração do Webpack basicamente está dizendo que o ponto de entrada (em inglês, entry)) da nossa aplicação é index.js, então pegue tudo o que é necessário por esse arquivo e coloque a saída (em inglês, output) do processo de agrupamento (bundling) no diretório dist, com o nome bundle.js. Ah, se estivermos executando no webpack-dev-server, diga ao servidor para servir o conteúdo a partir da configuração contentBase, que é também o diretório onde a configuração está. Para os arquivos .js ou .jsx, utilize o babel-loader para transpilar todos eles.

Para usar os presets do Babel, crie um arquivo .babelrc.

touch .babelrc

Escreva o seguinte conteúdo:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Agora, execute npm run start novamente. Dessa vez, funcionará.

Adicionando o Prettier

Para acelerar ainda mais o desenvolvimento, vamos criar um formatador de código usando o Prettier. Instale a dependência localmente e use o argumento --save-exact, já que o Prettier introduz mudanças estilísticas em lançamentos de correções.

npm install --save-dev --save-exact prettier

Agora, precisamos escrever o arquivo de configuração .prettierrc:

{
 "semi": true,
 "singleQuote": true,
 "trailingComma": "es5"
}

As regras significam que queremos adicionar ponto e vírgula no final de cada instrução, usar aspas simples sempre que apropriado e adicionar vírgulas finais para código ES5 com várias linhas, como objetos ou arrays.

Você pode executar o Prettier a partir da linha de comando com:

npx prettier --write "src/**/*.js"

Também é possível adicionar um novo script ao arquivo package.json:

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "webpack-dev-server --mode development",
 "format": "prettier --write \"src/**/*.js\""
},

Agora, podemos executar o Prettier usando npm run format.

Além disso, se você estiver usando o VSCode para desenvolvimento, pode instalar a extensão do Prettier e executá-la toda vez que salvar suas alterações, adicionando esta configuração:

"editor.formatOnSave": true

Adicionando mapa de origem para obter melhores logs de erro

Uma vez que o Webpack empacota o código, os mapas de origem são obrigatórios para obter uma referência ao arquivo original que gerou um erro. Por exemplo, se você empacotar três arquivos de origem (a.js, b.js, e c.js) em um único pacote (bundler.js) e um dos arquivos de origem contiver um erro, o rastreamento de pilha simplesmente apontará para bundle.js. Isso é problemático, pois você provavelmente deseja saber exatamente se é o arquivo a, b ou c que está causando um erro.

Você pode instruir o Webpack a gerar mapas de origem usando a propriedade devtool na configuração:

module.exports = {
  devtool: 'inline-source-map',
  // … o resto da configuração
};

Embora isso possa tornar a compilação mais lenta, não afeta a produção. Os sourcemaps só são baixados se você abrir as ferramentas de desenvolvimento do navegador (DevTools) (texto em inglês).

Configurando o ESLint

Um linter é um programa que verifica nosso código em busca de erros ou avisos que possam causar bugs. O linter do JavaScript, o ESLint, é um programa de linting muito flexível que pode ser configurado de várias maneiras.

Antes de prosseguirmos, contudo, vamos instalar o ESLint em nosso projeto:

npm --save-dev install eslint eslint-loader babel-eslint eslint-config-react eslint-plugin-react
  • O eslint é a dependência principal para todas as funcionalidades, enquanto o eslint-loader nos permite integrar o eslint ao Webpack. Agora, como o React usa a sintaxe ES6+, vamos adicionar o babel-eslint — um analisador que permite que o eslint verifique todos os códigos ES6+ válidos.
  • eslint-config-react e eslint-plugin-react são ambos usados para permitir que o ESLint utilize regras pré-definidas.

Como já temos o Webpack, só precisamos modificar a configuração ligeiramente:

module.exports = {
  // modify the module
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader'] // include eslint-loader
    }]
  },
};

Em seguida, crie um arquivo de configuração do ESLint chamado .eslintrc com este conteúdo:

{
  "parser": "babel-eslint",
  "extends": "react",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

A configuração basicamente está dizendo, "Ei, ESLint, por favor, analise o código usando o babel-eslint antes de verificá-lo e, ao fazer a verificação, verifique se todas as regras do nosso arquivo de configuração de regras do React estão sendo cumpridas. Pegue as variáveis globais do ambiente do navegador e do Node. Ah, e se for código do React, pegue a versão do próprio módulo. Desse modo, o usuário não precisará especificar a versão manualmente."

Em vez de especificar nossas próprias regras manualmente, simplesmente estendemos as regras do react, que foram disponibilizadas por eslint-config-react e eslint-plugin-react.

Encontrei erros! O que faço agora?

Infelizmente, a única maneira de realmente descobrir como corrigir erros do ESLint é olhando a documentação das regras. Há uma maneira rápida de corrigir erros do ESLint usando eslint--fix. Na verdade, isso é útil para uma correção rápida. Vamos adicionar um script ao nosso arquivo package.json:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --mode development",
  "format": "prettier --write \"src/**/*.js\"",
  "eslint-fix": “eslint --fix \"src/**/*.js\"", // the eslint script
  "build": "webpack --mode production"
},

Em seguida, execute-o com npm run eslint-fix. Não se preocupe se você ainda não está muito familiarizado com o ESLint por enquanto. Você aprenderá mais sobre o ESLint à medida que o utilizar.

Adicionando o processador de CSS LESS

Para adicionar o processador LESS à nossa aplicação do React, precisaremos dos pacotes less e loader do Webpack:

npm install --save-dev less less-loader css-loader style-loader

O less-loader compilará nosso arquivo less em CSS, enquanto o css-loader resolverá a sintaxe do CSS, como import or url(). O style-loader pegará nosso CSS compilado e o carregará na tag <style> em nosso pacote. Isso é ótimo para o desenvolvimento, pois nos permite atualizar nosso estilo instantaneamente, sem precisar atualizar o navegador.

Agora, vamos adicionar alguns arquivos de CSS para criar um diretório de estilo em src/style

cd src && mkdir style && touch header.less && touch main.less

Conteúdo do header.less:

.header {
  background-color: #3d3d;
}

Conteúdo do main.less:

@import "header.less";
@color: #f5adad;
body {
  background-color: @color;
}

Depois, importe nosso arquivo main.less do index.js:

import "./style/main.less";

Em seguida, atualize a propriedade module na configuração do Webpack:

module: {
  rules: [{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader']
  },
  {
    test: /\.less$/,
    use: [
      'style-loader',
      'css-loader',
      'less-loader',
    ],
  },
 ]
},

Execute o script de start e estamos prontos para seguir em frente!

Fazendo o deploy da aplicação do React no Netlify

Todas as aplicações precisam passar pelo processo de deploy na etapa final, e para aplicações do React, o deploy é muito fácil.

Primeiro, vamos alterar a saída de build e o contentBase de dist para build em nossa configuração do Webpack.

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'), // change this
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: "./build",
  },
//…

Agora, vamos instalar um novo plug-in do Webpack, chamado HtmlWebpackPlugin.

npm install html-webpack-plugin -D

Esse plug-in gerará um arquivo index.html no mesmo diretório onde o nosso bundle.js é criado pelo Webpack. Nesse caso, estamos falando do diretório build.

Por que precisamos desse plug-in? Porque o Netlify requer que um único diretório seja definido como o diretório raiz. Por isso, não podemos usar o index.html em nosso diretório raiz com o Netlify. Você precisa atualizar sua configuração do Webpack para que fique assim:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: //…
  output: {
    //…
  },
  devServer: {
    contentBase: "./build",
  },
  module: {
    //…
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('./index.html'),
    }),
  ]
};

Não se esqueça de remover a tag script do seu index.html:

<!DOCTYPE html><html>  <head>    <title>My React Configuration Setup</title>  </head>  <body>    <div id="root"></div>  </body></html><!DOCTYPE html>
<html>
  <head>
    <title>My React Configuration Setup</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Agora, você pode testar a configuração com o comando npm run build. Uma vez concluído, faça o push do seu esqueleto (boilerplate) para um repositório do GitHub. É hora de fazer o deploy da nossa aplicação!

Vamos criar uma conta no Netlify. Se você ainda não ouviu falar do Netlify antes, é um incrível serviço de hospedagem de sites estáticos que oferece todas as ferramentas necessárias para implantar um site estático gratuitamente. O que é um site estático? É um site criado a partir de um conjunto de páginas HTML estáticas, sem nenhum back-end. Nosso esqueleto (boilerplate) do React, como está agora, conta como um site estático, pois não configuramos nenhum back-end – sendo composto apenas por HTML e JavaScript.

Após se cadastrar, selecione "New site" do Git e escolha o GitHub como seu provedor de Git:

WfWqORsZjfHKwOpZ63d-nZUC6N2FF9CPzDrg

Você precisa conceder permissões para o Netlify e, em seguida, selecionar o repositório do seu esqueleto (boilerplate) do React.

MtKFlYYRZVZ7JNcmP8AHiiDV5OLlJoy4hBk5

Agora, você precisa inserir o comando de construção (build) e o diretório de publicação. Como você pode ver, é por isso que precisamos do HtmlWebpackPlugin, porque precisamos servir tudo a partir de um único diretório. Em vez de atualizar manualmente nosso arquivo index.html raiz para as alterações, simplesmente o geramos usando o plug-in.

aecd4gyxtTE22EuPoHzXRe1yA9I9BqTaPfa1

Certifique-se de ter o mesmo comando que a captura de tela acima, ou sua aplicação pode não funcionar.

T3GN2LRCZtTIfNNOSVPV-tKgrmlllnRVcmcs

Assim que o status de deploy mudar para published (em português, publicado – número 2 acima), você pode acessar o nome de site aleatório que o Netlify atribuiu à sua aplicação (número 1).

Sua aplicação React foi implantada. Parabéns!

Conclusão

Você acaba de criar o seu próprio esqueleto (boilerplate) de projeto em React e de implantá-lo ao vivo no Netlify. É verdade que não mergulhamos muito fundo nas configurações do Webpack, porque este boilerplate foi projetado para ser um ponto de partida genérico. Em alguns casos, quando precisamos de recursos avançados como renderização no lado do servidor, precisamos ajustar a configuração novamente.

Porém, fique tranquilo! Você chegou até aqui, o que significa que já compreende o que o Webpack, o Babel, o Prettier e o ESLint fazem. O Webpack possui muitos carregadores poderosos que podem ajudar em muitos casos que você encontrará com frequência ao construir uma aplicação para a web.

Além disso, estou atualmente escrevendo um livro para ajudar os desenvolvedores de software a aprender sobre o React, que você talvez queira dar uma olhada (livro em inglês)!

3ZrRhRwWyXnRsvrtUyYmir0KVQEteEd5yi3G

Você também pode ler mais dos meus tutoriais sobre React em sebhastian.com.