Belajar TanStack - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar TanStack! Series ini akan membawa kalian menguasai seluruh ekosistem TanStack — TanStack Query, Table, Router, Virtual, dan Charts — dari fondasi konsep sampai production readiness. Total ada 24 episode yang tersusun dari enam fase.

Tapi sebelum menulis query pertama atau merender tabel pertama, ada sejumlah skill dasar dan perangkat lunak yang wajib kalian siapkan. Mengapa prasyarat ini penting? Karena TanStack adalah kumpulan library headless yang berjalan di atas JavaScript modern dan TypeScript. Kalau fondasi JavaScript, React, dan async programming kalian lemah, setiap episode berikutnya akan terasa berat.

Episode 0 ini adalah peta jalan kalian: kita memastikan skill dasar sudah cukup, menyiapkan Node.js dan package manager, memilih editor, lalu memverifikasi toolchain secara menyeluruh. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#JavaScript Modern ES6+ dan React Dasar

Semua library TanStack ditulis dalam TypeScript dan berjalan di atas JavaScript. Kalian wajib nyaman dengan arrow function, destructuring, spread operator, template literal, let dan const, serta module import dan export. Konsep state dan hooks di React seperti useState dan useEffect juga wajib dikuasai, karena TanStack Query dan Router hidup berdampingan dengan hooks.

Kebiasaan JavaScript modern

const ambilData = async (url) => {
  const res = await fetch(url)
  if (!res.ok) throw new Error("Gagal memuat data")
  return res.json()
}
 
const sapa = (nama) => `Halo, ${nama}!`
console.log(sapa("Arman"))

Kode di atas memakai arrow function ambilData = async (url) => ... dan template literal Halo, ${nama}. Pola async dan await inilah yang akan dipakai di hampir semua query function TanStack.

#Asynchronous Programming dan Konsep Promise

Data fetching adalah jantung TanStack Query. Kalian wajib memahami Promise, async dan await, fetch, serta setTimeout. Pahami juga status promise: pending, fulfilled, dan rejected. TanStack Query di episode 4 nanti bekerja dengan membungkus fungsi yang mengembalikan promise dan melacak statusnya.

#Modularisasi, Package Management, dan CLI

Proyek TanStack selalu dibangun di atas modul dan package manager. Kalian wajib nyaman menjalankan perintah di terminal: npm install, npm run dev, dan npm run build. Memahami Git juga sangat membantu karena hampir semua contoh kode series ini bisa dicoba langsung.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js LTS dan npm

Node.js adalah runtime yang mengeksekusi toolchain build React dan TanStack. Pastikan memakai versi LTS, bukan versi beta, agar kompatibel dengan seluruh ekosistem package. Node.js versi LTS juga membawa npm otomatis.

node --version
npm --version

Output node --version harus menampilkan versi 20 atau lebih baru. Jika belum, unduh installer dari situs resmi Node.js.

#Package Manager: npm, Yarn, atau pnpm

Kalian cukup memilih satu package manager. Series ini memakai npm karena bawaan Node.js, tapi yarn dan pnpm juga sepenuhnya kompatibel. Ke depannya, TanStack mempublikasikan semua package dengan prefix @tanstack/* di registry npm yang sama.

#Editor VS Code dan Ekstensi

VS Code adalah editor paling populer untuk ekosistem ini. Ekstensi yang sebaiknya diinstall:

• ESLint: menampilkan error lint langsung di editor.
• Prettier: merapikan format kode otomatis.
• TypeScript extension: highlighting dan intellisense bawaan VS Code.
• React DevTools di browser untuk memeriksa komponen dan query di episode 14.

#Browser Modern dan Hardware

Gunakan browser modern seperti Chrome, Firefox, atau Edge untuk development. Browser tersebut akan dipakai membuka React DevTools dan TanStack Query DevTools di episode 14. Untuk hardware, minimal 8GB RAM di Windows, macOS, atau Linux sudah cukup untuk development sehari-hari.

#Setup Environment Node.js

#Membuat Project Vite React-TypeScript

Vite adalah build tool utama seluruh series. Scaffold proyek pertama dengan template React dan TypeScript:

npm create vite@latest belajar-tanstack -- --template react-ts
cd belajar-tanstack
npm install

Perintah npm create vite@latest belajar-tanstack -- --template react-ts membuat folder belajar-tanstack dengan template React dan TypeScript. Setelah npm install, coba jalankan server development:

npm run dev

Jika halaman boilerplate muncul di http://localhost:5173, environment kalian sudah berfungsi.

#Struktur Folder Awal

Vite menghasilkan struktur yang akan kita bedah lebih dalam di episode 3:

belajar-tanstack/
├── index.html
├── package.json
├── vite.config.ts
└── src/
    ├── main.tsx
    └── App.tsx

src/main.tsx adalah pintu masuk React, dan src/App.tsx akan menjadi komponen utama yang kita modifikasi di sepanjang series.

#Verifikasi Environment

Sebelum lanjut ke episode 1, pastikan seluruh rantai tool berjalan normal:

node --version
npm --version
git --version
npm --prefix belajar-tanstack run build

Perintah npm --prefix belajar-tanstack run build menjalankan build production. Jika selesai tanpa error dan membuat folder dist, toolchain kalian berfungsi penuh. npm run build akan terus dipakai di episode 19 dan 20 untuk membahas build automation.

Satu kebiasaan yang akan kita pakai terus: npm run dev untuk development dan npm run build untuk produksi. Dari sini, kalian siap memasuki ekosistem TanStack yang sesungguhnya.

#Penutup

Di episode 0 ini kalian sudah menyiapkan pijakan untuk seluruh series: memastikan skill dasar JavaScript ES6+, React, dan async programming, menyiapkan Node.js LTS serta package manager, memilih VS Code dengan ekstensi, lalu membuat proyek Vite React-TypeScript pertama dan memverifikasinya lewat build production.

Inti yang harus dibawa pulang:

• TanStack dibangun di atas JavaScript modern dan TypeScript: kuasai ES6+ dan React hooks dulu.
• Node.js LTS, npm, dan Git adalah tiga tool wajib yang harus terinstall.
• Vite adalah build tool utama: npm create vite untuk scaffold.
• npm run dev untuk development, npm run build untuk produksi.
• VS Code dengan ekstensi ESLint, Prettier, dan TypeScript mempercepat workflow.
• Nama package TanStack memakai prefix @tanstack/* di registry npm.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan TanStack — dari kelahiran React Query di 2019, perluasan menjadi TanStack Query, hingga filosofi headless, performance, dan framework-agnostic yang menjadi fondasi Query, Table, Router, Virtual, dan Charts. Pastikan npm run dev kalian berjalan, karena perjalanan Belajar TanStack baru saja dimulai!