Latihan 1: Server Components — React

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

Di proyek Next.js, counter ini adalah Client Component. Editor latihan menjalankan React biasa di browser, jadi tulis saja di App. Kode awal sudah berisi function App() dengan <div> yang masih kosong.

Simpan count mulai dari 0 dengan useState.
Render <p id="count"> berisi count.
Render <button id="increment">+1</button> yang menaikkan count satu setiap kali ditekan, lewat onClick.

Baris "use client" boleh ditulis di paling atas, boleh juga gak: di sini semuanya sudah jalan di browser.

Yang dicek:

Sebelum ada yang ditekan, #count berisi persis 0.
#increment ada.
Kodenya memanggil useState(.
Sesudah #increment ditekan dua kali, #count berisi persis 2.

Hint

Bagian yang berubah waktu diklik butuh state. Angkanya disimpan dengan useState, lalu ditampilkan di paragraf.
const [count, setCount] = useState(0). Tampilkan {count} di <p id="count">, dan <button id="increment"> memanggil setCount lewat onClick.
return (<div><p id="count">{count}</p><button id="increment" onClick={() => setCount(count + 1)}>+1</button></div>)

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Server Components — React

Hint

Memperbarui Aplikasi