التصيير الشرطي في React - دليل شامل للمبتدئين

🎯 التصيير الشرطي في React: دليلك الشامل للمبتدئين

التصيير الشرطي (Conditional Rendering) هو أحد أهم المفاهيم في React الذي يسمح لك بعرض مكونات مختلفة بناءً على شروط معينة. إنه يشبه تماماً عبارات if-else في JavaScript ولكن مطبق على واجهة المستخدم.

📌 ما هو التصيير الشرطي؟

التصيير الشرطي يعني ببساطة: "عرض شيء ما فقط إذا تحقق شرط معين". في React، نستخدم هذا المفهوم لعرض عناصر JSX مختلفة حسب حالة التطبيق.

مثال بسيط: إظهار رسالة ترحيب إذا كان المستخدم مسجلاً دخوله، أو إظهار زر تسجيل دخول إذا لم يكن مسجلاً.

🔧 الطرق الأساسية للتصيير الشرطي

1. استخدام عبارات if-else التقليدية

هذه الطريقة مألوفة لأي مبرمج يعرف JavaScript:

function WelcomeMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>مرحباً بعودتك! 👋</h1>;
  } else {
    return <h1>يرجى تسجيل الدخول 🔐</h1>;
  }
}

2. استخدام العامل الثلاثي (Ternary Operator)

طريقة أكثر إيجازاً للشروط البسيطة:

function UserStatus({ isOnline }) {
  return (
    <div>
      <p>الحالة: {isOnline ? 'متصل' : 'غير متصل'}</p>
    </div>
  );
}

3. استخدام العامل المنطقي AND (&&)

مثالية عندما تريد عرض شيء ما فقط إذا تحقق الشرط:

function Notification({ hasNewMessages }) {
  return (
    <div>
      <h2>الرسائل</h2>
      {hasNewMessages && <div className="badge">رسائل جديدة! 📩</div>}
    </div>
  );
}

🎯 مثال عملي متكامل

لنطبق ما تعلمناه في مثال واقعي:

function UserProfile({ user }) {
  return (
    <div className="profile">
      <h2>الملف الشخصي</h2>
      {user ? (
        <div>
          <p>اسم المستخدم: {user.name}</p>
          <p>البريد الإلكتروني: {user.email}</p>
          {user.isAdmin && <p>⚡ أنت مشرف</p>}
        </div>
      ) : (
        <p>⚠️ لم يتم تسجيل الدخول بعد</p>
      )}
    </div>
  );
}

في هذا المثال:

• إذا كان user موجوداً (ليس null أو undefined)، نعرض معلومات المستخدم
• إذا كان المستخدم مشرفاً، نعرض رسالة إضافية
• إذا لم يكن هناك مستخدم، نعرض رسالة تنبيه

💡 نصائح مهمة للمبتدئين

1. حافظ على البساطة: ابدأ بالطرق البسيطة قبل التوجه للحلول المعقدة
2. تجنب التعقيد: إذا أصبح الشرط معقداً، فكر في تقسيمه إلى مكونات أصغر
3. القيم undefined و null: تذكر أن React لا تعرض هذه القيم، مما يساعد في تجنب الأخطاء

⚠️ الأخطاء الشائعة التي يجب تجنبها

// خطأ: محاولة استخدام if-else مباشرة في JSX
function WrongExample() {
  return (
    <div>
      {if (true) { return <p>هذا خطأ! ❌</p> }}
    </div>
  );
}

// الصحيح: استخدام العامل الثلاثي بدلاً من ذلك
function CorrectExample() {
  return (
    <div>
      {true ? <p>هذا صحيح! ✅</p> : null}
    </div>
  );
}

🚀 ماذا سنتعلم في الدرس القادم؟

في الدرس التالي، سنتعلم عن "Rendering Lists" في React. سنكتشف كيفية عرض قوائم البيانات ديناميكياً باستخدام دالة map()، وكيفية التعامل مع المفاتيح الفريدة (Keys) لتحسين أداء التطبيق. ستتعلم كيفية تحويل مصفوفات البيانات إلى عناصر واجهة مستخدم تفاعلية بسهولة!