ReactJS #2: Persiapan Petualangan
Memasang Alat-alat yang Dibutuhkan
(Node.js, VS Code, dan Git)
Halo, calon developer hebat! 👋
Di artikel pertama kita sudah kenalan dengan React. Sekarang waktunya menyiapkan perlengkapan sebelum memulai petualangan. Seperti mau main sepak bola butuh bola dan sepatu, belajar React juga butuh alat-alat khusus yang harus kita pasang di komputer.
Alat yang akan kita pasang ada tiga:
- Node.js (mesin ajaib yang menjalankan JavaScript di komputermu)
- VS Code (tempat menulis kode yang cantik dan pintar)
- Git (mesin waktu untuk menyimpan dan melacak perubahan kode)
Yuk, kita pasang satu per satu! Jangan khawatir, langkah-langkahnya gampang kok, tinggal klik-klik aja. Pastikan kamu minta ditemani orang tua atau kakak saat menginstal, ya!
🌐 Alat Pertama: Node.js (Otak JavaScript)
Node.js itu seperti otak yang bisa menjalankan perintah JavaScript di luar browser. Selain itu, Node.js membawa temannya yang bernama npm (singkatan dari Node Package Manager).
Bayangkan npm seperti toko mainan raksasa tempat kita bisa mengambil kode-kode keren buatan programmer lain secara gratis. Nanti kita akan sering pakai npm untuk membuat proyek React.
📥 Cara Memasang Node.js:
- Buka browser (Chrome, Edge, dll), kunjungi nodejs.org.
- Di halaman depan, akan ada dua tombol: LTS dan Current. Klik yang LTS (warna hijau). LTS artinya versi yang paling stabil dan cocok untuk pemula.
- Setelah file installer terdownload, buka file tersebut. Ikuti petunjuknya: klik Next, centang "I accept the agreement", Next terus sampai tombol Install. Biarkan semua centangan standar.
- Tunggu sampai selesai, lalu klik Finish.
✅ Cek Apakah Node.js Sudah Terpasang:
Kita perlu membuka Command Prompt (CMD) atau Terminal. Caranya: tekan tombol Windows + R, ketik cmd, lalu Enter. Muncul kotak hitam.
Di dalam kotak hitam itu, ketik perintah berikut satu per satu, lalu tekan Enter:
Jika muncul tulisan seperti v20.xx.x (angka), berarti Node.js berhasil terpasang. Selamat!
Begitu juga dengan npm, akan muncul angka versi. Kalau muncul error, coba ulangi instalasi.
📝 Alat Kedua: VS Code (Buku Tulis Ajaib)
Visual Studio Code (sering disebut VS Code) adalah tempat kita menulis kode. Ini seperti buku tulis yang super pintar: bisa mewarnai kode, memberi saran, dan bahkan ada ekstensi yang membantu menulis React lebih cepat.
📥 Cara Memasang VS Code:
- Buka code.visualstudio.com.
- Klik tombol Download for Windows (jika pakai Windows). Untuk pengguna Mac, nanti otomatis ke halaman Mac.
- Jalankan file installer yang sudah di-download. Setuju dengan perjanjian, lalu klik Next, Next, sampai Install. Biarkan semua centangan standar, tapi pastikan centang "Add to PATH" dan "Add 'Open with Code' action" (ini memudahkan nanti).
- Tunggu proses instalasi, lalu klik Finish. VS Code akan terbuka secara otomatis.
🎨 Mempercantik VS Code dengan Ekstensi (Opsional tapi Disarankan)
Ekstensi itu seperti aksesoris yang bikin VS Code makin sakti. Caranya: klik ikon Extensions di sisi kiri (gambar kotak-kotak). Lalu cari dan instal yang ini:
- ES7+ React/Redux/React-Native snippets – untuk menulis kode React dengan cepat, cukup ketik singkatan.
- Prettier - Code formatter – merapikan tulisan kode otomatis.
- Bracket Pair Colorizer – memberi warna pada tanda kurung supaya tidak bingung.
Klik Install pada masing-masing ekstensi.
⏳ Alat Ketiga: Git (Mesin Waktu)
Git adalah alat yang bisa merekam setiap perubahan pada kode kita. Kalau nanti kode kita error, kita bisa kembali ke versi sebelumnya. Juga penting untuk bekerja sama dengan teman. Tapi untuk pemula, kita akan pakai Git untuk mengunduh proyek dari internet dan nanti saat kita mau mempublikasikan hasil karya.
📥 Cara Memasang Git:
- Kunjungi git-scm.com.
- Klik Download for Windows (atau sesuai OS-mu).
- Buka installer, ikuti langkah-langkahnya. Hampir semua bisa di-klik Next saja. Hati-hati di bagian "Choosing the default editor" pilih saja "Use Visual Studio Code as Git's default editor" kalau ada pilihan itu. Sisanya default.
- Selesai, klik Finish.
✅ Cek Git:
Buka Command Prompt lagi, lalu ketik:
Kalau muncul angka versi, tandanya Git sudah siap pakai.
🎉 Semua Alat Sudah Siap!
Sekarang komputer kita sudah memiliki semua perlengkapan untuk membuat aplikasi React. Mulai dari otak JavaScript (Node.js), buku tulis pintar (VS Code), dan mesin waktu (Git).
Di artikel selanjutnya kita akan membuat proyek React pertama dan menampilkan tulisan "Hello World" di browser. Pastikan kamu sudah mengikuti langkah-langkah di atas dengan baik. Kalau ada masalah, tanyakan di kolom komentar ya, kakak siap membantu!