[PT-BR] Usando React com Parcel

Thales Maia — Wed, 19 Feb 2020 16:52:03 +0000

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.

Instalações

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

npm init -y

Depois, instale o Parcel e o React.

npm i -D parcel-bundler
npm i react react-dom

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

npm i -D @babel/preset-env @babel/preset-react @babel/core

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

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

npm i --D @babel/plugin-transform-runtime
npm i @babel/runtime

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"
},

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"
    ]
  }

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

[PT-BR] Unidades Relativas: rem e em

Thales Maia — Thu, 30 Jan 2020 14:56:25 +0000

Introdução

As unidades relativas de unidade (%, vh, vh, ch, rem, em e etc) são essenciais para quem quer criar um design responsivo para seu site. Neste artigo, irei focar apenas nas unidades rem e em.

O Básico

Qual a diferença dessas unidades para a mais famosa, o px?

As medidas flexíveis (ou relativas) se adaptam automaticamente com o layout, se diferenciando das medidas padrões (como o px), que são absolutas.

.primeiro-exemplo{
   width: 30px;
   height: 30px;
}

.segundo-exemplo{
   width: 3rem;
   height: 3rem;
}

.terceiro-exemplo{
   width: 3em;
   height: 3em;
}

OBS: As classes são div’s que se encontram dentro do elemento body.

Unidade rem

O que o rem faz de tão especial?

Ele pega o valor que você quer transformar (neste caso, 30px) e divide pelo valor da propriedade font-size do root (que é o seletor html no css).

html{
  font-size: 20px;
}

.segundo-exemplo{
  width: 1.5rem /*30px % 20px = 1.5*/
  height: 1.5rem
}

Unidade em

O em possui o mesmo cálculo, mas, diferentemente do rem, ele sempre pegará o valor do seu pai.

html{
  font-size: 20px;
}

body{
  font-size: 16px
}

.terceiro-exemplo{
  width: 1.8em /*30px % 16px = 1.8*/
  height: 1.8em
}

Conclusão

Com isso, a unidade rem é muito mais fácil de se lidar. De tal forma, muitos desenvolvedores preferem usar ela para tudo (inclusive eu), como: definir o tamanho do margin, do padding e entre outras coisas. Portanto, se você mudar o valor do font-size do root através de Media Queries, todo o seu layout irá se adaptar e se tornará, assim, um site responsivo.

DEV Community: Thales Maia

[PT-BR] Usando React com Parcel

Introdução

O que é Parcel?

Instalações

Como usar

Conclusão

Fontes

[PT-BR] Unidades Relativas: rem e em

Introdução

O Básico

Unidade rem

Unidade em

Conclusão

Fontes