Latihan 1: State dengan useState — React

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

Buat counter di komponen App yang sudah ada:

Simpan count dengan useState, mulai dari 0: const [count, setCount] = useState(0).
Tampilkan count di dalam <span id="count">.
Tambahkan <button id="increment">+1</button> yang onClick-nya memanggil setCount untuk menaikkan count sebanyak 1.

Baris pertama kode awal, import { useState } from "react", mengambil hook-nya dari React, persis seperti di proyek sungguhan. Biarkan baris itu.

Yang dicek:

Sebelum diklik, #count berisi persis 0.
Sesudah #increment diklik sekali, #count berisi 1.
Dari awal lagi, sesudah #increment diklik dua kali, #count berisi 2.
Kodenya memanggil useState(...).

Hint

Angka yang harus diingat di antara render disimpan di state, bukan di variabel biasa, dan diganti lewat setter-nya supaya React render ulang.
Panggil const [count, setCount] = useState(0) di awal App. Taruh {count} di dalam span id count, dan pasang onClick di button id increment yang memanggil setCount.
return ( <div> <span id="count">{count}</span> <button id="increment" onClick={() => setCount(count + 1)}>+1</button> </div> )

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: State dengan useState — React

Hint

Memperbarui Aplikasi