Penulis: Bayu Permana Putra – Alumni BION CS (2440116675)

Sumber: https://medium.com/nerd-for-tech/react-fundamentals-basics-what-is-and-how-to-start-react-app-9258b2af87e9

Halo rekan-rekan pengembang! Pernah merasa kewalahan saat harus mengelola tampilan website yang semakin kompleks? React JS hadir untuk menjawab tantangan itu dengan pendekatan yang interaktif, cepat, dan modular. Berikut adalah intisari dari apa yang perlu kalian pahami untuk mulai mendalami React.

1. Struktur Proyek yang Rapi

Saat pertama kali membuat proyek React (misalnya menggunakan Vite atau Create React App), kalian akan melihat beberapa folder utama:

  • node_modules: Tempat berkumpulnya semua library JavaScript yang dibutuhkan.

  • public: Berisi aset statis seperti gambar atau ikon yang bisa diakses publik.

  • SRC: Ini adalah “dapur” utama kita. Di sinilah semua kode logika dan komponen aplikasi berada.

2. Kekuatan Komponen dan Props

Salah satu konsep terpenting di React adalah Komponen. Kita bisa memecah bagian website (seperti Navbar, Footer, atau Card) menjadi unit-unit kecil yang bisa digunakan kembali.

Agar komponen-komponen ini bisa saling “berbicara”, kita menggunakan Props. Bayangkan Props sebagai cara mengirimkan data dari komponen induk (parent) ke komponen anak (child). Misalnya, kalian punya komponen “Hello”, kalian bisa mengirimkan nama yang berbeda-beda melalui Props.

3. Mengelola Data dengan State dan Event

Jika Props digunakan untuk menerima data dari luar, State digunakan untuk menyimpan informasi di dalam komponen itu sendiri.

  • UseState: Ini adalah hook paling dasar untuk membuat state. Contohnya, untuk menghitung jumlah klik (counter).

  • Event: Digunakan untuk memicu aksi, seperti menangkap input dari keyboard atau klik pada tombol.

4. Latihan Praktis: Membuat “To-Do List” Sederhana

Belajar teori saja tidak cukup. Mari kita lihat bagaimana konsep di atas digabungkan dalam proyek To-Do List:

  • Kita menggunakan State untuk menampung daftar tugas dan input teks terbaru.

  • Gunakan fungsi Filter pada array untuk fitur hapus tugas berdasarkan indeksnya.

  • Gunakan Conditional Rendering jika ingin menampilkan pesan tertentu saat daftar tugas masih kosong.

Penutup: Teruslah Bereksperimen

React memiliki ekosistem yang sangat luas. Materi dasar ini adalah pintu masuk kalian. Saran saya sebagai alumni: jangan hanya membaca, langsung buka Visual Studio Code kalian, jalankan npm run dev, dan mulailah membangun sesuatu.

Semoga bermanfaat dan selamat berkarya di dunia Front-End Development!

Disarikan dari materi sharing Bayu Permana Putra (Alumni BINUS ONLINE). Tonton tutorial lengkapnya di sini: https://www.youtube.com/watch?v=7JBJPsAvFZM