Latihan 1: Fetching Data — React

Latihan 1 dari materi Fetching Data di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Tampilkan status loading yang berganti sendiri setelah server menjawab. Kode awal sudah punya tungguServer(), server tiruan yang menjawab 0,4 detik setelah diminta, seperti fetch sungguhan yang butuh waktu.

Di dalam App, simpan status loading di state yang mulai dari true: const [loading, setLoading] = useState(true).
Pasang useEffect dengan dependency array kosong []. Di dalamnya, minta ke server lalu matikan loading setelah jawabannya datang: tungguServer().then(() => setLoading(false)).
Kembalikan <p id="status"> yang isinya Memuat... selama loading bernilai true, dan Data siap! kalau sudah false.

Baris import { useState, useEffect } from "react" di kode awal mengambil kedua hook dari React. Biarkan.

Yang dicek: elemen #status ada, kodenya memakai useState( dan useEffect(, effect-nya memanggil tungguServer(, dan setelah server menjawab, teks #status persis Data siap!. Pemeriksanya menunggu sampai sekitar satu detik, jadi jawaban 0,4 detik terbaca.

Hint

Status loading disimpan di state dan mulai dari true. Setelah komponen tampil, effect meminta ke server, dan baru setelah jawabannya datang loading diubah jadi false.
Strukturnya: const [loading, setLoading] = useState(true), lalu useEffect(() => { ... }, []) yang memanggil tungguServer().then(...). Di dalam then, panggil setLoading(false). Di JSX, pilih teksnya dengan operator ternary.
useEffect(() => { tungguServer().then(() => setLoading(false)) }, []) lalu return <p id="status">{loading ? "Memuat..." : "Data siap!"}</p>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Fetching Data — React

Hint

Memperbarui Aplikasi