DEV Community

Thales Maia
Thales Maia

Posted on

[PT-BR] Usando React com Parcel

Introdução

Neste artigo, irei explicar como usar a biblioteca/framework React através do Parcel.

O que é Parcel?

O Parcel é um module bundler que não precisa de configuração para seu funcionamento (diferentemente do webpack, por exemplo). E também, possui um tempo de empacotamento muito mais rápido, utilizando-se de um sistema de cache.

Imagem demonstrando o benchmark do Parcel

Instalações

Primeiramente, é necessário criar uma pasta e inicializar o NPM (ou o Yarn se preferir).

npm init -y
Enter fullscreen mode Exit fullscreen mode

Depois, instale o Parcel e o React.

npm i -D parcel-bundler
npm i react react-dom
Enter fullscreen mode Exit fullscreen mode

Logo após, instale também alguns presets do Babel.

npm i -D @babel/preset-env @babel/preset-react @babel/core
Enter fullscreen mode Exit fullscreen mode

Se não for usar o Hooks e não quiser usar o bind nas classes da sua aplicação, é necessário instalar o seguinte plugin, como diz a documentação.

npm i -D @babel/plugin-proposal-class-properties
Enter fullscreen mode Exit fullscreen mode

Caso queira usar async/await, instale os seguintes pacotes:

npm i --D @babel/plugin-transform-runtime
npm i @babel/runtime
Enter fullscreen mode Exit fullscreen mode

Com isso, já é possível construir sua aplicação React.

Como usar

No package.json adicione na parte de scripts o diretório do arquivo de entrada, geralmente um html:

"scripts": {
  "dev": "parcel ./src/index.html",
  "build": "parcel build ./src/index.html"
},
Enter fullscreen mode Exit fullscreen mode

Para configurar o Babel, inclua também no package.json (se preferir, crie e utilize um arquivo próprio do Babel):

  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-transform-runtime"
    ]
  }
Enter fullscreen mode Exit fullscreen mode

E pronto, agora é só mandar "npm run dev" no seu prompt para rodar sua aplicação em modo de desenvolvedor ou "npm run build" para colocá-lo em modo de produção.

Conclusão

Deste modo, a utilização do React com o Parcel se torna uma boa alternativa para quem quiser ter um desenvolvimento muito rápido com um projeto mais leve e com mais controle, o que não ocorre com o create-react-app. Uma solução muito mais pesada, que se utiliza do webpack, e com diversos pacotes desnecessários que são instalados automaticamente.

Fontes

Top comments (0)