Props & komposisi
Teruskan props, tetapkan props bawaan melalui destructuring, bandingkan komposisi dengan pewarisan, gunakan pola children/slot, dan buat komponen presentasi sederhana.
Props & komposisi adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 3 pelajaran total.
Gambaran umum
Tujuan: Teruskan data dengan properti, tetapkan nilai bawaan, dan bangun antarmuka pengguna dengan menyusun komponen kecil.
- Properti membawa data ke dalam komponen.
- Nilai bawaan melalui destrukturisasi sederhana.
- Komposisi dan slot elemen anak.
Meneruskan properti
Properti adalah masukan hanya-baca. Komponen induk merender komponen anak dan menyediakan nilainya; komponen anak membacanya dari parameternya.
- Jangan ubah properti.
- Perenderan ulang terjadi saat induk mengubah status atau properti.
Properti bawaan (sederhana)
Berikan properti nilai bawaan dengan melakukan destrukturisasi dalam daftar parameter: function Card({ title = "Untitled" }).
- Menjaga komponen tetap tangguh.
- Menghindari pemeriksaan undefined dalam markup.
Komposisi, bukan pewarisan
Komposisi berarti membangun antarmuka pengguna yang lebih besar dari bagian-bagian yang lebih kecil (elemen anak atau slot). Gunakan komposisi daripada pewarisan demi fleksibilitas dan aliran data yang jelas.
Demo: properti + elemen anak
Contoh: Teruskan properti, tetapkan nilai bawaan, dan susun elemen anak di dalam tata letak kartu sederhana.
<div id="root"></div>
Presentasi yang dapat digunakan kembali
Komponen penyaji berfokus pada tata letak dan tampilan visual; jika memungkinkan, buat komponen tersebut digerakkan oleh properti dan tanpa status agar mudah digunakan kembali.
- Antarmuka publik kecil (hanya properti).
- Terapkan gaya melalui kelas; hindari efek samping tersembunyi.
Komposisi vs pewarisan
Ringkasan
Ringkasan: Teruskan data dengan properti, tetapkan nilai bawaan yang aman, dan susun elemen anak untuk membangun antarmuka pengguna yang fleksibel serta dapat digunakan kembali; hindari hierarki berbasis pewarisan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Props & komposisi” gratis?
Ya — teks lengkap “Props & komposisi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Props & komposisi”?
Teruskan props, tetapkan props bawaan melalui destructuring, bandingkan komposisi dengan pewarisan, gunakan pola children/slot, dan buat komponen presentasi sederhana. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai React Academy?
Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.
Berapa lama pelajaran “Props & komposisi” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?
Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.