Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pemula yang baru setup JavaScript/TypeScript dari nol
• Pembelajar yang sering kena masalah “kok di laptopku error terus?”
• Siapa pun yang ingin mulai React dengan fondasi tooling yang rapi

Apa yang akan Anda pelajari

• Cara instal Node.js yang aman di Windows/macOS/Linux
• Cara verifikasi node, npm, dan script project dengan benar
• Cara setup VS Code + browser DevTools untuk workflow harian

Mengapa topik ini penting

Di project nyata, masalah setup sering lebih bikin lama daripada masalah coding dasar. Kalau environment Anda rapi, proses belajar jadi jauh lebih cepat. Kalau setup berantakan, bab-bab berikutnya akan terasa lebih susah dari seharusnya.

Intinya: ini bukan sekadar instalasi. Ini pondasi buat semua bab setelah ini.

Konsep inti

Node.js dan npm

• Node.js menjalankan JavaScript di luar browser
• npm mengelola package dan script

Dalam praktik:

• Node.js = runtime Anda
• npm = toolbox untuk dependency + otomasi command

Pilihan package manager

• npm: default dan cukup untuk kebanyakan pemula
• pnpm: instalasi lebih cepat dan hemat storage
• yarn: umum dipakai pada beberapa tim/project

Kalau baru mulai, pakai npm dulu. Nanti kalau sudah nyaman, baru eksplor pnpm.

Setup editor penting

• Install extension TypeScript, ESLint, dan Prettier
• Aktifkan format-on-save biar kode konsisten otomatis
• Gunakan terminal terintegrasi supaya konteks folder tetap jelas

Panduan langkah demi langkah

Langkah 1 — Instal Node.js LTS

• Unduh versi LTS dari website resmi Node.js
• Selesaikan instalasi dengan opsi default
• Jangan dulu utak-atik konfigurasi aneh; yang penting stabil dulu

Langkah 2 — Verifikasi instalasi

Jalankan:

node -v
npm -v

Kalau dua command ini menampilkan versi, Anda aman lanjut. Kalau salah satunya gagal, bereskan dulu sebelum lanjut ke bab berikutnya.

Langkah 3 — Buat folder project pertama

Jalankan:

mkdir hello-toolchain
cd hello-toolchain
npm init -y

Langkah 4 — Tambahkan script penting

Di package.json, tambahkan script yang benar-benar dipakai (dev, lint, format).

Target bab ini: Anda bisa jalanin minimal satu script tanpa bingung konteks folder.

Contoh praktis

Contoh 1 — npm script sederhana

{
  "scripts": {
    "hello": "node -e \"console.log('Toolchain ready')\""
  }
}

Jalankan:

npm run hello

Expected output:

Toolchain ready

Contoh 2 — Kebiasaan workflow di VS Code

• Buka terminal dari VS Code
• Jalankan script dari root project yang benar
• Pertahankan satu konteks terminal per project agar tidak salah path

Real case:

• Banyak error npm terjadi cuma karena command dijalankan di folder yang salah.

Kesalahan umum dan cara menghindarinya

• Instal banyak versi Node terlalu cepat -> mulai dari satu LTS dulu
• Menjalankan command di folder salah -> selalu cek direktori aktif
• Mencampur npm dan pnpm dalam satu project -> pilih satu package manager per project
• Install tools terlalu banyak di awal -> mulai minimal, lalu tambah seperlunya

Mini Project

• Buat “Hello Toolchain”:
• inisialisasi project,
• tambah dan jalankan satu custom script,
• tulis SETUP_NOTES.md singkat tentang apa yang diinstal dan alasannya.

Latihan cepat

• Verifikasi environment dengan node -v dan npm -v
• Tambahkan dan jalankan satu script dari package.json
• Aktifkan format-on-save di VS Code
• Jelaskan dalam satu kalimat: kapan Anda pilih npm vs pnpm?

Ringkasan utama

• Setup bersih menghilangkan friksi tersembunyi saat belajar
• Node + npm adalah fondasi utama workflow JS/TS/React
• Konsisten lebih penting daripada setup yang terlalu kompleks

Langkah berikutnya

Lanjut ke [03. Fondasi TypeScript].