ReactJS #4: Mengenal Komponen – Seperti Lego

ReactJS #4: Mengenal Komponen

Seperti Lego, Bangun Website dari Potongan-potongan Kecil

Halo, arsitek cilik! 🏗️

Kamu pasti pernah main Lego, kan? Dari balok-balok kecil kita bisa membuat rumah, mobil, istana, bahkan robot raksasa! Nah, di React, kita juga membangun website dari balok-balok kecil yang disebut KOMPONEN.

🏠 + 🚗 + 🌳 = 🏡

🔎 Apa Itu Komponen?

Komponen adalah potongan kode yang bisa dipakai berulang-ulang. Setiap komponen bertugas menampilkan satu bagian kecil dari halaman web. Misalnya:

• Komponen Header (kepala halaman) – berisi logo dan menu.
• Komponen Tombol – tombol keren yang bisa diklik.
• Komponen Kartu Profil – menampilkan foto dan nama.

Dengan komponen, kita tidak perlu menulis kode yang sama berulang kali. Cukup buat satu kali, lalu pakai di mana saja. Ibarat Lego, kita punya balok pintu yang bisa dipasang di rumah mana pun.

⚙️ Membuat Komponen Pertama (Seperti Membuat Balok Lego Baru)

Kita akan buat komponen sederhana yang menampilkan tulisan "Halo, aku komponen!". Buka proyek React-mu (dari artikel #3), lalu buka file src/App.js. Hapus semua isinya, lalu ganti dengan kode berikut:

// Ini adalah komponen bernama App (sebenarnya App sudah komponen) // Tapi kita akan buat komponen baru di dalam file yang sama dulu function Salam() { return ( <div style={{ backgroundColor: 'lightblue', padding: '20px', borderRadius: '20px' }}> <h2>Halo, aku komponen!</h2> <p>Aku adalah balok Lego biru.</p> </div> ); } function App() { return ( <div> <h1>Belajar Komponen React</h1> <Salam /> {/* Memasang komponen Salam seperti memasang balok Lego */} </div> ); } export default App;

Penjelasan:

• function Salam() { ... } – kita mendefinisikan komponen bernama Salam. Nama komponen harus diawali huruf besar.
• Di dalam return, kita menulis HTML (sebenarnya JSX) yang akan ditampilkan.
• Di komponen App, kita "memasang" komponen Salam dengan menulis <Salam />. Mirip seperti menempel balok Lego ke balok lainnya.

Simpan file, maka di browser akan muncul tulisan "Belajar Komponen React" dan di bawahnya ada kotak biru berisi salam dari komponen.

💡 Ingat: Setiap komponen React adalah fungsi yang mengembalikan tampilan (JSX). Nama fungsi harus diawali huruf besar.

📦 Menyusun Banyak Komponen (Lego yang Lebih Besar)

Sekarang kita buat beberapa komponen kecil, lalu gabungkan jadi satu halaman. Misalnya kita ingin membuat halaman profil sederhana yang terdiri dari:

• Header – judul halaman.
• Profil – foto dan nama.
• Footer – informasi hak cipta.

Kita bisa buat tiga komponen terpisah, lalu di App kita susun seperti ini:

function Header() { return <header style={{ background: 'gold', padding: 10 }}><h1>Profilku</h1></header>; } function Profil() { return ( <div style={{ border: '2px solid blue', margin: 20, padding: 20 }}> <img src="https://via.placeholder.com/100" alt="foto" style={{ borderRadius: '50%' }} /> <h2>Andi Si Kecil</h2> <p>Aku suka React dan Lego!</p> </div> ); } function Footer() { return <footer style={{ background: '#ddd', padding: 5 }}>&copy; 2025 Andi</footer>; } function App() { return ( <div> <Header /> <Profil /> <Footer /> </div> ); }

Hasilnya di browser akan berupa halaman utuh dengan tiga bagian. Coba perhatikan, kita tidak menulis ulang kode footer, cukup pakai komponen <Footer />. Praktis, kan?

🧩 Komponen Bisa Dipakai Berkali-kali (Reusable)

Kehebatan komponen: kita bisa memakai komponen yang sama berkali-kali dengan mudah. Misalnya kita mau menampilkan tiga kartu profil teman. Cukup panggil komponen Profil tiga kali:

function App() { return ( <div> <Header /> <Profil /> <Profil /> <Profil /> <Footer /> </div> ); }

Maka akan muncul tiga kartu yang sama. Nanti kita akan belajar membuat komponen yang lebih fleksibel dengan props (oleh-oleh) agar setiap kartu bisa berbeda isinya.

📁 Memisahkan Komponen ke File Sendiri (Rapi Seperti Lemari Lego)

Kalau komponen sudah banyak, lebih baik kita simpan di file terpisah. Buat file baru di folder src dengan nama Header.js, lalu tulis:

function Header() { return <header style={{ background: 'gold', padding: 10 }}><h1>Profilku</h1></header>; } export default Header;

Kemudian di App.js, kita "impor" komponen itu:

import Header from './Header'; function App() { return ( <div> <Header /> {/* ... */} </div> ); }

Dengan begini, kode kita rapi dan mudah dicari. Seperti menyimpan balok Lego berdasarkan warnanya di kotak berbeda.

🎨 Latihan Seru: Buat Komponen "Kartu Buah"

Coba buat komponen bernama KartuBuah yang menampilkan nama buah dan warnanya. Misalnya:

🍎 Apel - Merah

Lalu di App, tampilkan tiga kartu: Apel, Pisang, Jeruk. Gunakan komponen yang sama tiga kali.

Petunjuk: komponen bisa menerima "oleh-oleh" (props) agar tiap kartu berbeda. Tapi untuk sekarang, cukup buat komponen dengan isi tetap dulu. Nanti di artikel #6 kita belajar props.

Jika bingung, ini contoh solusi sementara (tanpa props):

function KartuBuah() { return <div style={{ border: '2px solid orange', padding: 10, margin: 10 }}>🍎 Apel - Merah</div>; } // Di App, panggil <KartuBuah/> tiga kali (masih sama semua)

💡 Kesimpulan

• Komponen adalah balok penyusun website React.
• Setiap komponen adalah fungsi yang mengembalikan JSX (tampilan).
• Kita bisa membuat komponen sendiri dan memakainya berulang kali.
• Komponen bisa disimpan di file terpisah agar rapi.

Di artikel selanjutnya kita akan belajar tentang JSX – bahasa khusus yang memungkinkan kita menulis HTML di dalam JavaScript. Sampai jumpa!

Lanjut ke ReactJS #5: JSX ▶

✨ Susun komponenmu seperti Lego, dan lihatlah istana React-mu terbangun! ✨