شرح JSX If Statements في React - دليل شامل للمبتدئين

🎯 دليل شامل لاستخدام JSX If Statements في React

اليوم سنتعلم كيفية استخدام العبارات الشرطية (If Statements) داخل JSX في React، وهي مهارة أساسية للتحكم في عرض العناصر بناءً على شروط معينة.

📝 ما هي JSX If Statements؟

في React، لا يمكننا استخدام عبارات if التقليدية مباشرة داخل JSX لأن JSX هي مجرد syntactic sugar لاستدعاءات الدوال. لكن لدينا عدة طرق ذكية لتنفيذ الشروط داخل JSX.

🔧 الطريقة الأولى: استخدام Ternary Operator

أسهل طريقة لكتابة شروط if في JSX هي باستخدام Ternary Operator (العامل الثلاثي):

function WelcomeMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>مرحباً بعودتك! 👋</h1>
      ) : (
        <h1>يرجى تسجيل الدخول أولاً 🔐</h1>
      )}
    </div>
  );
}
// الشرط: إذا كان isLoggedIn true يعرض رسالة الترحيب، وإلا رسالة تسجيل الدخول

⚡ الطريقة الثانية: استخدام Logical && Operator

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

function Notification({ hasNewMessages }) {
  return (
    <div>
      <h2>لوحة الإشعارات</h2>
      {hasNewMessages && (
        <div className="alert">
          لديك رسائل جديدة! 📩
        </div>
      )}
    </div>
  );
}
// يعرض التنبيه فقط إذا كان hasNewMessages true

🛠️ الطريقة الثالثة: كتابة الشروط خارج JSX

أحياناً يكون من الأفضل كتابة الشروط المعقدة خارج return:

function UserProfile({ user }) {
  let profileContent;
  
  if (user) {
    profileContent = (
      <div>
        <h3>{user.name}</h3>
        <p>{user.email}</p>
      </div>
    );
  } else {
    profileContent = <p>جارٍ تحميل البيانات... ⏳</p>;
  }
  
  return (
    <div className="profile">
      {profileContent}
    </div>
  );
}
// يتم تحديد المحتوى المعروض بناءً على وجود بيانات المستخدم

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

1. الأقواس المتعرجة {} هي بوابة JavaScript داخل JSX
2. استخدم Ternary للاختيار بين عنصرين
3. استخدم && للعرض الشرطي لعنصر واحد
4. احتفظ بالشروط المعقدة خارج JSX للوضوح

function TaskList({ tasks }) {
  const hasTasks = tasks && tasks.length > 0;
  
  return (
    <div>
      {hasTasks ? (
        <ul>
          {tasks.map(task => (
            <li key={task.id}>{task.title}</li>
          ))}
        </ul>
      ) : (
        <p>لا توجد مهام حالياً ✅</p>
      )}
    </div>
  );
}
// مثال يدمج بين الطرق المختلفة

🚀 تجنب هذه الأخطاء الشائعة

❌ لا تكتب if statements مباشرة داخل JSX:

// خطأ: هذا لن يعمل!
{
  if (condition) {
    <Component />
  }
}

✅ بدلاً من ذلك استخدم الطرق الصحيحة المذكورة أعلاه.

🎓 خلاصة الدرس

تعلمنا اليوم ثلاث طرق رئيسية لاستخدام الشروط في JSX:

1. Ternary Operator (? :) للاختيار بين بديلين
2. Logical AND (&&) للعرض الشرطي
3. الشروط خارج JSX للحالات المعقدة

هذه التقنيات أساسية للتحكم الديناميكي في واجهة المستخدم بناءً على حالة التطبيق.