Belajar ReactJS - Modern Tooling & Build Automation

#Pendahuluan

Toolchain yang baik membuat tim produktif; toolchain yang buruk menguras waktu tiap hari. Episode 19 membahas perangkat pengembangan React modern secara menyeluruh — dari bundler, code quality, sampai TypeScript dan optimasi build.

Kita akan melihat kenapa Vite menggantikan Create React App sebagai pilihan utama, merapikan kode dengan ESLint dan Prettier, menambahkan TypeScript untuk keamanan tipe, dan mengoptimalkan bundle production agar aplikasi rilis lebih cepat dan kecil.

#Vite, Create React App, dan Bundler Modern

#Kenapa Vite

Vite menjadi standar karena dua alasan: dev server yang instan lewat ESM native dan build production berbasis Rollup yang cepat. Create React App masih bekerja, tapi pengembangannya lambat dan kini tidak lagi direkomendasikan tim React untuk proyek baru.

npm create vite@latest aplikasi-ts -- --template react-ts
cd aplikasi-ts
npm install
npm run dev

--template react-ts langsung membuat proyek React dengan TypeScript terkonfigurasi. Dev server Vite menyajikan modul asli tanpa menggabungkan dulu, sehingga bahkan proyek besar terasa instan saat memulai.

#ESLint, Prettier, dan Code Quality Tools

#Menyatukan ESLint dan Prettier

ESLint menangkap error dan pola buruk; Prettier menyeragamkan format. Di template Vite, file eslint.config.js sudah ada. Tambahkan Prettier jika belum:

npm install -D prettier eslint-config-prettier

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80
}

eslint-config-prettier mematikan aturan ESLint yang bertabrakan dengan Prettier, sehingga keduanya tidak berkelahi. printWidth: 80 membuat baris pendek yang nyaman dibaca.

#Husky: Lint Otomatis Sebelum Commit

Untuk menjamin kualitas, jalankan lint dan test otomatis sebelum setiap commit dengan Husky dan lint-staged:

npm install -D husky lint-staged
npx husky init

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

lint-staged menjalankan eslint --fix dan prettier --write hanya untuk file yang berubah. Kode yang tidak lolos lint tidak akan pernah masuk ke history git — kualitas dijaga otomatis, bukan oleh kemauan.

#TypeScript Integration untuk React

#Kenapa TypeScript

TypeScript menambahkan tipe statis ke JavaScript. Di React, artinya: props yang salah langsung tertangkap di compile time, refactor aman, dan autocomplete di editor jauh lebih baik.

Props ber-tipe

type ProfilProps = {
  nama: string
  umur: number
  aktif?: boolean
}
 
function Profil({ nama, umur, aktif = true }: ProfilProps) {
  return (
    <div>
      <h2>{nama}</h2>
      <p>{umur} tahun, {aktif ? "aktif" : "nonaktif"}</p>
    </div>
  )
}

type ProfilProps mendefinisikan bentuk props. Passing umur="tiga puluh" akan ditolak TypeScript karena umur harus number. File .tsx memungkinkan JSX di dalam TypeScript.

#Typecheck di CI

Tambahkan script typecheck dan jalankan di CI bersama lint:

{
  "scripts": {
    "typecheck": "tsc --noEmit"
  }
}

tsc --noEmit memeriksa tipe tanpa menghasilkan file. Gabungkan npm run typecheck dan npm run lint di pipeline CI agar kode yang tidak lolos tidak pernah mencapai produksi.

#Build Optimization dan Production Bundle

#Mengukur dan Memecah Bundle

Episode 14 sudah memperkenalkan bundle analysis dan manualChunks. Saatnya menyatukan semuanya ke dalam strategi build:

Konfigurasi build Vite

export default {
  build: {
    target: "es2020",
    sourcemap: false,
    minify: "terser",
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
        },
      },
    },
  },
}

sourcemap: false mengecilkan bundle produksi (sourcemap cukup saat debugging), dan manualChunks memisahkan React agar browser bisa meng-cache-nya terpisah. Optimasi ini langsung terlihat di ukuran file dist.

#Build Production yang Benar

Uji build production sebelum rilis — build bisa gagal di hal yang tidak terlihat di dev:

npm run build
npm run preview

npm run preview menyajikan hasil build dist secara lokal, meniru kondisi produksi. Selalu periksa npm run build hijau sebelum deploy — ini gerbang terakhir kualitas.

#Penutup

Episode 19 menyatukan toolchain modern: Vite sebagai bundler cepat, ESLint dan Prettier untuk code quality dengan Husky sebagai penjaga commit, TypeScript untuk keamanan tipe, dan strategi build yang menghasilkan bundle kecil.

Inti yang harus dibawa pulang:

• Vite adalah pilihan utama: dev server instan dan build Rollup yang cepat.
• ESLint menangkap error, Prettier menyeragamkan format, tanpa konflik.
• Husky dan lint-staged menjalankan kualitas otomatis sebelum commit.
• TypeScript menangkap error props di compile time, bukan di runtime.
• tsc --noEmit sebagai gerbang typecheck di CI.
• Ukur bundle dan pecah vendor untuk build yang kecil dan cepat.

Di episode 20 selanjutnya kita akan membahas deployment & hosting — SSG dan deployment SPA, opsi hosting seperti Vercel dan Netlify, CI/CD untuk aplikasi React, serta environment variables dan konfigurasi build-time. Saatnya aplikasi kalian tampil untuk dunia.