عداد النقرات

جزء من قسم الأساسيات في رحلة 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>