تعلم JSX Expressions في React - دليل شامل للمبتدئين

✨ مقدمة إلى JSX Expressions في React

JSX Expressions هي واحدة من أهم الميزات في React التي تسمح لنا بكتابة JavaScript داخل تركيب HTML. هذا يعني أنه يمكننا جعل واجهاتنا أكثر ديناميكية وتفاعلية بسهولة كبيرة.

🔍 ما هي JSX Expressions؟

JSX Expressions تتيح لنا تنفيذ تعابير JavaScript داخل أكواد JSX. نستخدم الأقواس المعقوفة {} لوضع أي تعبير JavaScript نريد تنفيذه داخل تركيب HTML.

function Welcome() {
  const name = "أحمد";
  
  return (
    <div>
      <h1>مرحباً {name}!</h1>
    </div>
  );
}

في المثال أعلاه، قمنا بدمج متغير JavaScript داخل عنصر HTML باستخدام الأقواس المعقوفة.

📝 استخدام المتغيرات في JSX

يمكننا استخدام أي متغير JavaScript داخل JSX Expressions بشرط أن يعود بقيمة يمكن عرضها (نص، رقم، etc).

function UserProfile() {
  const userName = "سارة";
  const userAge = 25;
  
  return (
    <div>
      <p>اسم المستخدم: {userName}</p>
      <p>العمر: {userAge} سنة</p>
    </div>
  );
}

🧮 العمليات الحسابية في JSX

يمكننا إجراء عمليات حسابية مباشرة داخل JSX Expressions:

function Calculator() {
  const num1 = 10;
  const num2 = 5;
  
  return (
    <div>
      <p>الجمع: {num1 + num2}</p>
      <p>الضرب: {num1 * num2}</p>
    </div>
  );
}

🔄 استخدام الدوال في JSX

يمكننا استدعاء الدوال التي تعود بقيم داخل JSX Expressions:

function Greeting() {
  function getGreeting() {
    return "أهلاً وسهلاً!";
  }
  
  return (
    <div>
      <h2>{getGreeting()}</h2>
    </div>
  );
}

⚡ التعبيرات الشرطية البسيطة

يمكننا استخدام المشغل الثلاثي (Ternary Operator) لاتخاذ قرارات بسيطة داخل JSX:

function WelcomeMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>مرحباً بعودتك!</p> : <p>يرجى تسجيل الدخول</p>}
    </div>
  );
}

🛡️ استخدام Logical AND للعرض الشرطي

طريقة أخرى للعرض الشرطي باستخدام المشغل المنطقي AND:

function Notification({ hasNewMessages }) {
  return (
    <div>
      {hasNewMessages && <p>لديك رسائل جديدة!</p>}
    </div>
  );
}

💡 نصائح مهمة عند استخدام JSX Expressions

1. التعبيرات فقط: داخل {} يمكنك وضع تعابير فقط، لا يمكنك وضع عبارات مثل if أو for
2. القيم المعادة: يجب أن تعود التعبيرات بقيمة يمكن عرضها
3. الأقواس المعقوفة: استخدمها مرة واحدة لكل تعبير

// ✅ صحيح
<p>{userName}</p>

// ❌ خطأ
<p>{if (true) { return "نص" }}</p>

🎯 الخلاصة

JSX Expressions تمنحنا قوة كبيرة لإنشاء واجهات ديناميكية في React. من خلال دمج JavaScript مع HTML، يمكننا بناء تطبيقات تفاعلية بكل سهولة ومرونة.

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

في الدرس القادم، سنتعلم عن "JSX Attributes وكيفية استخدامها" حيث سنتعرف على كيفية إضافة خصائص ديناميكية للعناصر وإدارة الأحداث بشكل تفاعلي في مكونات React.