Bagi banyak web developer, JavaScript sudah menjadi bahasa sehari-hari. Namun, sering kali JavaScript bisa terasa rawan bug karena dinamis dan longgar dalam penulisan tipe data. Untuk mengatasi hal ini, lahirlah ReScript, bahasa pemrograman modern yang bisa di-compile langsung ke JavaScript dengan sintaks yang simpel dan sistem tipe yang kuat.

Panduan ini ditujukan untuk pemula yang ingin cepat memahami dasar-dasar ReScript tanpa harus membaca dokumentasi yang terlalu teknis.

baca juga:Tips Praktis Menggunakan YAML dalam Proyek Developer

---

1. Apa Itu ReScript?

ReScript adalah bahasa pemrograman yang awalnya merupakan evolusi dari ReasonML (turunan OCaml), kemudian berkembang menjadi bahasa mandiri. Keunggulannya adalah:

• Kompilasi langsung ke JavaScript yang bersih dan cepat.
• Static typing untuk mencegah bug sebelum runtime.
• Sintaks yang sederhana dan mirip JavaScript.
• Integrasi mulus dengan React dan ekosistem web modern.

Dengan ReScript, developer bisa menulis kode yang ringkas, aman, dan performa tinggi tanpa harus meninggalkan dunia JavaScript sepenuhnya.

---

2. Instalasi ReScript

Langkah pertama untuk belajar ReScript adalah menginstalnya:

1. Buat folder proyek baru, lalu masuk ke dalamnya.
2. Jalankan perintah berikut:

npm init -y
npm install rescript

3. Tambahkan script build pada package.json:

"scripts": {
  "build": "rescript build -with-deps -clean-world",
  "start": "rescript build -with-deps -w"
}

4. Buat file konfigurasi bsconfig.json:

{
  "name": "my-rescript-app",
  "version": "0.1.0",
  "sources": [
    {
      "dir": "src",
      "subdirs": true
    }
  ]
}

5. Buat folder src/ lalu buat file Demo.res di dalamnya.

---

3. Sintaks Dasar ReScript

Hello World

let message = "Halo dunia!"
Js.log(message)

Ketika dikompilasi, akan menjadi:

var message = "Halo dunia!";
console.log(message);

---

Variabel dan Fungsi

let add = (a, b) => a + b
let result = add(3, 5)
Js.log(result) // Output: 8

Fungsi dalam ReScript mirip dengan arrow function di JavaScript, tetapi lebih ketat dalam tipe data.

---

Tipe Data

ReScript menggunakan sistem tipe statis, contohnya:

let name: string = "Andi"
let age: int = 25
let isActive: bool = true

Jika kamu mencoba memberi nilai yang tidak sesuai, compiler langsung memberi peringatan sebelum program dijalankan.

---

Conditional dan Loop

let checkAge = age =>
  if age >= 18 {
    "Dewasa"
  } else {
    "Anak-anak"
  }

Js.log(checkAge(20)) // Output: Dewasa

Loop:

for i in 1 to 5 {
  Js.log(i)
}

---

4. ReScript dan React

Salah satu alasan developer melirik ReScript adalah integrasinya dengan React. Kamu bisa membuat komponen React dengan sintaks yang lebih aman:

@react.component
let make = (~name) => {
  <div> {React.string("Halo, " ++ name)} </div>
}

Kelebihannya adalah error lebih mudah terdeteksi dibandingkan menulis React langsung dengan JavaScript.

baca juga:Mahasiswa Teknokrat Juara KTI dan Best Expodi PIMPI 2025 IPB University

---

5. Tips Belajar Cepat ReScript

1. Mulai dari proyek kecil
   Coba buat aplikasi sederhana seperti kalkulator atau to-do list agar terbiasa dengan sintaks dan compiler.
2. Pelajari cara compiler bekerja
   Lihat hasil kode ReScript setelah dikompilasi ke JavaScript. Ini akan membantu memahami bagaimana ReScript mengoptimalkan kodenya.
3. Gunakan dokumentasi resmi
   Situs rescript-lang.org punya panduan cepat dengan contoh nyata.
4. Gabungkan dengan React
   Jika sudah nyaman dengan dasar, coba integrasikan ke proyek React. Di sinilah kekuatan ReScript benar-benar terasa.
5. Latihan rutin
   Semakin sering mencoba, semakin cepat terbiasa. Mulailah dengan menulis ulang kode JavaScript kecil ke dalam ReScript.

---

6. Proyek Latihan untuk Pemula

• Hello World Website → tampilkan teks sederhana.
• To-Do List → buat daftar tugas dengan penambahan dan penghapusan item.
• Kalkulator sederhana → latihan fungsi dan kondisi.
• Form Input → validasi input dengan type system ReScript.

penulis:mudho firudin