عداد النقرات

جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 23 من 42.

تحتاج الحالة (State) إلى محفز، وعادة ما يكون ذلك حدثًا (event). قم بربط دالة بـ button باستخدام onClick وقم بتغيير الحالة بداخلها:

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>
    );
}

تتبع نقرة واحدة حول الحلقة: نقر ← setCount(count + 1) ← يعيد React العرض (re-renders) ← تظهر الفقرة العدد الجديد. لاحظ الدالة السهمية (arrow function): onClick={() => setCount(count + 1)} تمرر دالة ليتم استدعاؤها لاحقًا. أما كتابة onClick={setCount(count + 1)} فستؤدي إلى استدعائها فورًا أثناء العرض، وهو خطأ برمجي شائع.

التحدي

سهل

قم ببناء عدّاد كلاسيكي.

أضف حالة (state): count تبدأ من 0 (الاستيراد جاهز).
اعرض العدّ الحالي داخل عنصر الـ span الذي يمتلك id="count".
اجعل زر +1 يزيد العدّ بمقدار 1 عند كل نقرة.

جرّب بنفسك

<!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>