Komponen & Props — CompileDaily Study

Penjelasan

Komponen di React modern ditulis sebagai fungsi JavaScript biasa yang mengembalikan JSX, namanya WAJIB diawali huruf kapital (beda dengan elemen HTML biasa yang huruf kecil). Data dikirim dari komponen induk ke komponen anak lewat props — mirip parameter fungsi, tapi berupa satu objek yang berisi semua atribut yang dikirim.

Contoh Konsep

function KartuProduk(props) {
    return (
        <div className="kartu">
            <h2>{props.nama}</h2>
            <p>Rp {props.harga}</p>
        </div>
    );
}

function App() {
    return (
        <div>
            <KartuProduk nama="Kaos CompileDaily" harga={99000} />
            <KartuProduk nama="Topi CompileDaily" harga={59000} />
        </div>
    );
}

Praktikum

Buat komponen KartuArtikel yang menerima props judul dan penulis, menampilkan keduanya dalam <h2> dan <p>. Panggil komponen itu minimal 2 kali di App dengan data berbeda.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Props bersifat READ-ONLY dari sudut pandang komponen yang menerimanya — komponen anak TIDAK BOLEH mengubah props.nama langsung, kalau butuh data yang berubah-ubah, itu tandanya kamu butuh state (dibahas di materi berikutnya), bukan props.