Intermediate · Level 7: React FundamentalsIntermediate35 menitBahasa Indonesia

Apa Itu Component?

Melihat UI sebagai potongan kecil yang bisa disusun dan dipakai ulang.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan component sebagai bagian UI reusable
Mengidentifikasi component di sebuah tampilan
Membaca component function React sederhana

ReactComponentsUI Tree

Isi lesson

5 blok

1.
React mengajak kamu memecah UIBelum selesaiWajib
2.
Bayangkan dashboard sebagai susunan komponenBelum selesaiWajib
3.
Component function pertamaBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

React mengajak kamu memecah UI

Wajib

Sebelum React, kamu sudah membangun UI dengan HTML, CSS, JavaScript, dan TypeScript. React tidak mengganti semua fondasi itu. React memberi cara untuk menyusun UI sebagai potongan kecil yang disebut component.

Component adalah function yang mengembalikan UI. Potongan ini bisa dipakai ulang, disusun dengan component lain, dan diberi data lewat props. Untuk awal, pikirkan component seperti bagian UI yang punya nama: Header, LessonCard, ProgressBar, atau Button.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Bayangkan dashboard sebagai susunan komponen

Satu halaman dashboard bisa terdiri dari Sidebar, Topbar, StatsCard, LessonList, dan ProfileMenu. Setiap bagian tetap berisi HTML di dalamnya, tetapi React memberi nama dan batas yang jelas untuk tiap bagian.

Bagian ini memengaruhi progres lesson.

Component function pertama

Wajib

tsx

function LessonCard() {
  return (
    <article className="lesson-card">
      <h2>Component Model</h2>
      <p>Belajar menyusun UI dengan React component.</p>
    </article>
  );
}

Nama component dimulai dengan huruf besar. Function ini mengembalikan JSX, yaitu markup yang ditulis di dalam JavaScript atau TypeScript.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Mana contoh nama React component yang paling tepat?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Component adalah bagian UI yang diberi nama dan bisa disusun.
React component adalah function yang mengembalikan JSX.
Nama component diawali huruf besar.
Component membantu UI besar dibaca sebagai susunan bagian kecil.
Berikutnya, kamu akan belajar JSX sebagai cara React menulis markup.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: React mengajak kamu memecah UI.

Memuat progres Review module