Tıklama Sayacı

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 23 / 42.

State'in tetiklenmesi gerekir, bu da genellikle bir event ile olur. onClick kullanarak bir button ögesine bir function bağlayın ve içinde state'i değiştirin:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <p>{count}</p>
        </div>
    );
}

Döngü etrafındaki bir tıklamayı takip edin: tıkla → setCount(count + 1) → React yeniden işler (re-renders) → paragraf yeni sayıyı gösterir. Ok fonksiyonuna (arrow function) dikkat edin: onClick={() => setCount(count + 1)} daha sonra çağrılacak bir function iletir. onClick={setCount(count + 1)} yazmak, fonksiyonu işleme (rendering) sırasında hemen çağırır; bu da klasik bir hatadır.

Görev

Kolay

Klasik sayacı oluşturun.

Durum (state) ekleyin: 0 ile başlayan count (aktarım/import hazır).
Mevcut sayıyı id="count" olan span'in içinde gösterin.
+1 butonunun her tıklamada sayıyı 1 artırmasını sağlayın.

Kendin dene

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>