Aprenda React - Estrutura simples de um projeto React com Webpack 4 (+ CSS)

July 24, 2018

Olá pessoal, tudo bem? Neste post, expliquei o que era o Webpack, para que ele servia e como funcionava. Entretanto, a última versão do Webpack, a versão 4, mudou algumas coisas, de forma que aquele código talvez não funcione mais tão bem. Desta forma, decidi criar este post para poder mostrar um passo a passo de como podemos iniciar um projeto React usando Webpack 4.

Se você já leu aquele post, não se preocupe muito em ter perdido seu tempo, pois os conceitos principais do React se mantiveram os mesmos. Apenas os passos necessários para a criação da estrutura do projeto são diferentes.

Primeiro, vamos criar a pasta com seu projeto, e dentro dela, rodar o comando npm init -y:

mkdir webpack-4-react
cd webpack-4-react/
npm init -y[/bash]

A chave -y apenas responde “yes” para todas aquelas perguntas básicas que o npm faz ao iniciar o seu projeto.

Instalação do Webpack

Vamos agora instalar o Webpack, para que possamos utilizá-lo em nosso projeto. Eu tenho utilizado o yarn como gerenciador de pacotes, mas o npm funciona tão bem quanto. Em resumo, se você usa npm ao invés de yarn, basta trocar todas as chamadas para yarn add x por npm i x, e quando for para adicionar como dependência de desenvolvimento, troque yarn add x -D por npm i x -D. Continuando então, primeiro, vamos adicionar o Webpack como uma dependência de desenvolvimento em nosso projeto:

yarn add webpack webpack-cli webpack-dev-server -D

Isto vai instalar os pacotes do Webpack para desenvolvimento, além do servidor de desenvolvimento local, que poderemos usar para servir nossa aplicação e testá-la localmente. Isto também vai atualizar o arquivo package.json, cadastrando estes pacotes como dependências de desenvolvimento.

Criação dos arquivos

Agora, vamos criar um arquivo HTML básico com uma script tag que apontará para o arquivo main.js. Este arquivo HTML, index.html, ficará na pasta dist, e o arquivo main.js ficará localizado na mesma pasta, e será gerado pelo Webpack, contendo o código de nossa aplicação em React.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>React and Webpack4</title>
    </head>
    <body>
        <section id="index"></section>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

Devemos criar então uma pasta src, e dentro dela o arquivo index.js. Sua estrutura será o código React mais básico possível:

import React from "react";
import ReactDOM from "react-dom";

const Index = () => {
  return <div>Hello React!</div>
};

ReactDOM.render(<Index />, document.getElementById("index"));

Agora, para que tudo isso funcione, precisamos adicionar os scripts de inicialização no nosso arquivo package.json. Estes scripts farão com que o Webpack faça sua mágica, transformando o nosso código de acordo com sua configuração. O primeiro script é este:

"start": "webpack-dev-server --mode development --open",

Este script servirá para te auxiliar no desenvolvimento local. Ele utilizará o webpack-dev-server para servir seus arquivos localmente e irá gerar o arquivo main.js que linkamos em nosso arquivo HTML que criamos no passo anterior. O --open ao final serve para que ele já abra o seu browser no local onde está sendo servida sua aplicação. O outro script é este:

"build": "webpack --mode production"

Com este script, o Webpack irá executar o que está definido em sua configuração, além de algumas ações adicionais visando o funcionamento de sua aplicação em produção, como minificar o Javascript, por exemplo.

Adicione estes dois scripts dentro da chave scripts. Seu arquivo package.json deve ficar desta forma:

{
  "name": "webpack-4-react-boilerplate",
  "version": "1.0.0",
  "author": "",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

Configuração do Webpack

Bem, agora, se você tentar rodar estes comando com yarn run start ou yarn run build, eles não irão funcionar. Isto porque, para que o Webpack entenda o código React que criamos, ele precisa de algumas ferramentas para transpilar, ou seja, transformar, o código React em código Javascript que possa ser entendido por qualquer navegador. Vamos lá então. Primeiro, instalar os pacotes essenciais do React, React e React DOM.

yarn add react react-dom

Depois disso, instalamos o Babel e alguns loaders para fazer a transpilação do nosso código como dependências de desenvolvimento:

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

Depois desses comandos, seu arquivo package.json deve se parecer com o seguinte:

{
  "name": "webpack-4-react-boilerplate",
  "version": "1.0.0",
  "author": "",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  }
}

Agora, precisamos criar um arquivo de configuração do Webpack, o arquivo webpack.config.js. No primeiro post sobre Webpack eu já falei sobre ele, então aqui serei mais breve. O seu arquivo deve ficar assim:

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

É o arquivo de configuração para Webpack mais simples possível. Uma breve explanação, em entry definimos o arquivo de entrada da nossa aplicação, em output ficam as definições do arquivo Javascript que será gerado e em devServer definimos a pasta a partir da qual o servidor de desenvolvimento irá servir os arquivos. Em module são definidas regras gerais sobre a aplicação, como neste caso, o que será usado para transpilar determinado tipo de arquivo.

Além do arquivo de configuração do Webpack, como definimos o babel-loader para transpilar os arquivos .js, precisamos criar o arquivo de configuração do Babel, que indicará quais os loaders devem ser usados para transpilar nosso código. Este arquivo, assim como o de configuração do Webpack, deve ficar na raiz do seu projeto, e deve ser nomeado .babelrc

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

Este, como pode ver, é ainda mais simples que o do Webpack.

Agora, podemos finalmente utilizar o comando para iniciar o servidor de desenvolvimento:

yarn run start

Se tudo deu certo, felizmente você verá o seu navegador abrindo e na tela, seu primeiro componente React, com a mensagem “Hello React!“. Caso você tenha removido a opção --open do script de inicialização, você pode acessar o endereço padrão utilizado pelo webpack-dev-server, que é o http://localhost:8080/

Adicionando CSS

Para adicionar CSS, precisamos dar mais alguns passos. Para transpilar os arquivos CSS, vamos precisar de mais loaders. Vamos aproveitar para utilizar SASS e termos mais algumas funcionalidades legais em nossos arquivos de estilo. Vamos instalar alguns pacotes para isso: o css-loader, o style-loader, o sass-loader e, por fim, o node-sass. Todos eles devem ser adicionados como dependências de desenvolvimento:

yarn add css-loader style-loader sass-loader node-sass -D

Agora, vamos adicionar mais uma entrada na configuração do webpack. Esta entrada dirá ao webpack o que ele deve fazer com os arquivos .scss. Seu arquivo webpack.config.js deve agora ficar assim:

module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "main.js"
  },
  devServer: {
    contentBase: "./dist"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      }
    ]
  }
};

Agora, você deve criar o seu arquivo principal. Dentro de src, você pode criar a pasta styles, para organizar melhor todos os seus arquivos de estilo. A partir dele, você poderá posteriormente importar outros arquivos específicos. Então, vamos lá, este é o arquivo /src/styles/main.scss:

p {
    background-color: teal;
}

Agora, dentro do seu arquivo, basta incluir uma chamada para import "./styles/main.scss";. Seu arquivo index.js ficará então assim:

import React from "react";
import ReactDOM from "react-dom";

import "./styles/main.scss";

const Index = () => {
  return (
    <div>
      Hello React!
    </div>
  );
};

ReactDOM.render(<Index />, document.getElementById("index"));

Agora, ao recarregar a página, você poderá ver que a cor de fundo do parágrafo estará diferente, conforme definimos no arquivo /src/styles/main.scss.

Como mencionei, você pode importar outros arquivos dentro deste principal. Uma coisa que gosto de fazer, para exemplificar, é criar uma pasta components. Dentro desta pasta crio então, por exemplo, um arquivo _Component.scss. Vamos criá-lo então:/src/styles/components/_Component.scss e incluir um pouco de CSS bem simples:

p {
    color: white;
}

Agora, no arquivo principal main.scss, basta importá-lo da seguinte forma:

@import "components/Component";

p {
    background-color: teal;
}

O ponto chave é que o arquivo .scss do componente deve ter seu nome iniciado em _.

Assim, ao reabrir sua aplicação no navegador, verá que agora o elemento

terá o estilo que definimos no arquivo _Component.scss

E desta forma, temos uma configuração simples mas bem completa de um projeto com React, Webpack 4 e SASS.

Se quiserem ver o código final completo, podem acessar o repositório no Github clicando aqui.

Espero que esta configuração seja útil, e se tiverem qualquer dúvida é só deixar nos comentários.

Abraços

Felipe Galvao

Instalação do Webpack

Criação dos arquivos

Configuração do Webpack

Adicionando CSS