Configurando React, Webpack e Babel: sem erros, sem sofrimento.
- #React
- #Node.js
Introdução
Neste artigo você aprenderá a configurar um ambiente no qual será possível utilizar a biblioteca React para desenvolver aplicações para a web (com foco no sistema operacional Windows, mas você pode realizar adaptações dependendo de seu sistema operacional).
O processo será descrito detalhadamente, desde a instalação do gerenciador npm até a conclusão do processo de configuração e execução da aplicação.
Vamos iniciar o processo!
Instalação do npm
Para que possamos baixar os arquivos necessários e realizar a configuração do projeto, precisamos instalar este gerenciador de pacotes que, por padrão, pode instalado em conjunto com o Node.js (software de execução de códigos JavaScript).
Para baixar, só é necessário ir até o site oficial (disponível neste link), acessar a área de Downloads e buscar pela versão mais apropriada para o seu sistema operacional (Há versões disponíveis para Windows, Mac e Linux).
Criando o diretório do projeto
Criando a pasta
Basicamente, precisamos criar uma pasta onde colocaremos nossa aplicação. Podemos fazer isso manualmente (através do Explorador de Arquivos, no caso do Windows, ou de interfaces parecidas) ou através do terminal.
Neste artigo, optarei por criar através do terminal (para acessá-lo, procure em seu computador pelo prompt de comando).
No caso do Windows, utilizando o comando cd, navegue até o local onde deseja colocar o projeto e crie o diretório dele através do comando mkdir + (nome desejado).
mkdir projeto-react
Entrando na pasta
Para entrar na pasta do projeto, utilize cd + (nome escolhido).
cd projeto-react
Configurando o arquivo package.json
Para iniciar nossa aplicação e garantir uma boa organização, precisamos criar e configurar o arquivo package.json.
Como já entramos na pasta, só precisamos digitar um simples comando através do terminal:
npm init -y
Com esse comando, não precisaremos configurar cada uma das opções do arquivo, mas se desejar fazer isto, basta digitar, ao invés do comando anterior:
npm init
Instalação do Babel
Para instalar o Babel (um transcompilador de código JavaScript que facilita o desenvolvimento em ReactJS), só precisamos digitar no terminal:
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
Esse comando instalará o núcleo do compilador do Babel (babel@core), proporcionará a compatibilidade com versões do EcmaScript mais recentes (através do @babel/preset-env), tornará possível a compatibilidade com JSX (por meio do @babel-preset-react) e a transpilação do código (através do plugin do webpack babel-loader).
Curiosidade
O “-D “ na frente dos comandos serve para que obtenhamos as versões para desenvolvimento.
Ele pode ser trocado por:
--save-dev
Sem alteração de sentido.
Instalação do React/React DOM
Por meio do comando a seguir, poderemos instalar o React e o pacote do React DOM:
npm i -D react react-dom
Instalação do Webpack e loaders úteis
Agora teremos de instalar alguns outros itens, dentre eles: ferramentas de exportação de arquivos HTML, arquivos do webpack, etc.
Só precisamos digitar o seguinte comando no terminal:
npm i -D html-loader html-webpack-plugin webpack webpack-cli webpack-dev-server
Curiosidade
O comando npm i também pode ser escrito como npm install.
Através dele, podemos instalar os diversos arquivos e ferramentas que farão parte do nosso projeto.
É importante observar que, através desse comando, não instalamos nada diretamente nas nossas máquinas, mas apenas no diretório do projeto.
Outros loaders adicionais
Para evitar erros durante a execução de alguns comandos, devemos instalar alguns outros loaders relacionados a arquivos CSS e a arquivos de imagem (para que possamos carregá-las sem nenhum erro durante a elaboração de nossas aplicações).
Para os loaders CSS, devemos digitar:
npm i -D style-loader css-loader
E para que possamos carregar imagens, precisamos do file-loader:
npm i -D file-loader
Configurando o arquivo .babelrc
Agora precisamos criar um arquivo .babelrc e escrever alguns pequenos trechos de código em seu interior.
Para fazer isso, você pode utilizar algumas ferramentas de edição de texto. No caso, optarei por utilizar o Visual Studio Code (você pode baixá-lo por aqui).
Abrindo o diretório do projeto no Visual Studio Code, basta que criemos um arquivo .babelrc (sem nome, apenas com essa extensão) na raíz da aplicação.
Dentro dele, devemos digitar o seguinte trecho de código:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Configurando o arquivo webpack.config.js
Também devemos realizar a configuração do webpack através do arquivo webpack.config.js.
Nas versões mais atuais do webpack, não precisamos definir um arquivo de entrada (que, por padrão, dentro da aplicação, estará localizado em src/index.js) e nem um local para os arquivos de saída (que, por padrão, estarão localizados no diretório dist, que será criado posteriormente ao ativarmos os modos development ou production).
Você pode optar por definir manualmente esses caminhos, mas neste artigo optaremos pelas configurações padrão.
No Visual Studio Code (ou por outro método que desejar), crie o arquivo webpack.config.js na raíz do projeto.
Dentro dele, digite os seguintes trechos de código e tudo estará configurado:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
devtool: "source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: { loader: "babel-loader" }
},
{
test: /\.html$/,
use: [{ loader: "html-loader" }]
},
{
test: /\.css$/,
use: [ "style-loader", "css-loader" ]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [ 'file-loader' ]
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new HtmlWebPackPlugin ({
template: "./src/index.html",
filename: "./index.html"
})
]
};
Criando o arquivo index.js e o index.html
index.js
Lembra que, como arquivo de entrada, o webpack busca pelo caminho src/index.js?
Logo, temos de criar o arquivo e o diretório.
Na raíz de sua aplicação, crie a pasta src e, dentro dela, crie o arquivo index.js.
Ao construir componentes em React, podemos importá-los através deste arquivo com o comando:
import nome-do-componente from "caminho-até-o-arquivo";
Colocando entre as aspas o caminho até o arquivo do componente.
Por padrão, podemos importar um componente chamado App, que criaremos posteriormente:
import App from "./App";
index.html
No mesmo local, ou seja, dentro da pasta src, devemos criar o arquivo index.html, pois ele será a base onde serão renderizados nossos componentes.
Se estiver perdido e quiser um modelo padrão, você pode criá-lo da seguinte forma:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Configurando ReactJS, Babel e Webpack</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Observação
Os componentes do React que criarmos também devem estar na pasta src, porém você pode organizá-los criando subpastas dentro deste diretório.
Alterando o arquivo package.json
Para que possamos executar nosso projeto, precisamos alterar o arquivo package.json, que está na raíz da aplicação (não confunda com o package-lock.json).
Dentro dele, devemos alterar o campo scripts, retirando os comandos padrão e adicionando o seguinte trecho de código:
"start": "webpack serve --open --mode development",
"build": "webpack --mode production"
Se desejar o arquivo completo:
{
"name": "projeto-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve --open --hot --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.14.0",
"@babel/preset-env": "^7.14.1",
"@babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.4",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"style-loader": "^2.0.0",
"webpack": "^5.37.0",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
}
}
Criando uma pequena aplicação
Em primeiro lugar, vamos construir um pequeno “componente” que importaremos e injetaremos em nosso index.html.
Podemos criar, dentro do diretório src, um arquivo App.js (posteriormente, você pode criar subpastas e organizar seus componentes de outras formas se desejar).
Dentro dele, digite:
import React, { Component } from "react";
import ReactDOM from "react-dom";
export default class App extends React.Component {
render() {
return (
<div className="App">
<h1>Olá Mundo!</h1>
</div>
)
}
}
const item = document.getElementById('app');
ReactDOM.render(<App />, item);
Basicamente, estamos identificando a div de id igual a “app” que criamos no index.html e injetando um componente dentro dela, formado por uma div e um h1.
Também não devemos esquecer de importar o App a partir do index.js com:
import App from "./App";
Execução
A partir deste ponto, você já pode executar o projeto localmente e ativar o modo development a partir do terminal com o comando:
npm run start
E ativar o modo production com:
npm run build
Finalizando
Você pode conferir o repositório da aplicação que criamos neste link (é possível que hajam algumas diferenças nos arquivos do repositório do GitHub, necessárias para fazer o deploy da aplicação no GitHub Pages, algo que posso explicar em outro artigo).
Além disso, no momento, você pode ver a aplicação que criamos funcionando através deste outro link.
Encontrou algum erro? Tem alguma informação bacana? Comente neste artigo!
Se desejar interagir, você também pode conferir minhas redes sociais:
Referências
React, webpack e Babel: Configurando o ambiente de desenvolvimento!
