image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image
Alessandro Araújo
Alessandro Araújo13/05/2021 14:15
Compartilhe

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).

image

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.

image

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.

image

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:

Linkedin

Instagram

Referências

React, webpack e Babel: Configurando o ambiente de desenvolvimento!

ERROR in ./node_modules/react-toastify/dist/ReactToastify.css Module parse failed: Unexpected token (1:0)

React não carrega imagens locais

Compartilhe
Comentários (2)

KC

Karine Costa - 13/10/2021 11:25

Incrível!

Obrigada.

Isaque Almeida
Isaque Almeida - 16/07/2021 09:50

Cara, sério, vim te agradecer por ter feito esse artigo. Foi o único que eu encontrei que fez o meu servidor local funcionar. Estava dando erro e não tinha conseguido colocar para rodar no browser através da instalação do npm i -D webpack-dev-server . Através da tua explicação consegui fazer com que funcionasse. Vlw mesmo!!


  1. Fui no package-json, abaixo de scripts, aonde tinha "start:dev" : "webpack-dev-server" mudei para "start": "webpack serve --open --hot --mode development" como você mostrou no artigo e deu certo.