Latihan 1: useReducer — React

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

Buat counter dengan useReducer. Kode awal sudah punya function reducer dengan dua action, increment dan decrement. Biarkan begitu.

Di dalam App, ganti TODO-nya dengan const [state, dispatch] = useReducer(reducer, { count: 0 }). useReducer sudah tersedia di editor. Baris import boleh ditulis seperti di proyek sungguhan, tapi gak wajib.
Di dalam <div>, tulis berurutan: <button id="dec" onClick={() => dispatch({ type: "decrement" })}>-</button>, <span id="count">{state.count}</span>, dan <button id="inc" onClick={() => dispatch({ type: "increment" })}>+</button>.

Yang dicek: #count berbunyi 0 saat pertama tampil. Sekali klik #inc membuatnya 1. Dari awal lagi, dua klik #inc membuatnya 2. Dari awal lagi, sekali klik #dec membuatnya -1. Kodenya juga harus memakai useReducer.

Hint

State-nya gak diubah langsung. Tombol cuma mengirim action, dan reducer yang sudah ada yang menghitung count berikutnya.
Panggil useReducer(reducer, { count: 0 }) untuk mendapat [state, dispatch]. Tampilkan state.count, dan tiap tombol memanggil dispatch dengan type-nya sendiri.
const [state, dispatch] = useReducer(reducer, { count: 0 }) lalu <button id="inc" onClick={() => dispatch({ type: "increment" })}>+</button> dan <span id="count">{state.count}</span>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: useReducer — React

Hint

Memperbarui Aplikasi