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

استخدام التعبير البرمجي داخل JSX والتنسيقات

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

عرض قيم المتغيرات داخل JSX باستخدام الأقواس المجعدة {}.
تطبيق التنسيقات المباشرة (Inline Styles) كـ Objects داخل React.
الفرق بين تنسيق HTML العادي وخاصية style في React.
دمج عدة متغيرات لعرض معلومات ديناميكية.

1. تضمين منطق JavaScript في JSX

يمكنك كتابة أي متغير أو تعبير JavaScript داخل وسوم JSX بمجرد وضعه بين الأقواس المجعدة {}. React سيقوم بتقييم التعبير وعرض قيمته:

javascript

const user = "جمال";
const age = 30;

return (
  <div>
    <h1>مرحباً {user}!</h1>
    <p>عمرك {age} سنة</p>
    <p>بعد 5 سنوات سيكون عمرك {age + 5}</p>
  </div>
);

2. تنسيقات React (Inline Styles)

في React، تختلف طريقة كتابة التنسيقات المباشرة عن HTML. بدلاً من استخدام نص، نستخدم كائن JavaScript (Object)، وتُكتب أسماء الخصائص بصيغة camelCase (مثل backgroundColor بدلاً من background-color).

javascript

// ❌ خطأ — هذا HTML وليس React
<div style="background-color: red;">...</div>

// ✅ صحيح — كائن JavaScript في React
<div style={{ backgroundColor: 'red' }}>...</div>

// ✅ يمكن تعريف الكائن خارج الـ JSX
const cardStyle = {
  backgroundColor: '#1e293b',
  padding: '20px',
  borderRadius: '16px'
};

<div style={cardStyle}>...</div>

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

تحدي الدرس الثاني: طباعة المتغيرات والتنسيق

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

غيّر قيمة المتغير name إلى اسمك الحقيقي.
أضف متغيراً جديداً باسم city يحتوي على مدينتك.
أضف سطراً جديداً في البطاقة لعرض المدينة بالصيغة: المدينة: {city} داخل وسم <p>.

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

الدرس السابق الانتقال للدرس الثالث