Proje: Sayaç uygulaması

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.

Örnek çözümü göster

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;

Kendini test et

Bu projede hangi hook kullanılır?
```
useState remembers the changing number.
```
- useRef
- useEffect
- useContext
- useState
Cevabı göster

useState — Sayıyı tutmak için useState kullanılır.

Proje: Sayaç uygulaması: eksik parçayı tamamla

const [count, setCount] = useState(____);

Cevabı göster

const [count, setCount] = useState(0);

Proje: Sayaç uygulaması: kavramları eşleştir

count

Sayı state
setCount

Güncelleyici
handleUp

Artırma handler
onClick

Tıklama olayı

Sıradaki ders: Sayı ve buton

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler