📋 تعلم كيفية عرض القوائم في React بسهولة تامة

في هذا الدرس، سنتعلم كيفية عرض القوائم والبيانات بشكل ديناميكي في React، وهي واحدة من أهم المهارات التي تحتاجها لبناء تطبيقات تفاعلية احترافية.

🎯 ما هي القوائم في React؟

القوائم (Lists) في React تعني عرض مجموعة من العناصر المتشابهة بشكل متكرر. تخيل أنك تريد عرض قائمة أسماء، منتجات، أو تعليقات - كل هذه أمثلة على القوائم التي سنتعلم عرضها.

// مثال على بيانات قد نريد عرضها كقائمة
const fruits = ['تفاح', 'موز', 'برتقال', 'فراولة'];

🔄 استخدام دالة map() لعرض القوائم

أداة React الأساسية لعرض القوائم هي دالة map() المدمجة في JavaScript. هذه الدالة تأخذ مصفوفة وتحول كل عنصر فيها إلى عنصر React.

function FruitList() {
  const fruits = ['تفاح', 'موز', 'برتقال'];
  
  return (
    <ul>
      {fruits.map((fruit) => (
        <li>{fruit}</li>
      ))}
    </ul>
  );
}

🔑 أهمية خاصية Key الفريدة

عند عرض القوائم، يحتاج React إلى معرفة كيفية تمييز كل عنصر عن الآخر. لهذا نستخدم خاصية key الفريدة لكل عنصر.

function FruitList() {
  const fruits = ['تفاح', 'موز', 'برتقال'];
  
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}
// Note: نستخدم index كـ key فقط عندما لا يكون لدينا id فريد

🏗️ مثال عملي: قائمة مهام بسيطة

لنطبق ما تعلمناه على مثال واقعي - قائمة مهام تفاعلية:

function TodoList() {
  const tasks = [
    { id: 1, text: 'تعلم React' },
    { id: 2, text: 'ممارسة JavaScript' },
    { id: 3, text: 'بناء مشروع صغير' }
  ];

  return (
    <div>
      <h2>قائمة المهام اليومية</h2>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            {task.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

💡 نصائح مهمة عند العمل مع القوائم

  1. استخدم key فريد دائماً: تجنب استخدام index كـ key عندما تكون البيانات قابلة للتغيير
  2. افصل المنطق: يمكنك استخراج عرض العنصر في مكون منفصل
  3. اختبار الأداء: القوائم الكبيرة قد تحتاج إلى تقنيات تحسين أداء إضافية
// مثال لفصل المنطق
function TaskItem({ task }) {
  return <li>{task.text}</li>;
}

function TodoList() {
  const tasks = [...]; // مصفوفة المهام
  
  return (
    <ul>
      {tasks.map((task) => (
        <TaskItem key={task.id} task={task} />
      ))}
    </ul>
  );
}