Belajar ReactJS - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar ReactJS! Series ini akan membawa kalian dari nol sampai siap produksi menggunakan React — library JavaScript paling populer untuk membangun user interface yang interaktif. Total ada 24 episode yang tersusun dari enam fase, dan semuanya akan kita jalani secara bertahap.

Tapi sebelum menulis komponen pertama, ada sejumlah skill dasar dan perangkat lunak yang wajib kalian siapkan. Mengapa prasyarat ini penting? Karena React bukan framework — dia adalah library yang bekerja di atas JavaScript. Semua sintaks JSX dan hooks adalah JavaScript murni. Kalau fondasi JavaScript 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 tooling, lalu membuat proyek React pertama dengan Vite. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#HTML, CSS, dan JavaScript Modern ES6+

React merender HTML di browser, jadi kalian wajib paham struktur elemen HTML seperti div, section, button, dan input, plus cara menata layout dengan CSS. Yang lebih penting adalah JavaScript modern ES6+: arrow function, destructuring, spread operator, template literal, let dan const, serta class.

Kebiasaan JavaScript modern

const nama = "Arman"
const sapa = (orang) => `Halo, ${orang}!`
const [pertama, kedua] = [10, 20]
const gabung = { ...{ a: 1 }, b: 2 }
console.log(sapa(nama), pertama, kedua, gabung)

Kode di atas memakai destructuring const [pertama, kedua] = [10, 20] dan spread operator { ...{ a: 1 }, b: 2 }. Keduanya akan muncul terus di seluruh series, jadi biasakan membaca sintaks ini.

#DOM, Event Handling, dan Async Programming

React bekerja di atas DOM, dan event handling di React adalah abstraksi dari addEventListener bawaan browser. Kalian juga harus paham Promise, async/await, fetch, dan setTimeout — karena data fetching di episode 8 nanti sepenuhnya bergantung pada konsep ini.

#Command Line, Git, dan Package Manager

Hampir semua workflow React berjalan lewat terminal. Kalian wajib nyaman berpindah direktori dengan cd, menjalankan perintah npm, dan memakai Git untuk version control. Kalian hanya butuh satu package manager — series ini memakai npm, tapi pnpm dan yarn juga sepenuhnya kompatibel.

node --version
npm --version
git --version

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

#Perangkat Lunak yang Perlu Disiapkan

#Node.js LTS dan npm

Node.js adalah runtime yang menjalankan JavaScript di luar browser — dia yang mengeksekusi toolchain build React. Pastikan memakai versi LTS, bukan versi beta, agar kompatibel dengan ekosistem package.

node --version

Versi 20.x atau 22.x adalah LTS yang stabil saat series ini ditulis. Node.js versi LTS juga membawa npm otomatis, jadi tidak perlu menginstall terpisah.

#Browser dan VS Code

Browser modern seperti Chrome, Firefox, atau Edge menjadi tempat kalian melihat hasil dan membuka React DevTools di episode 15. Untuk editor, VS Code adalah pilihan paling populer. Extensions yang sebaiknya diinstall:

• ES7+ React/Redux/React Native snippets: snippet komponen React.
• ESLint: menampilkan error lint langsung di editor.
• Prettier: merapikan format kode otomatis.
• Tailwind CSS IntelliSense jika nanti memakai Tailwind.

Setelah menginstall VS Code, ekstensi ESLint dan Prettier akan dipakai lagi di episode 19 untuk code quality.

#Hardware yang Disarankan

React development bukan pekerjaan berat, tapi proses build dan browser dengan banyak tab butuh memori. Disarankan minimal 8GB RAM di Windows, macOS, atau Linux. Prosesor modern apa pun sudah cukup untuk development sehari-hari.

#Scaffold Proyek React Pertama dengan Vite

#Membuat Project Baru

Vite adalah build tool modern yang dipakai di seluruh series ini. Jalankan scaffold berikut:

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

Perintah npm create vite@latest belajar-react -- --template react membuat folder belajar-react dengan template React siap pakai. Setelah npm run dev, buka URL yang muncul di terminal, biasanya http://localhost:5173 — jika halaman boilerplate muncul, environment kalian sudah siap.

#Struktur Folder yang Muncul

Vite menghasilkan struktur yang akan kita bedah detail di episode 3:

belajar-react/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    └── App.jsx

index.html adalah pintu masuk, src/main.jsx menempelkan React ke DOM, dan src/App.jsx adalah komponen pertama kalian. Jangan khawatir dengan detailnya — episode 2 dan 3 akan membedah semua ini.

#Verifikasi Environment

Sebelum lanjut, pastikan seluruh rantai tool berjalan normal. Buka terminal baru dan jalankan:

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

Perintah npm --prefix belajar-react run build menjalankan build production Vite. Jika selesai tanpa error dan membuat folder dist, maka toolchain kalian berfungsi penuh.

Satu kebiasaan yang akan kita pakai terus: npm run dev untuk development dan npm run build untuk produksi. Hafalkan dua perintah ini karena akan muncul di hampir semua episode.

#Penutup

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

Inti yang harus dibawa pulang:

• React dibangun di atas JavaScript modern: kuasai ES6+, DOM, dan async 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 React, ESLint, dan Prettier mempercepat workflow.
• Verifikasi terakhir: npm run build selesai tanpa error.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan ReactJS — dari kelahiran React di Facebook, filosofi declarative UI, masalah manipulasi DOM yang dipecahkan Virtual DOM, hingga kenapa React menjadi pilihan utama untuk aplikasi interaktif dan SPA. Pastikan npm run dev kalian berjalan, karena perjalanan Belajar ReactJS baru saja dimulai!