تضمين المتغيرات والتعابير البرمجية الديناميكية داخل كود JSX

اليوم، سنتعلم كيفية تضمين المتغيرات والتعابير البرمجية الديناميكية مباشرة داخل كود JSX في React، مما يتيح لنا بناء واجهات مستخدم تفاعلية ومرنة.

الخطوة 1: تعريف المتغيرات الأساسية

لنبدأ بتعريف بعض المتغيرات التي سنقوم بعرضها داخل مكون React.

ملاحظة تقنية: في JSX، نستخدم الأقواس المتعرجة {} لإدخال تعابير JavaScript. يمكن أن تكون هذه التعابير متغيرات، دوال، أو حتى عمليات حسابية.

// Import React library
import React from 'react';

// Define a functional component
function DynamicContent() {
  // تعريف متغير نصي
  const userName = "أحمد";
  // تعريف متغير رقمي
  const userAge = 30;
  // تعريف متغير منطقي
  const isLoggedIn = true;

  return (
    <div>
      {/* هنا سنقوم بتضمين المتغيرات في الخطوات التالية */}
    </div>
  );
}

export default DynamicContent;

في هذه الخطوة، قمنا بإنشاء مكون وظيفي (Functional Component) باسم DynamicContent وقمنا بتعريف ثلاثة أنواع مختلفة من المتغيرات بداخله.

الخطوة 2: تضمين المتغيرات النصية والرقمية

الآن، سنقوم بعرض هذه المتغيرات داخل عناصر HTML باستخدام صيغة JSX.

import React from 'react';

function DynamicContent() {
  const userName = "أحمد";
  const userAge = 30;
  const isLoggedIn = true;

  return (
    <div>
      {/* عرض المتغير النصي */} 
      <h1>أهلاً بك، {userName}!</h1>
      {/* عرض المتغير الرقمي */} 
      <p>عمرك هو: {userAge} سنة.</p>
      {/* يمكن إجراء عمليات حسابية بسيطة مباشرة داخل JSX */} 
      <p>بعد 5 سنوات، سيكون عمرك: {userAge + 5} سنة.</p>
    </div>
  );
}

export default DynamicContent;

كما نرى، يمكننا ببساطة وضع اسم المتغير داخل الأقواس المتعرجة {} ليتم عرضه. يمكننا أيضاً إجراء عمليات حسابية بسيطة مباشرة داخل هذه الأقواس.

الخطوة 3: تضمين التعابير الشرطية والمنطقية

يمكننا استخدام التعابير الشرطية لتغيير المحتوى المعروض بناءً على حالة معينة، وتضمين القوائم ديناميكياً.

import React from 'react';

function DynamicContent() {
  const userName = "أحمد";
  const userAge = 30;
  const isLoggedIn = true; // متغير منطقي يحدد حالة تسجيل الدخول

  // تعريف مصفوفة من العناصر لعرضها
  const items = ['React', 'JavaScript', 'HTML', 'CSS'];

  return (
    <div>
      <h1>أهلاً بك، {userName}!</h1>
      <p>عمرك هو: {userAge} سنة.</p>
      <p>بعد 5 سنوات، سيكون عمرك: {userAge + 5} سنة.</p>

      {/* استخدام تعبير شرطي (Ternary Operator) لتغيير المحتوى بناءً على المتغير isLoggedIn */}
      {isLoggedIn ? (
        <p>أنت مسجل الدخول حالياً.</p>
      ) : (
        <p>يرجى تسجيل الدخول للمتابعة.</p>
      )}

      {/* عرض قائمة من العناصر باستخدام دالة map لتكرار وعرض كل عنصر */}
      <h2>قائمة المهارات:</h2>
      <ul>
        {items.map((item, index) => (
          // مفتاح فريد (key) ضروري لكل عنصر في القائمة لتحسين أداء React وتتبع التغييرات
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default DynamicContent;

في هذه الخطوة، استخدمنا المعامل الشرطي الثلاثي (Ternary Operator) ? : لعرض رسالة مختلفة بناءً على قيمة المتغير isLoggedIn. كما أظهرنا كيفية تكرار عرض عناصر من مصفوفة باستخدام دالة map، وهو أسلوب شائع جداً في React لإنشاء قوائم ديناميكية.

الكود النهائي الكامل

هذا هو الكود الكامل للمكون الذي قمنا ببنائه:

import React from 'react';

function DynamicContent() {
  // تعريف متغير نصي
  const userName = "أحمد";
  // تعريف متغير رقمي
  const userAge = 30;
  // تعريف متغير منطقي يحدد حالة تسجيل الدخول
  const isLoggedIn = true;

  // تعريف مصفوفة من العناصر لعرضها
  const items = ['React', 'JavaScript', 'HTML', 'CSS'];

  return (
    <div>
      {/* تضمين متغير نصي وعرض رسالة ترحيب */}
      <h1>أهلاً بك، {userName}!</h1>
      {/* تضمين متغير رقمي وعرض العمر */}
      <p>عمرك هو: {userAge} سنة.</p>
      {/* تضمين تعبير برمجي (عملية حسابية) */} 
      <p>بعد 5 سنوات، سيكون عمرك: {userAge + 5} سنة.</p>

      {/* استخدام تعبير شرطي (Ternary Operator) بناءً على حالة تسجيل الدخول */}
      {isLoggedIn ? (
        <p>أنت مسجل الدخول حالياً.</p>
      ) : (
        <p>يرجى تسجيل الدخول للمتابعة.</p>
      )}

      {/* عرض قائمة من العناصر باستخدام دالة map لتكرار العناصر */}
      <h2>قائمة المهارات:</h2>
      <ul>
        {items.map((item, index) => (
          // يجب توفير مفتاح فريد (key) لكل عنصر في القائمة لتحسين أداء React
          <li key={index}>{item}</li>
        ))}
      </ul>

      {/* مثال على تضمين دالة JavaScript مباشرة لعرض التاريخ الحالي */}
      <p>التاريخ الحالي: {new Date().toLocaleDateString('ar-EG')}</p>
    </div>
  );
}

export default DynamicContent;

النتيجة المتوقعة

عند تشغيل هذا المكون في تطبيق React، ستظهر لك الصفحة التالية في المتصفح:

أهلاً بك، أحمد!
عمرك هو: 30 سنة.
بعد 5 سنوات، سيكون عمرك: 35 سنة.
أنت مسجل الدخول حالياً.
قائمة المهارات:
* React
* JavaScript
* HTML
* CSS
التاريخ الحالي: [تاريخ اليوم بتنسيق عربي، مثال: ٧‏/٥‏/٢٠٢٤]

لاحظ كيف تم استبدال المتغيرات بقيمها الفعلية، وكيف تغير المحتوى بناءً على الشرط، وكيف تم عرض عناصر المصفوفة كقائمة ديناميكية.

← السابقالفهرسالتالي →