ReasonReact, Part 1: Development Setup
Tags: react, reason, reasonreact
Published: 2020-10-10 10:15:18

Beberapa hari yang lalu saya membaca sebuah artikel tentang sebuah bahasa pemrograman "baru", lebih tepatnya sih nama baru untuk sebuah project lama. Nama dari bahasa baru ini adalah [ReScript](https://rescript-lang.org/).

Project ini sebelumnya bernama BuckleScript yang [dirilis oleh Bloomberg](https://www.bloomberg.com/company/press/open-source-at-bloomberg-introducing-bucklescript/) pada pertengahan tahun 2016 lalu. Bucklescript ini merupakan compiler yang menghasilkan kode javascript dari sumber OCaml.

Pada tahun 2016 juga Facebook merilis [ReasonML](https://reasonml.github.io/), sebuah syntax baru untuk OCaml yang didesain agar terlihat familiar bagi developer javascript. Kemudian di tahun berikutnya lahir lah [ReasonReact](https://reasonml.github.io/reason-react/), binding untuk React dalam bahasa ReasonML.

Setelah membaca artikel tadi, akhirnya saya pun mencoba ReasonReact. Cukup lama juga keinginan untuk mencoba ini hanya sampai sebatas niat yang tidak pernah terealisasikan 😄.

### Apa keuntungan menggunakan ReasonReact dibandingkan React.js?

Simpelnya adalah eliminasi bugs. Contoh realnya adalah Facebook yang [mengurangi bug dengan sangat drastis](https://reasonml.github.io/blog/2017/09/08/messenger-50-reason) pada messenger.com setelah migrasi ke Reason.

Kok bisa?

Karena [_powerful type system_](https://reasonml.github.io/docs/en/what-and-why#why-use-reason) dapat meminimalisir kesalahan yang mungkin dibuat oleh developer. Hal yang sama sebenarnya kenapa sekarang untuk project dengan skala menengah ke atas banyak yang akan memilih typescript dibandingkan plain javascript. Hanya saja Reason lebih baik dibandingkan Typescript dalam hal _type system_-nya.

## Inisiasi ReasonReact

Untuk quick start bisa menggunakan command yang tertera pada dokumentasinya ini

![quick start](https://dev-to-uploads.s3.amazonaws.com/i/bo3rbbzcubdc6r7lw4mk.png)

Tapi saya merasa kalau setup yang diberikan pada starter template agak kurang. Karena:

1. Ada dua command yang harus dijalankan di dua sesi terminal: `npm start` dan `npm run server`.
2. Tool yang dipakai untuk hot reload menggunakan cara yang sudah deprecated.
   ![deprecation](https://dev-to-uploads.s3.amazonaws.com/i/a15fyhmwkddooz7wcsgf.png)
3. Untuk tool seperti PostCSS harus ditambahkan pada pipeline terpisah.

**_Bagian selanjutnya dari artikel ini tidak terlalu penting untuk kamu baca 😁. Kamu bisa lanjut dengan setup standard, atau menggunakan template yang sudah saya buatkan di repositori berikut ini:_**

{% github armedi/reason-react-snowpack %}

Hasil akhir dari percobaan pertama saya menggunakan ReasonReact bisa dilihat di repositori berikut pada branch `reason-react`

{% github armedi/kuy.app#reason-react no-readme %}

---

## Setup Snowpack

Nah selanjutnya dari skeleton yang sudah ada kita akan buat agar bisa menutupi tiga hal yang saya sebutkan diatas.

Tool yang akan dipakai adalah [Snowpack](https://www.snowpack.dev/). Untuk penggunaan development, Snowpack lebih cepat dan ringan dibanding Webpack atau Rollup karena proses yang _unbundled_ (source files dan dependencies di-_serve_ tanpa di-_bundle_)

Langkah pertama hapus file dan package yang tidak diperlukan.

```sh
$ npm uninstall moduleserve

$ rm -rf src watcher.js UNUSED_webpack.config.js index.html indexProduction.html
```

Kemudian install package-package berikut

```sh
$ npm install --save-dev snowpack @snowpack/plugin-react-refresh
```

Untuk starting point halaman web, buat file index.html pada folder public

```sh
$ mkdir -p public

$ touch public/index.html

```

lalu isi dengan

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ReasonReact</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/__src__/index.js"></script>
  </body>
</html>
```

Setelah itu buat file konfigurasi snowpack

```sh
$ touch snowpack.config.js
```

kemudian isi dengan

```js
module.exports = {
  mount: {
    public: '/',
    src: '/__src__',
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    [
      '@snowpack/plugin-run-script',
      { cmd: 'bsb -make-world', watch: '$1 -w -ws _' },
    ],
  ],
};
```

Selanjutnya buat file src/Index.re sebagai entry point untuk kode Reason

```sh
$ mkdir -p src

$ touch src/Index.re
```

isi dengan

```reason
[@bs.val] external document: Js.t({..}) = "document";

ReactDOMRe.render(
  React.string("Hello ReasonReact!"),
  document##getElementById("root"),
);
```

Terakhir, update package.json dan bsconfig.json

```json
// package.json
{
  // ...
  "scripts": {
    "start": "snowpack dev"
    // ...
  }
  // ...
}
```

```json
// bsconfig.json
{
  // ...
  "package-specs": [
    {
      "module": "es6",
      "in-source": true
    }
  ]
  // ...
}
```

Oke, sekarang development environment ReasonReact kita sudah siap digunakan

```sh
$ npm start
```