Advanced · Level 16: Frontend ArchitectureAdvanced55 menitBahasa Indonesia

Shared Components

Menentukan apakah UI sebaiknya tetap dekat feature atau dipindahkan menjadi primitive shared dengan API yang stabil.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan reuse kebetulan dari kebutuhan shared component yang nyata
Menjaga component feature-specific dekat domain yang dimilikinya
Mengidentifikasi primitive UI yang cukup generic untuk dipakai lintas feature
Menghindari API component penuh boolean dan props yang tidak jelas

React ComponentsCompositionShared UIFeature Ownership

Isi lesson

6 blok

1.
Dipakai dua kali belum otomatis berarti sharedBelum selesaiWajib
2.
UI primitive dibedakan dari component domainBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Writing practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Dipakai dua kali belum otomatis berarti shared

Wajib

Shared component membawa biaya: API harus dipahami banyak caller, perubahan visual dapat berdampak luas, dan owner perlu menjaga compatibility. Karena itu, reuse bukan satu-satunya alasan memindahkan code. Button, Input, Dialog, dan Avatar generic sering cocok menjadi shared primitive karena tugasnya sama lintas feature. CourseProgressCard, EnrollmentStatus, atau CourseFilter biasanya tetap milik courses walau visualnya mirip card lain. Tanyakan apakah component membawa vocabulary domain yang sama, apakah behaviornya benar-benar generic, dan apakah reuse sudah nyata serta stabil. Bila jawabannya belum jelas, simpan dekat feature dan ekstrak nanti dengan bukti yang lebih kuat.

Bagian ini memengaruhi progres lesson.

UI primitive dibedakan dari component domain

Wajib

tsx

// src/components/ui/Button.tsx
type ButtonProps = {
  children: React.ReactNode;
  onClick?: () => void;
};

export function Button({ children, onClick }: ButtonProps) {
  return <button type="button" onClick={onClick}>{children}</button>;
}

// src/features/courses/components/CourseProgressCard.tsx
type CourseProgressCardProps = {
  title: string;
  completedLessons: number;
  totalLessons: number;
};

export function CourseProgressCard(props: CourseProgressCardProps) {
  const progress = Math.round((props.completedLessons / props.totalLessons) * 100);

  return <article>{props.title}: {progress}% selesai</article>;
}

Button memiliki contract interaction yang dapat dipakai banyak feature. CourseProgressCard membawa vocabulary course, calculation progress, dan copy domain, sehingga lebih mudah dirawat dekat feature courses. Memaksa card ini menjadi generic sering menghasilkan props seperti entityName, progressLabel, completedText, dan mode yang justru menyembunyikan tujuan component.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Place shared and course components

Pisahkan Button dan Avatar generic dari CourseProgressCard serta CourseFilter yang tetap membawa domain courses.

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 otomatis5 checklist

Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Pilih dua component pada project lokal: satu yang menurutmu layak shared dan satu yang sebaiknya tetap di feature. Untuk masing-masing, jelaskan consumer saat ini, vocabulary atau behavior yang dibawa, risiko bila API dibuat terlalu generic, dan keputusan folder yang kamu pilih. Jangan menyebut component sebagai shared hanya karena namanya umum.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/500 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Menyebut consumer nyata atau alasan belum ada reuse nyata.
Membedakan primitive generic dari vocabulary feature.
Menjelaskan risiko API yang terlalu generic.
Memilih folder berdasarkan owner serta perubahan yang mungkin terjadi.

Blok ini wajib untuk menyelesaikan lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Keputusan awal yang paling sehat untuk CourseProgressCard yang hanya dipakai feature courses adalah

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Shared UI cocok untuk primitive dengan contract serta behavior yang stabil lintas feature.
Component domain tetap dekat feature agar vocabulary dan perubahan product mudah dilacak.
Dua pemakaian yang mirip belum cukup; periksa goal, data shape, behavior, dan owner-nya.
Props boolean atau variant yang terus bertambah sering menjadi sinyal abstraction terlalu dini.
Berikutnya, service layer memisahkan data access dari UI tanpa membuat seluruh feature menjadi abstrak.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Dipakai dua kali belum otomatis berarti shared.

Memuat progres Review module