Pasang editor
Editor adalah tempat kamu menulis kode. Bayangkan aplikasi catatan, tapi khusus untuk teks program. Kamu mengetik di sana, lalu menyimpan file. Browser nanti yang membaca file itu.
Kita pakai VS Code. Ia gratis, populer, dan berjalan di Windows, macOS, dan Linux. Buka situs resminya, unduh untuk sistem operasimu, lalu pasang seperti aplikasi biasa. Setelah terpasang, buka dan pilih menu untuk membuka folder. Buat folder baru bernama latihan, lalu buka folder itu di VS Code.
Kenapa editor penting? Karena kode adalah teks polos. Kamu bisa menulisnya di aplikasi catatan bawaan, tapi editor memberi warna, penomoran baris, dan saran. Itu membuat kode lebih mudah dibaca dan lebih sedikit salah ketik.
Ada satu kebiasaan yang berguna sejak awal. Simpan file dengan nama yang jelas dan akhiran yang tepat. File HTML berakhiran .html, file CSS berakhiran .css, dan file JavaScript berakhiran .js. Akhiran ini memberi tahu editor dan browser jenis isi file. Kamu akan memakai ketiganya di bab berikutnya.
Kenal browser
Browser adalah tempat hasil karyamu tampil. Chrome, Firefox, dan Edge semuanya bisa. Seri ini memakai Chrome sebagai contoh, tapi langkahnya hampir sama di browser lain.
Browser membaca file HTML, CSS, dan JavaScript, lalu menggambar halaman. Kamu tidak perlu menginstal apa pun untuk menjalankan kode. Cukup buka file di browser, dan hasilnya muncul.
Cara membuka file lokal sederhana. Di VS Code, klik kanan file HTML lalu pilih Open with Live Server jika ekstensi itu terpasang. Tanpa ekstensi, kamu bisa menyeret file ke jendela browser. Keduanya menampilkan halaman yang sama. Untuk seri ini, cara apa pun yang kamu pilih tidak masalah.
Buka DevTools
DevTools adalah jendela inspeksi yang tertanam di dalam browser. Ia menampilkan apa yang terjadi di balik halaman. Untuk membukanya di Chrome, tekan F12 atau klik kanan halaman lalu pilih Inspect.
Panel yang paling sering dipakai di awal adalah Console. Console menampilkan pesan dari kode. Ia juga tempat kamu mengetik perintah JavaScript langsung. Di bab ini kamu hanya perlu membukanya dan melihat pesan muncul.
Console adalah teman terbaikmu saat belajar. Setiap kali kode tidak berjalan seperti harapan, console sering menunjukkan alasannya. Pesan error muncul di sana dengan baris yang bermasalah. Membaca console adalah keterampilan yang akan kamu pakai di setiap bab berikutnya.
Pasangan contoh
Kode di bawah menulis satu pesan ke console. Versi vanilla menulisnya langsung. Versi React menulisnya dari dalam komponen. Keduanya melakukan hal yang sama.
Vanilla JavaScript
console.log("Halo, dunia!");React
function Halo() {
console.log("Halo, dunia!");
return <p>Halo dari React</p>;
}Demo Hidup
Tombol di bawah memanggil console.log. Tekan tombolnya, lalu buka DevTools dan lihat tab Console. Pesan akan muncul di sana.
Langkah: tekan tombol, tekan F12, pilih tab Console, lalu lihat pesannya.