Props dan Children
Mengirim data ke component lewat props dan menaruh UI nested lewat children.
Tujuan belajar
- Menjelaskan props sebagai data yang dikirim ke component
- Membuat component reusable dengan props
- Menggunakan children untuk nested UI sederhana
Isi lesson
5 blok- 1.Props membuat component bisa dipakai ulangBelum selesaiWajib
- 2.Card reusable dengan childrenBelum selesaiWajib
- 3.Props untuk data, children untuk isi nestedBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Props membuat component bisa dipakai ulang
WajibComponent tanpa props biasanya hanya menampilkan isi yang sama. Props membuat parent component bisa mengirim data ke child component. Dengan props, satu `LessonCard` bisa menampilkan judul dan deskripsi yang berbeda.
`children` adalah props khusus untuk UI yang ditaruh di antara tag pembuka dan penutup component. Ini berguna untuk wrapper seperti Card, Panel, atau Alert yang membungkus isi.
Bagian ini memengaruhi progres lesson.
Card reusable dengan children
Wajibimport type { ReactNode } from "react";
type CardProps = {
title: string;
children: ReactNode;
};
function Card({ title, children }: CardProps) {
return (
<article className="card">
<h2>{title}</h2>
<div>{children}</div>
</article>
);
}
function LessonPreview() {
return (
<Card title="Props dan Children">
<p>Isi ini dikirim sebagai children.</p>
</Card>
);
}`title` dikirim sebagai props biasa. Teks di dalam `<Card>...</Card>` masuk sebagai `children`.
Bagian ini memengaruhi progres lesson.
Tips
WajibProps untuk data, children untuk isi nested
Gunakan props biasa untuk data yang punya nama jelas, seperti title, description, atau status. Gunakan children saat component bertugas menjadi pembungkus isi yang bisa bervariasi.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususBuat Card dan Button dengan props
Latihan membuat component reusable yang menerima props dan children.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Props adalah data yang dikirim dari parent ke component.
- Props membuat component lebih reusable.
- `children` dipakai untuk UI nested di dalam component.
- Type props membantu data component tetap jelas.
- Berikutnya, kamu akan memecah UI besar menjadi beberapa component.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Props membuat component bisa dipakai ulang.