Lompat ke konten utama
←

React Dasar

Pelajaran 4 dari 17

Komponen dan JSX

Misi: papan menu warung

Setelah pelajaran ini kamu bisa menyusun beberapa komponen menjadi satu papan menu: komponen di tingkat teratas, Fragment, atribut camelCase, kurung kurawal untuk data, dan gaya inline berupa objek.

±17 menitDiperiksa 24 Okt 2026

Latihan di pelajaran ini butuh akun gratis. Progres, kode, dan catatanmu hanya tersimpan di browser ini. Masuk untuk menyimpannya

Materi

Warung Makan Bu Tini di Solo memasang layar di dekat kasir. Isinya kop warung, menu andalan hari ini, dan catatan harga. Datanya disimpan di objek WARUNG dan ANDALAN, supaya pemilik cukup mengubah data tanpa menyentuh markup. Setiap latihan memakai data yang sama dan memeriksa bagian layar yang berbeda; tes mengubah isi data untuk memastikan tidak ada teks yang ditulis mati.

const WARUNG = { nama: "Warung Makan Bu Tini", kota: "Solo", buka: "07.00", tutup: "21.00" };
const ANDALAN = { nama: "Nasi liwet", harga: 15000, foto: "nasi-liwet.jpg" };

Latihan

0/4 lulus

Misi akhir modul: luluskan minimal 4 dari 4 tugas. Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 4 dari 4

Pemilik warung menulis komponen Kop di dalam fungsi Papan, seperti kode di bawah. Papannya tampil benar. Apa kata dokumentasi React tentang pola ini?

export default function Papan() {
  function Kop() {
    return <h1>{WARUNG.nama}</h1>;
  }
  return <Kop />;
}
Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke

Tampilkan 1 lagi