React • المستوى الثاني • الدرس 2

إدارة الحالة التفاعلية (useState Hook)

أهداف الدرس العلمية

استيعاب مفهوم حالة المكون (State) والفرق بينها وبين الخصائص (Props).
استخدام الخطاف useState لإعادة رسم الواجهة (Re-render) فور تعديل البيانات.
التمييز بين قيمة الحالة ودالة التحديث المُرجعة من useState.
ربط الأحداث (onClick) بتحديث الحالة لبناء واجهات تفاعلية.

1. ما هو Hook useState؟

useState هو خطاف (Hook) يمنح المكوّن القدرة على الاحتفاظ بمتغيرات حالة حية تتغير بناءً على تفاعل المستخدم. عند تحديث الحالة، يُعيد React رسم المكوّن تلقائياً لعرض القيمة الجديدة.

javascript

import React, { useState } from 'react';

function Counter() {
  // count = القيمة الحالية
  // setCount = دالة لتحديث القيمة
  // 0 = القيمة الابتدائية
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      العداد: {count}
    </button>
  );
}

2. الفرق بين Props و State

Props (الخصائص)

• تُمرَّر من الأب
• للقراءة فقط (Read-Only)
• لا يمكن تعديلها داخل المكوّن
• تُستخدم للبيانات الثابتة

State (الحالة)

• يُعرَّف داخل المكوّن
• قابل للتعديل
• يُحدَّث عبر دالة setX
• تغييره يُعيد الرسم

التطبيق العملي المباشر

تحدي الدرس الثاني: إضافة زر الإنقاص

قم بالتعديل على الكود في المحرر أدناه:

أضف زراً ثانياً بعنوان "إنقاص -1".
اربطه بالحدث onClick لاستدعاء setCount(count - 1).
اختر لوناً مختلفاً للزر (مثل الأحمر #dc2626) لتمييزه بصرياً.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الثالث