FluentStack

Component-Ready Data Shapes

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 6: TypeScriptIntermediate45 menitBahasa Indonesia

Component-Ready Data Shapes

Membentuk data mentah menjadi data yang lebih bersih sebelum dikirim ke bagian UI.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan raw data dan data siap UI
  • Membuat type untuk shape yang nyaman dipakai component
  • Menulis transform kecil dari response ke UI model
TypeScriptUI DataReact Preparation

Isi lesson

5 blok
  1. 1.
    UI tidak harus menerima data mentahBelum selesaiWajib
  2. 2.
    Dari raw response ke card dataBelum selesaiWajib
  3. 3.
    Bentuk data sebelum renderBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    RingkasanBelum selesaiWajib

UI tidak harus menerima data mentah

Wajib

Saat nanti masuk React, component akan lebih nyaman jika menerima data yang sudah bersih. Data dari API sering memakai nama property yang berbeda, field nullable, atau nilai yang masih perlu diformat.

Component-ready data shape berarti kamu membuat bentuk data yang sesuai kebutuhan UI. Ini bukan React implementation dulu. Ini persiapan agar component nanti tidak penuh dengan pengecekan dan transform kecil yang tersebar.

Bagian ini memengaruhi progres lesson.

Dari raw response ke card data

Wajib
ts
type CourseResponse = {
  course_id: string;
  course_title: string;
  estimated_minutes: number;
};

type CourseCardData = {
  id: string;
  title: string;
  durationLabel: string;
};

function toCourseCardData(course: CourseResponse): CourseCardData {
  return {
    id: course.course_id,
    title: course.course_title,
    durationLabel: course.estimated_minutes + " menit",
  };
}

Raw response mengikuti bentuk dari API. CourseCardData mengikuti kebutuhan UI. Transform kecil membuat batasnya jelas.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Bentuk data sebelum render

Jika UI berulang kali melakukan rename property, format label, atau handle nullable value, pertimbangkan membuat UI data type dan transform function. Ini membuat component nanti lebih fokus ke tampilan.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Buat data shape siap UI

Latihan mengubah raw API response menjadi data yang lebih nyaman dipakai component.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis3 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Raw data mengikuti sumber data, bukan selalu kebutuhan UI.
  • Component-ready data shape membuat data lebih enak dipakai di UI.
  • Transform function adalah boundary antara response dan render.
  • Persiapan ini membuat React component nanti lebih sederhana.
  • Berikutnya, kamu akan mengetik reusable frontend logic.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: UI tidak harus menerima data mentah.

Memuat progresReview module