Intermediate · Level 7: React FundamentalsIntermediate50 menitBahasa Indonesia

Splitting UI into Components

Memecah satu UI yang mulai panjang menjadi component kecil yang lebih mudah dibaca.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Mengenali kapan UI mulai perlu dipecah
Memindahkan bagian UI ke component kecil
Menyusun component tree sederhana dari parent dan child

ReactComponent TreeRefactoring

Isi lesson

5 blok

1.
Component membantu saat UI mulai ramaiBelum selesaiWajib
2.
Sebelum dan sesudah dipecahBelum selesaiWajib
3.
Checklist split yang sehatBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Component membantu saat UI mulai ramai

Wajib

Satu component boleh berisi beberapa markup. Tetapi jika semua bagian UI ditulis dalam satu function besar, kode cepat sulit dibaca. React mendorong kamu memecah UI berdasarkan bagian yang punya peran jelas.

Mulai dari pertanyaan sederhana: bagian mana yang bisa diberi nama? Jika ada header profil, daftar skill, dan tombol aksi, masing-masing bisa menjadi component kecil. Parent component lalu menyusun bagian-bagian itu.

Bagian ini memengaruhi progres lesson.

Sebelum dan sesudah dipecah

Wajib

tsx

type Profile = {
  name: string;
  role: string;
  skills: string[];
};

function ProfileHeader({ name, role }: { name: string; role: string }) {
  return (
    <header>
      <h2>{name}</h2>
      <p>{role}</p>
    </header>
  );
}

function SkillList({ skills }: { skills: string[] }) {
  return (
    <ul>
      {skills.map((skill) => (
        <li key={skill}>{skill}</li>
      ))}
    </ul>
  );
}

ProfileHeader dan SkillList punya peran jelas. Parent component bisa memakai keduanya untuk menyusun ProfileCard.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Checklist split yang sehat

Pecah component jika bagian UI punya nama jelas, dipakai ulang, atau membuat parent lebih mudah dibaca. Jangan memecah terlalu kecil jika hasilnya justru membuat alur UI sulit diikuti.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Pecah Profile UI menjadi component

Latihan memecah UI profil menjadi parent dan child component yang lebih mudah dibaca.

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.

6 cek otomatis4 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

UI yang panjang bisa dipecah menjadi component kecil.
Component kecil sebaiknya punya peran dan nama yang jelas.
Parent component menyusun child component menjadi component tree.
Jangan memecah UI hanya demi terlihat kompleks.
Berikutnya, Uji Kompetensi mengecek component, JSX, props, children, dan splitting.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Component membantu saat UI mulai ramai.

Memuat progres Review module