Crie aplicações React 5x mais rápido com Bun

Lançado o beta de Bun, o javascript runtime que promete fazer Node e Deno comerem poeira.

É sério, você não vai acreditar na velocidade.

Bun é um novo JavaScript runtime com bundler nativo. Transpile, instale e rode projetos JavaScript e TypeScript — tudo diretamente no Bun.

Eu sei que o título desse artigo te chamou a atenção, para a velocidade da criação dos projetos, mas saiba que bun é rápido para todo o restante. Extremamente rápido para instalar pacotes npm, para rodar em modo de desenvolvimento, para buildar o seu projeto, e assim por diante... Vai por mim, você vai estranhar a velocidade :)

Quão mais rápido o Bun é?

Bem, fique com o print abaixo retirado do site oficial com uma pequena comparação:

Recomendo fortemente você tirar 20 minutos do seu dia, e contemplar essa maravilha.

Site oficial para aprender um pouco mais: https://bun.sh/

Lembrando que ainda encontra-se na versão beta.

---

Instale o bun

Primeiro certifique-se de que você já não o tenha instalado. Abra o terminal de sua máquina e digite:

bun -v

Se algo como "command not found" retornar, é porque ainda não o tem instalado. Então digite:

curl https://bun.sh/install | bash

Crie seu app React

Agora rode o seguinte comando para criar um app React.

bun create react [seu-app]

Isso irá criar um novo diretório com o nome escolhido para seu app. Para iniciar o app, rode então os seguintes comandos:

cd seu-app
bun dev

Configurando "bun build" para gerar o bundle de produção

Por padrão, o comando bun create react não instala o react-scripts, portanto, você deve instalar esse pacote manualmente com o seguinte comando:

bun a react-scripts

Então rode o seguinte comando para realizar o build de produção

bun react-scripts build

Após ter executado, o seu build de produção estará disponível dentro da pasta /build dentro do diretório do seu app.

Adicionando scripts ao seu package.json

Para facilitar nossa vida, vamos configurar alias para rodar os seguintes scripts. Adicione o seguinte código ao seu package.json

{
  "scripts": {
    "start": "bun dev",
    "build": "react-scripts build"
  }
}

Rodando o projeto

Podemos rodar o seguinte comando para rodar nosso app (configurado acima):

bun run start

ou continuar utilizando o

bun dev

Essa escolha eu deixo pra você ;)

Gerando build de produção

bun run build

Adicione pacotes npm ao seu app

Se você está acostumado com npm, deve conhecer o comando npm install [pacote]. Caso você já era adepto ao yarn, com certeza utilizava o yarn add [pacote]

Agora com o bun, você usará o seguinte comando, para adicionar novos pacotes ao seu projeto:

bun a [pacote]

Usando TypeScript no projeto

Por padrão bun cria aplicações React com javascript, porém nos podemos facilmente utilizar TypeScript alterando a extensão dos arquivos .jsx para .tsx