React

React مكتبة لبناء واجهات المستخدم من مكونات (components): دوال تستقبل خصائص (props) وتعيد وصفاً للواجهة بصيغة JSX. عندما تتغير البيانات تعيد React رسم الأجزاء المتأثرة فقط.

مكون بسيط

function Greeting({ name }) {
  return <p>مرحباً {name}</p>;
}

export default function App() {
  return <Greeting name="ليلى" />;
}

الحالة (State)

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount((c) => c + 1)}>نقرت {count} مرة</button>;
}

لا تعدّل الحالة مباشرة؛ استدعِ دالة التحديث دائماً، واستخدم الصيغة الدالية c => c + 1 عندما تعتمد القيمة الجديدة على السابقة.

القوائم والمفاتيح

<ul>
  {todos.map((t) => <li key={t.id}>{t.text}</li>)}
</ul>

المفتاح key يجب أن يكون ثابتاً وفريداً بين العناصر الشقيقة (مثل معرف من قاعدة البيانات)، لا رقم الفهرس إذا كان ترتيب القائمة يتغير.

التأثيرات (Effects)

useEffect لمزامنة المكون مع نظام خارجي (اشتراك، مؤقت، واجهة متصفح):

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);   // التنظيف عند الإزالة أو قبل التشغيل التالي
}, []);

لا تحتاج تأثيراً لحساب قيمة مشتقة من الحالة أو الخصائص؛ احسبها مباشرة أثناء الرسم.

قواعد الخطافات (Hooks)

• استدعِ الخطافات في المستوى الأعلى للمكون فقط، لا داخل شروط أو حلقات.
• استدعِها من مكونات React أو من خطافات مخصصة فقط.

أخطاء شائعة

• تعديل مصفوفة أو كائن في الحالة مباشرة (items.push) بدل إنشاء نسخة جديدة.
• نسيان مصفوفة الاعتماديات أو إغفال قيم مستخدمة داخل التأثير.
• تخزين قيم مشتقة في حالة منفصلة فتخرج عن التزامن.