Azaltma ve sıfırlama
- React kursu
- Başlangıç
- Ders 47/84
- 5 dk
Azalt ve sıfırla butonlarını eklersin.
Üç düğmeli sayaç
Artırma, azaltma ve sıfırlamayı birleştirip tam bir sayaç elde ederiz. Üç düğme yan yana, ortada güncel sayı.
Düzen: <><button>-</button><span>{count}</span><button>+</button></>. Sıfırlama düğmesini altına veya yana koyabilirsin.
Bu yapı, gerçek bir arayüz bileşeninin küçük ama tam örneğidir. Üç düğme tek bir state'i paylaşır; her tıklama aynı sayaç değerini günceller.
Güncel sayı gösterimi
Güncel sayıyı bir <span> veya <output> içinde gösteririz. Süslü parantez {count} sayıyı metne çevirip çizer.
Her tıklamada state değişir, React yeniden çizer ve span güncellenir. Bu otomatik akış React'in temelidir.
Manuel DOM güncellemesi yok; React senin yerine halleder. Span'ı istediğin etiketle değiştirebilirsin; önemli olan süslü parantez içinde {count} kullanmaktır.
Uygulama Tam sayaç
Aşağıdaki iskeleti tamamla. Counter bileşeni yaz; useState'i içe aktar. const [count, setCount] = useState(0); tanımla. handleUp içinde setCount(count + 1), handleDown içinde setCount(count - 1) çağır. <> içinde <button onClick={handleDown}>-</button>, <span>{count}</span> ve <button onClick={handleUp}>+</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); }
function handleDown() { setCount(count - 1); }
return <><button onClick={handleDown}>-</button><span>{count}</span><button onClick={handleUp}>+</button></>;
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Üç düğmeyi tek return'de nasıl döndürürsün?
React wants one root; a fragment adds no node.- Virgülle ayırarak
- Fragment içine alarak Doğru cevap
- array olarak
- ayrı return'lerle
Açıklama: Fragment <></> içine alarak tek kök yaparsın.
2 Azaltma ve sıfırlama: eksik parçayı tamamla
<button onClick={handleUp}>+</button><span>____</span><button onClick={handleUp}>+</button><span>{count}</span>Açıklama: Sayıyı span içinde gösterdin.
3 Azaltma ve sıfırlama: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
+ |
Artırma |
- |
Azaltma |
{count} |
Sayı gösterimi |
Sıfırla |
Reset |