Web Dev Drops

React — Setup mínimo com Webpack

📅 28/08/2017 • 🕙3 min. de leitura

Neste post vou mostrar um setup mínimo de Webpack para começar a trabalhar com React.

1 M4ahYjPeHM2cpkjGwkeGyg

tl;dr
O setup final, com um componente de exemplo, pode ser encontrado aqui: https://github.com/doug2k1/react-minimal-setup

E o create-react-app?

create-react-app certamente é a forma mais fácil de começar a desenvolver com React, mas atrás daqueles scripts amigáveis existe um setup bem complexo, com várias dependências e configurações. Cedo ou tarde pode ser que você tenha que ejetar dele, customizar ou construir seu próprio setup. Assim, é importante entender o que cada dependência e opção de configuração faz. E, pra mim, a melhor forma de entender é com pequenos passos. Vamos dar o primeiro aqui.

OBS: Estou assumindo que você já tem Node.js e NPM ou Yarn instalado.

Dependências

As dependências do nossa aplicação são separadas em dois grupos no arquivo package.json: dependencies, são dependências necessárias para a execução pelo usuário final, e devDependencies, que são necessárias apenas para o desenvolvimento.

Antes de adicionar as dependências, precisamos inicializar o arquivo package.json rodando: npm init -y.

As únicas dependências (não dev) que precisamos são:

  • react: obviamente ;-)
  • react-dom: responsável por renderizar nossos componentes na página

Elas devem ser instaladas com a flag --save ou -S :

npm i -S react react-dom

E as dependências de dev:

  • webpack: vai empacotar nosso JS (e possivelmente outros tipos de arquivos), incluíndo código da aplicação, dependências e tudo necessário para ser executada
  • babel-core: core do Babel, que vai transformar nosso código com JSX e funcionalidades do ES2015 em sintaxe ES5, que funciona em praticamente qualquer navegador
  • babel-loader: loader que conecta o Babel ao Webpack (faz as transformações antes de passar o código para o Webpack empacotar)
  • babel-preset-react: plugin do Babel para transformar JSX
  • babel-preset-es2015: plugin do Babel para transformar sintaxe ES2015

Estas são instaladas com --save-dev ou -D:

npm i -D webpack babel-core babel-loader babel-preset-react babel-preset-es2015

Sobre o ES2015 (ES6)

Teoricamente poderíamos economizar uma dependência e não usar ES2015, mas para criar componentes React sem ele precisaríamos incluir outra dependência: create-react-class. Estaríamos trocando uma dependência por outra e perdendo as maravilhas do ES2015. Não vale a pena, a não ser que tenha uma razão bem específica para fazer isso.

Configuração

Webpack

Nossa config de Webpack (webpack.config.js) é simples assim:

const path = require('path')

module.exports = {
  entry: './src/index.js',

  output: {
    path: path.resolve('dist'),
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
}

Ela tem um entrypoint (ponto de partida da execução da nossa aplicação), um output (onde será salvo o JS empacotado, que será executado no navegador) e um loader.

Nosso arquivo de entrada usa react-dom para renderizar o componente App no corpo da página:

import React from 'react'  
import ReactDOM from 'react-dom'  
import App from './App'

ReactDOM.render(<App />, document.getElementById('app'))

Babel

Os loaders do Babel vão ler os arquivos JS e converter os códigos JSX e ES2015 para ES5. Precisamos habilitar estas duas transformações no arquivo de configuração do Babel (.babelrc):

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

Com este setup você pode executar webpack para gerar o arquivos bundle.js, ou webpack -w para ficar escutando alterações nos arquivos e regenerar o bundle.js sempre que houver alteração.

Para ver o aplicativo rodando no navegador, precisamos de um index.html incluindo o JS final:

<!doctype html>  
<html>  
<head>  
  <title>React</title>  
</head>  
<body>  
  <div id="app"></div>  
  <script src="dist/bundle.js"></script>  
</body>  
</html>

Você pode conferir o resultado final aqui: https://github.com/doug2k1/react-minimal-setup

[]’s

Compartilhe!


Douglas Matoso

Por Douglas Matoso, desenvolvedor frontend.


Comentários



Feito com ❤️, ☕️, Gatsby e Netlify. | Política de Privacidade