ReactJS #3: Proyek Pertama - Hello World!

ReactJS #3: Proyek Pertama

Membuat Halaman "Hello World" dengan React (Tanpa Ribet!)

Halo, petualang cilik! 👋

Setelah di artikel sebelumnya kita sudah memasang Node.js, VS Code, dan Git, sekarang saatnya membuat proyek React pertama kita! Kita akan membuat halaman yang menampilkan tulisan "Hello World" di browser. Tenang saja, caranya gampang banget, kok. Ibarat kita akan menanam pohon, kita siapkan bibit dan tanahnya dulu.

🌟 Yang perlu diingat: Kita akan menggunakan alat bernama Create React App. Ini adalah alat resmi dari tim React yang membuat kita tidak perlu pusing mengatur banyak hal. Dia akan menyiapkan semua yang kita butuhkan secara otomatis!

📁 Langkah 1: Membuka Terminal dan Membuat Folder Proyek

Terminal atau Command Prompt (CMD) adalah tempat kita mengetik perintah ajaib. Yuk, kita buka:

• Windows: Tekan tombol Windows + R, ketik cmd, lalu Enter.
• Mac: Buka Terminal dari Launchpad atau folder Utilitas.

Setelah terminal terbuka, kita akan membuat folder khusus untuk menyimpan proyek-proyek React kita. Misalnya kita buat folder react-belajar di dalam folder Documents (Dokumen). Ketik perintah berikut satu per satu, tekan Enter setelah setiap baris:

cd Documents
mkdir react-belajar
cd react-belajar

Penjelasan:

• cd Documents – pindah ke folder Documents.
• mkdir react-belajar – membuat folder baru bernama "react-belajar".
• cd react-belajar – masuk ke dalam folder "react-belajar".

⚛️ Langkah 2: Membuat Aplikasi React dengan Create React App

Sekarang kita akan memanggil peri Create React App untuk membuat kerangka proyek kita. Ketik perintah ini di terminal (pastikan kamu masih berada di folder react-belajar):

npx create-react-app hello-world

Perintah npx itu seperti menyuruh asisten untuk mengambil alat dan menjalankannya. create-react-app adalah nama alatnya, dan hello-world adalah nama proyek kita. Kamu bisa ganti "hello-world" dengan nama lain yang kamu suka, misalnya "proyek-pertamaku".

Setelah enter, kamu akan melihat banyak tulisan berjalan di terminal. Itu pertanda alat sedang menyiapkan semua file yang diperlukan. Prosesnya bisa beberapa menit, tergantung kecepatan internet. Bersabarlah, sambil minum susu atau menghitung domba 🐑

Kalau sudah selesai, akan muncul pesan seperti Happy hacking! atau Success!

⚠️ Jika muncul error: Mungkin koneksi internetmu lambat atau ada masalah izin. Coba ulangi perintahnya, atau minta bantuan orang dewasa. Pastikan juga Node.js sudah terinstal dengan benar (cek dengan node -v).

🚀 Langkah 3: Menjalankan Server Development

Sekarang kita masuk ke folder proyek yang baru dibuat:

cd hello-world

Lalu jalankan perintah ini untuk menyalakan server lokal (komputer kita akan menjadi "web server" sementara):

npm start

Setelah perintah dijalankan, secara otomatis browser akan terbuka dan menampilkan halaman http://localhost:3000. Di halaman itu akan terlihat logo React berputar-putar dan tulisan "Edit src/App.js and save to reload." Itu tandanya React sudah bekerja!

Yeay! 🎉 Kamu sudah berhasil membuat aplikasi React pertama!

✏️ Langkah 4: Mengubah Teks menjadi "Hello World"

Sekarang kita akan mengganti tulisan di halaman itu menjadi "Hello World" versi kita sendiri. Caranya gampang:

1. Buka VS Code (alat menulis kode yang sudah kita pasang).
2. Klik menu File → Open Folder, lalu pilih folder hello-world yang ada di dalam Documents/react-belajar.
3. Di panel kiri VS Code, cari dan klik file src/App.js (ada di dalam folder src).
4. Di dalam file itu, kamu akan melihat kode yang panjang. Cari baris yang bertuliskan:
   <p>
     Edit <code>src/App.js</code> and save to reload.
   </p>
5. Ganti teks di antara <p> dan </p> dengan "Hello World!" atau apa pun yang kamu suka, misalnya "Halo, aku suka React!".
6. Simpan file dengan menekan Ctrl + S (di Windows) atau Command + S (di Mac).

Sekarang lihat kembali browser yang tadi terbuka (http://localhost:3000). Secara otomatis halaman akan berubah dan menampilkan tulisan barumu! 🎨

Keren, kan? Kamu baru saja mengubah tampilan website React!

📂 Mengenal Struktur Folder (Sekilas)

Di dalam folder hello-world ada banyak file dan folder. Jangan bingung, ini yang paling penting untuk kita sekarang:

hello-world/
├── public/
│ └── index.html (halaman utama, tempat React menempel)
├── src/
│ ├── App.js (komponen utama kita, yang baru saja diedit)
│ ├── index.js (penghubung antara React dan index.html)
│ └── ... (file lain)
└── package.json (daftar "mainan" yang dipakai proyek)

Untuk sekarang, kita cukup fokus ke src/App.js – di situlah kita akan banyak menulis kode React nantinya.

🛑 Menghentikan Server

Kalau kamu sudah puas melihat hasilnya, kita bisa mematikan server dengan kembali ke terminal dan menekan Ctrl + C (tahan Ctrl, tekan C). Lalu ketik Y (untuk yes) jika diminta. Ini penting agar server tidak terus menyala di latar belakang.

💡 Tips: Setiap kali ingin menjalankan proyek lagi, buka terminal, masuk ke folder proyek (misal cd Documents/react-belajar/hello-world), lalu ketik npm start lagi.

🎯 Kesimpulan

Kamu telah berhasil:

• Membuat proyek React baru dengan Create React App.
• Menjalankan server dan melihat halaman React di browser.
• Mengedit teks di file App.js dan melihat perubahannya secara langsung.

Ini adalah langkah pertama yang sangat penting. Selanjutnya kita akan belajar tentang komponen dan JSX – yaitu cara React membuat tampilan dengan mudah. Sampai jumpa di artikel berikutnya!

Lanjut ke ReactJS #4: Mengenal Komponen ▶

✨ Kamu sekarang sudah bisa membuat website dengan React! Selamat! ✨