Intermediate · Level 7: React FundamentalsIntermediate45 menitBahasa Indonesia

Composition Patterns

Menyusun form, list, dan item sebagai component kecil dengan batas tanggung jawab yang jelas.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan composition sebagai menyusun UI dari component kecil
Memisahkan form, list, dan item component
Mengirim data dan handler lewat props secukupnya

ReactCompositionProps

Isi lesson

5 blok

1.
Composition menjaga UI tetap terbacaBelum selesaiWajib
2.
Form, list, dan item sebagai componentBelum selesaiWajib
3.
Pisahkan karena tanggung jawab, bukan karena jumlah barisBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Composition menjaga UI tetap terbaca

Wajib

Saat form mulai punya input, tombol, preview, dan list hasil submit, satu component bisa cepat menjadi ramai. Composition berarti kita menyusun UI dari component kecil yang punya tugas jelas.

Untuk form-to-list sederhana, batas yang enak dibaca biasanya: satu component untuk form, satu untuk list, dan satu untuk item. Parent component menyusun semuanya.

Bagian ini memengaruhi progres lesson.

Form, list, dan item sebagai component

Wajib

tsx

type Note = {
  id: string;
  title: string;
};

function NoteItem({ note }: { note: Note }) {
  return <li>{note.title}</li>;
}

function NoteList({ notes }: { notes: Note[] }) {
  return (
    <ul>
      {notes.map((note) => (
        <NoteItem key={note.id} note={note} />
      ))}
    </ul>
  );
}

`NoteList` tidak perlu tahu detail form. `NoteItem` hanya fokus menampilkan satu note. Ini membuat batas component lebih bersih.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Pisahkan karena tanggung jawab, bukan karena jumlah baris

Component kecil bagus jika membuat maksud UI lebih jelas. Jangan memecah terlalu dini hanya karena file terlihat panjang. Cari batas alami: Form mengumpulkan data, List menampilkan kumpulan data, Item menampilkan satu data.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Compose form, list, dan item

Latihan memecah UI notes menjadi NoteForm, NoteList, dan NoteItem dengan props yang jelas.

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.

8 cek otomatis4 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

Composition berarti menyusun UI dari component kecil.
Component yang baik punya tanggung jawab yang mudah dijelaskan.
Form, List, dan Item adalah batas awal yang praktis.
Props menghubungkan component tanpa membuat semua component tahu semua hal.
Berikutnya, kamu akan menentukan kapan state perlu dipindah ke parent.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Composition menjaga UI tetap terbaca.

Memuat progres Review module