Proje: Sayaç uygulaması
- React kursu
- Başlangıç
- Ders 45/84
- 4 dk
Sayaç uygulamasının amacını ve adımlarını gözden geçirirsin.
Proje: Sayaç uygulaması
Bu projede etkileşimli bir sayaç kuracağız. Üç adım var: sayıyı gösteren düğme, azaltma ve sıfırlama, sonra 0–10 arası sınır kontrolü.
Her ders bir öncekinin üzerine çıkar; state'i ve olayları birlikte kullanırız. Bu, useState grubunun doğal uygulamasıdır.
Önce uygulamanın iskeletini ve state'i çıkaralım.
Artırma düğmesi
Sayaç state'i count, güncelleyici setCount. Artırma düğmesi onClick ile setCount(count + 1) çağırır.
Düğmenin metni güncel sayıyı gösterir: <button onClick={handleUp}>{count}</button>. Her tıklamada React yeniden çizer ve yeni sayı görünür.
Bu, state + olay kombinasyonunun en küçük örneğidir.
Uygulama Sayaç iskeleti
Aşağıdaki iskeleti tamamla. Counter bileşeni yaz; useState'i içe aktar. const [count, setCount] = useState(0); tanımla. handleUp fonksiyonunda setCount(count + 1) çağır. <button onClick={handleUp}>{count}</button> döndür. Dışa aktar.
Başlangıç kodu
import { useState } from "react";
// Counter bileşenini buraya tanımlaÖrnek çözüm
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function handleUp() { setCount(count + 1); }
return <button onClick={handleUp}>{count}</button>;
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu projede hangi hook kullanılır?
useState remembers the changing number.- useRef
- useEffect
- useContext
- useState Doğru cevap
Açıklama: Sayıyı tutmak için useState kullanılır.
2 Proje: Sayaç uygulaması: eksik parçayı tamamla
const [count, setCount] = useState(____);const [count, setCount] = useState(0);Açıklama: Sayaç sıfırdan başlar.
3 Proje: Sayaç uygulaması: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
count |
Sayı state |
setCount |
Güncelleyici |
handleUp |
Artırma handler |
onClick |
Tıklama olayı |