React • المستوى الأول • الدرس 4

القواعد المتقدمة للـ JSX والتركيب الهيكلي

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

استخدام React Fragments <></> لتغليف العناصر دون إضافة HTML extra.
إجراء العرض الشرطي البسيط (Conditional Rendering) داخل JSX.
استخدام المعامل الثلاثي (? و :) داخل JSX.
فهم كيف يعيد React رندر المكونات تلقائياً عند تغير القيم.

1. الأقواس الفارغة (React Fragments)

تتيح لك <> </> إرجاع عدة عناصر من المكون دون إحاطتها بعنصر <div> زائد في المتصفح. هذا يجعل شجرة DOM أنظف وأسرع.

javascript

// ❌ بدون Fragment — div زائد في DOM
return (
  <div>
    <h1>عنوان</h1>
    <p>فقرة</p>
  </div>
);

// ✅ مع Fragment — لا عنصر زائد
return (
  <>
    <h1>عنوان</h1>
    <p>فقرة</p>
  </>
);

2. العرض الشرطي (Conditional Rendering)

يمكنك داخل JSX كتابة تعبيرات شرطية باستخدام المعامل الثلاثي ? لعرض عنصر أو آخر بحسب شرط:

javascript

const isLogged = true;

return (
  <div>
    <h1>لوحة التحكم</h1>
    {isLogged 
      ? <p>مرحباً بك مجدداً!</p>   // ✅ إذا كانت true
      : <p>يرجى تسجيل الدخول</p>    // ❌ إذا كانت false
    }
  </div>
);

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

تحدي الدرس الرابع: العرض الشرطي

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

غيّر قيمة المتغير isLogged من true إلى false.
لاحظ كيف يتغير النص المعروض من "مرحباً بك مجدداً!" إلى "يرجى تسجيل الدخول".
حافظ على استخدام React Fragments <></> كما هو.

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

الدرس السابق الانتقال للمستوى الثاني