Azaltma ve sıfırlama

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.

Örnek çözümü göster

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;

Kendini test et

Üç 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
- array olarak
- ayrı return'lerle
Cevabı göster

Fragment içine alarak — Fragment <></> içine alarak tek kök yaparsın.

Azaltma ve sıfırlama: eksik parçayı tamamla

<button onClick={handleUp}>+</button><span>____</span>

Cevabı göster

<button onClick={handleUp}>+</button><span>{count}</span>

Azaltma ve sıfırlama: kavramları eşleştir

+

Artırma
-

Azaltma
{count}

Sayı gösterimi
Sıfırla

Reset

Sıradaki ders: Sınır kontrolü

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler