Belajar Gatsby - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Gatsby! Series ini akan membawa kalian menguasai Gatsby — React framework untuk membangun situs statis yang sangat cepat, SEO-friendly, dan siap production — mulai dari fondasi konsep hingga deployment. Total ada 24 episode yang tersusun dari enam fase.

Sebelum menulis kode pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena Gatsby dibangun di atas React dan memakai GraphQL sebagai data layer. Kalau kalian belum pernah melihat JSX atau belum paham build-time rendering, hampir semua episode berikutnya akan terasa membingungkan.

Episode 0 ini adalah peta jalan kalian: kita memastikan skill dasar, menyiapkan Node.js LTS, editor, dan Gatsby CLI, lalu memverifikasi seluruh toolchain sebelum melangkah ke episode 1.

#Skill Dasar yang Wajib Dikuasai

#HTML, CSS, dan JavaScript ES6+

Gatsby menghasilkan HTML, CSS, dan JavaScript. Kalian wajib nyaman dengan markup semantik, flexbox dan grid untuk layout, serta fitur JavaScript modern seperti const, let, arrow function, destructuring, spread operator, dan module import. Tanpa dasar ini, kode komponen akan sulit dibaca.

#Dasar React dan Komponen Fungsional

Gatsby dibangun di atas React. Yang wajib kalian kuasai: komponen fungsional, props, state dengan useState, efek dengan useEffect, conditional rendering, dan mapping list data menjadi elemen. Gatsby 5 memakai React 18, jadi pahami juga konsep hydration — proses menghidupkan kembali markup statis menjadi aplikasi interaktif di browser.

#Konsep SSG dan JAMstack

Gatsby termasuk static site generator (SSG) dan mengikuti pola JAMstack: JavaScript, API, dan Markup. Halaman dibangun saat build time menjadi file HTML statis, lalu di-serve melalui CDN. Kalian perlu memahami perbedaan SSG, SSR (server-side rendering), dan CSR (client-side rendering) karena seluruh series ini akan memakai istilah tersebut.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js LTS

Gatsby 5 membutuhkan Node.js versi 18 ke atas. Cara paling aman adalah memakai versi LTS terbaru melalui nvm agar mudah berganti versi:

nvm install --lts
nvm use --lts

Verifikasi bahwa Node.js dan npm terpasang dengan benar:

node --version
npm --version

Perintah node --version dan npm --version harus menampilkan angka versi. Pastikan versi Node minimal 18; kalau masih 16, update dulu karena Gatsby 5 tidak mendukungnya.

#Editor: VS Code

VS Code adalah editor paling populer untuk pengembangan Gatsby. Pasang ekstensi yang mempercepat kerja: ES7+ React/Redux/React-Native snippets untuk JSX, Prettier untuk formatting otomatis, dan GraphQL untuk syntax highlighting query di file kode. Editor lain seperti JetBrains WebStorm juga bisa dipakai, tapi series ini mengasumsikan VS Code.

#Browser Modern dan Spesifikasi Hardware

Gunakan browser modern seperti Chrome, Firefox, atau Edge untuk development. Buka DevTools untuk memeriksa network, performance, dan console. Untuk hardware, Gatsby membutuhkan RAM minimal 8GB karena proses build memuat seluruh graph data ke memori; proses single-thread Node.js akan bekerja keras saat membangun ratusan halaman.

#Memasang Gatsby CLI

Gatsby CLI adalah alat utama sepanjang series ini: membuat project, menjalankan dev server, dan membangun production build. Instal secara global:

npm install -g gatsby-cli

Setelah selesai, verifikasi:

gatsby --version

Perintah gatsby --version menampilkan versi CLI. Kalau kalian tidak ingin memasang global, gunakan npx gatsby --version untuk menjalankan CLI tanpa instalasi permanen.

#Tool Pendukung Lainnya

Siapkan juga Git untuk version control dan akun GitHub untuk menyimpan repo. Di episode 19-20 kita akan menghubungkan project Gatsby ke CI/CD. Verifikasi Git:

git --version

#Verifikasi Environment

Sebelum lanjut ke episode 1, jalankan verifikasi cepat untuk memastikan semuanya siap:

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

Output dari keempat perintah tersebut harus menampilkan versi tanpa error. Jika ada yang gagal, berhenti dulu dan perbaiki — fondasi yang kuat akan membuat 23 episode berikutnya jauh lebih ringan.

#Penutup

Di episode 0 ini kalian sudah menyiapkan pijakan untuk seluruh series: memahami skill dasar HTML, CSS, JavaScript ES6+, React, dan konsep SSG/JAMstack, lalu menyiapkan Node.js LTS, VS Code, serta Gatsby CLI.

Inti yang harus dibawa pulang:

• Gatsby adalah React framework untuk static site generation dengan pola JAMstack.
• Kuasai JavaScript ES6+ dan komponen fungsional React sebelum lanjut.
• Node.js LTS minimal versi 18 wajib tersedia.
• Gatsby CLI dipakai untuk membuat project dan menjalankan build.
• Verifikasi toolchain: node, npm, gatsby, dan git harus bersih dari error.
• Hardware minimal 8GB RAM membuat proses build terasa nyaman.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan Gatsby — dari kelahiran Gatsby sebagai static site generator, evolusi versi 1 sampai 5, hingga masalah performa dan SEO yang diselesaikannya. Pastikan toolchain kalian sudah siap, karena perjalanan Belajar Gatsby baru saja dimulai!