Parcel: Criando um projeto Reason-React

Os dois projetos queridinhos juntos, com um poderoso futuro!

Parcel e Reason, ambos novos e queridinhos na Comunidade/Twitter!

Não faz muito tempo, eu usava o create-react-app para acelerar a inicialização dos meus projetos React. Naturalmente, eu usava reason-scripts quanto eu queria escrever algo em Reason-React. Mas, mesmo entendendo as vantagens da abordagem do CRA e reason-scripts, recentemente, eu conheci o Parcel, que é um empacotador, bem minimalista, para projetos web.

Pela web, já existem vários artigos explicando as vantagens do Parcel, e como usá-lo com React, por exemplo. O que eu vou te mostrar hoje, é como criar um novo projeto, primeiramente com Reason, depois, iremos adicionar reason-react para podermos escrever componentes React.

TL;DR: Eu criei um projeto exemplo no GitHub contendo o código de exemplo desse artigo.

📦 Criando um projeto base com Parcel

Primeiro, vamos iniciar um projeto com yarn e adicionar o Parcel:

$ mkdir reason-parcel && cd reason-parcel
$ yarn init -y
$ yarn add --dev parcel-bundler

Vamos modificar nosso package.json e adicionar um script start:

{
"name": "reason-parcel",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "parcel public/index.html"
},
"devDependencies": {
"parcel-bundler": "^1.6.2"
}
}

Agora, vamos criar nosso index.html:

<html>
<body>
<script src="../src/index.js"></script>
</body>
</html>

Finalmente, vamos criar nosso src/index.js e testar tudo isso:

console.log('Hello from JavaScript!');

Para iniciar o projeto:

$ yarn start

O Resultado é:

Parcel rodando redondo! ⚽️

👽 Adicionando Reason

Beleza, até aqui, é bem semelhante ao tutorial anterior, e agora, aonde está o Reason? Vamos começar adicionando como dependência o bs-platform:

$ yarn add bs-platform

Também iremos precisar do bsconfig.json, para dizer ao BuckleScript o que fazer:

{
"name": "reason-parcel",
"refmt": 3,
"sources": "src",
"dependencies": [],
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js"
}

Nós estamos dizendo ao BuckleScript para compilar os arquivos Reason para JavaScript no mesmo diretório, com a extensão .bs.js, isso quer dizer, que o nosso src/index.re será compilado para src/index.bs.js. Desse modo, o Parcel poderá lidar com ele nativamente.

Vamos criar nosso arquivo src/index.re (vamos apenas renomar o src/index.js) e trocar seu conteúdo para:

Js.log("Hello from Reason!");

Nós também precisamos atualizar nosso public/index.html com o novo nome de arquivo, que agora, é escrito em Reason:

<script src="../src/index.re"></script>

E o resultado é:

Simples e eficaz, Reason no seu navegador! 🔥

Aeee!!1 🎉🎉🎉 Com apenas um comando, estamos rodando um projeto que está compilando de Reason para JavaScript!!1 😎🚀

👾 Adicionando reason-react

Para nosso última etapa, iremos adicionar o reason-react, para podermos escrever componentes React utilizando Reason. Primeiro, precisamos adicioná-lo como dependência:

yarn add reason-react

Também precisamos atualizar nosso bsconfig.json, para dizer ao BuckleScript que estaremos utilizando reason-react e também JSX:

{
"name": "reason-parcel",
"refmt": 3,
"sources": "src",
"bs-dependencies": ["reason-react"],
"reason": {
"react-jsx": 2
},
"dependencies": [],
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js"
}

Agora, vamos criar um componente simples em src/Greeting.re:

let component = ReasonReact.statelessComponent("Greeting");
let make = (~name, _children) => {
...component,
render: (_self) =>
<div>
(ReasonReact.stringToElement("Hello "))
<strong> (ReasonReact.stringToElement(name)) </strong>
(ReasonReact.stringToElement("!"))
</div>
};

E vamos utilizá-lo em src/index.re:

ReactDOMRe.renderToElementWithId(<Greeting name="Sebastien" />, "root");

E finalmente, vamos adicionar a div#root em nosso public/index.html para renderizar nosso componente:

<html>
<body>
<div id="root"></div>
<script src="../src/index.re"></script>
</body>
</html>

E o resultado:

Não é magia, é tecnologia! 😱

😱, estúpidamente gela…simples, não? 😎

Você está pronto para construir seu primeiro projeto e aproveitar as possibilidades do Reason, com React! Claro, essa não é a única maneira de fazer isso, mas eu gosto de como o Parcel é elegante e simples, nesse caso.

Está trabalhando com Reason? Tem alguma dica para esse fluxo de trabalho? Talvez utilizar os packagers ou plugins do Parcel, possa deixar esse fluxo mais simples.

📚 Para sua referência

⭐️ Créditos