Advanced · Level 16: Frontend ArchitectureAdvanced65 menitBahasa Indonesia

Content-Driven Rendering

Merender UI dari content data yang typed ketika item memiliki shape dan behavior tampilan yang sama, tanpa menyembunyikan variasi product yang penting.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan content data terstruktur dari JSX yang diulang manual
Mendesain type content yang cukup untuk kebutuhan render dan accessibility
Merender list dengan key stabil serta link yang memiliki label jelas
Menghindari data-driven abstraction ketika setiap item memiliki workflow yang benar-benar berbeda

ReactContent-Driven RenderingTypeScriptListsAccessibility

Isi lesson

6 blok

1.
Data yang rapi sering menghasilkan component yang lebih rapiBelum selesaiWajib
2.
Daftar resource dari content yang typedBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Content shape juga merupakan contractBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Data yang rapi sering menghasilkan component yang lebih rapi

Wajib

Jika sebuah course page memiliki beberapa resource dengan struktur sama, menyalin tiga block JSX membuat perubahan copy, link, dan metadata mudah tidak konsisten. Content-driven rendering memisahkan fakta yang berubah per item dari struktur UI yang stabil. Component menerima resources dengan id, title, description, href, dan source; lalu satu mapping menentukan bagaimana setiap item ditampilkan.

Jangan memaksa semua UI menjadi array data. Jika satu resource memiliki permission flow, satu lagi membuka dialog konfirmasi, dan satu lagi menjadi form dengan validation, menyamakan semuanya sebagai ResourceCard dapat menyembunyikan perbedaan behavior yang penting. Gunakan content data ketika item memiliki shape serta interaction contract yang cukup sama. Type content menjadi tempat untuk menegaskan field wajib sebelum JSX dirender.

Bagian ini memengaruhi progres lesson.

Daftar resource dari content yang typed

Wajib

tsx

type CourseResource = {
  id: string;
  title: string;
  description: string;
  href: string;
  source: "MDN" | "React" | "Next.js";
};

type CourseResourcesProps = {
  resources: CourseResource[];
};

export function CourseResources({ resources }: CourseResourcesProps) {
  return (
    <ul>
      {resources.map((resource) => (
        <li key={resource.id}>
          <a href={resource.href}>
            {resource.title} ({resource.source})
          </a>
          <p>{resource.description}</p>
        </li>
      ))}
    </ul>
  );
}

id menjadi key stabil, title menjadi accessible link text, description menjelaskan alasan resource relevan, dan source memberi context sebelum learner berpindah halaman. Component tidak perlu menerima five prop arrays terpisah atau object unknown. Saat content bertambah, caller menambah satu object dengan shape yang sama; struktur list serta semantics link tetap dirawat di satu tempat.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Render course resources from content

Buat CourseResources yang merender resource typed dengan key stabil, link text jelas, description, dan source metadata.

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.

7 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kapan content-driven rendering paling tepat dipakai?

Progres lesson naik setelah jawaban benar.

Catatan penting

Opsional

Content shape juga merupakan contract

Jangan menyimpan JSX, string HTML, atau config tanpa type yang jelas hanya agar content terlihat fleksibel. Type content membantu author mengetahui field wajib, membantu component merender semantics yang konsisten, dan membuat perubahan copy atau source dapat diperiksa sebelum release. Bila satu field hanya dipakai satu item karena exception, evaluasi apakah item itu seharusnya keluar dari pattern data ini.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Content-driven rendering memisahkan data yang berubah dari struktur UI yang stabil.
Type content menjelaskan field wajib dan mencegah item tidak lengkap masuk ke component.
Key stabil, link text yang jelas, dan metadata source adalah bagian dari render contract.
Jangan menyatukan item dengan workflow berbeda hanya demi satu abstraction data.
Berikutnya, usage example menunjukkan cara consumer memakai contract component secara nyata.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Data yang rapi sering menghasilkan component yang lebih rapi.

Memuat progres Review module