كتابة أكواد جافا سكريبت داخل JSX باستخدام الأقواس المجعدة { }

جافا سكريبت داخل JSXاستخدام الأقواس المجعدة في ريأكتالتعابير البرمجية في ريأكتربط البيانات ريأكتكورس React كاملJavaScript Expressions

الشرح

لو كانت صياغة JSX تكتفي بعرض وسوم تشبه الـ HTML فقط لكانت بلا فائدة حقيقية. القوة الخارقة لـ JSX تكمن في قدرتك على كسر حاجز النصوص الجامدة وحقن أكواد جافا سكريبت حية وديناميكية في قلب الواجهة مباشرة!

لكي تفتح بوابة السحر البرمجي وتخبر محرك ريأكت أنك ستنتقل من كتابة وسم عادي إلى كتابة كود جافا سكريبت، نستخدم مفتاح المعجزة: الأقواس المجعدة { } (Curly Braces).

1. قاعدة التعبير البرمجي (Expressions Only)

عندما تضع الأقواس المجعدة { } داخل كود JSX، يمكنك أن تكتب داخلها تعبيراً برمجياً (Expression) فقط، ولا يمكنك كتابة جملة برمجية (Statement). ما الفارق الهندسي بينهما؟

التعبير البرمجي (Expression): هو أي سطر كود ينتج عنه "قيمة نهائية" يمكن تخزينها في متغير (مثل: اسم متغير username، عملية رياضية 2 + 2، استدعاء دالة ترجع قيمة getUserName()، أو معامل ثلاثي شرطي). هذا النوع ترحب به الأقواس وتطبعه فوراً في الشاشة.
الجملة البرمجية (Statement): هي كتلة برمجية تؤدي فعلاً ولكن لا تنتج قيمة فورية (مثل الحلقات التكرارية التقليدية for loop أو الجمل الشرطية الكبيرة if else). هذا النوع ممنوع تماماً كتابته داخل أقواس الـ JSX وسيتسبب في انهيار المترجم.

2. أين يمكن استخدام الأقواس المجعدة؟

يمكنك زرع الأقواس المجعدة في مكانين أساسيين لا غنى عنهما:

كنص داخل العناصر (Children Text): لعرض محتوى ديناميكي بين وسمي البداية والنهاية، مثل:

javascript

1	<h1>مرحباً يا {username}</h1>
2

كقيم لسمات العناصر (Attributes Values): لتغيير مسارات الصور أو الروابط ديناميكياً، مثل:

javascript

1	<img src={userAvatar} />
2

ℹ️ معلومة

(لاحظ أننا هنا نحذف علامات التنصيص "" ونستبدلها بالأقواس مباشرة).

الأكواد البرمجية والتطبيق العملي

دعنا نرى كيف نكتب التعابير البرمجية المختلفة داخل الـ JSX بشكل احترافي ومباشر:

الصياغة (Syntax)

syntax

1	function UserProfile() {
2	// متغيرات جافا سكريبت عادية
3	const firstName = "أحمد";
4	const lastName = "المصري";
5	const age = 26;
6	const siteUrl = "https://nouvil.net";
7	const avatarImage = "user-profile.jpg";
8
9	// دالة برمجية بسيطة
10	const getFullName = (first, last) => {
11	return `${first} ${last}`;
12	};
13
14	return (
15	<div className="profile-card">
16	{/* 1. طباعة متغير ديناميكي مباشر */}
17	<h2>مرحباً بك، {firstName}</h2>
18
19	{/* 2. استدعاء دالة برمجية وإنتاج قيمتها فوراً */}
20	<p>الاسم الكامل: {getFullName(firstName, lastName)}</p>
21
22	{/* 3. إجراء عمليات رياضية داخل الواجهة */}
23	<p>العمر بعد خمس سنوات سيكون: {age + 5} عاماً</p>
24
25	{/* 4. تمرير قيمة ديناميكية لسمة الرابط والصورة بدون علامات تنصيص */}
26	<a href={siteUrl}>زيارة حسابك في نوفيل</a>
27	<img src={avatarImage} alt={firstName} />
28	</div>
29	);
30	}

نصائح احترافية

—ماذا يحدث لو حاولت طباعة متغير يحمل قيمة منطقية (Boolean) مثل true أو false أو قيمة فارغة مثل null أو undefined داخل أقواس الـ JSX؟
—النتيجة المذهلة أن ريأكت ستقوم بتجاهلهم تماماً ولن تطبع أي شيء على الشاشة! ريأكت مصممة هكذا لكي تسهل عليك إخفاء وإظهار العناصر بناءً على الشروط (كما سنرى في فصل العرض الشرطي).
—إذا كنت تريد طباعة كلمة "نعم" أو "لا" للمستخدم بناءً على قيمة منطقية مخزنة لديك، لا تكتب المتغير بمفرده؛ بل استخدم المعامل الثلاثي (Ternary Operator) الذكي داخل الأقواس هكذا: {isPremiumUser ? "عضو مميز" : "عضو عادي"}، لتجبر ريأكت على تحويل القيمة المنطقية الخفيفة إلى نص مرئي وصريح للمستخدم!

الدرس السابق

قواعد كتابة كود JSX الصارمة

الدرس التالي

إضافة التعليقات داخل JSX

1. قاعدة التعبير البرمجي (Expressions Only)

التعبير البرمجي (Expression): هو أي سطر كود ينتج عنه "قيمة نهائية" يمكن تخزينها في متغير (مثل: اسم متغير username، عملية رياضية 2 + 2، استدعاء دالة ترجع قيمة getUserName()، أو معامل ثلاثي شرطي). هذا النوع ترحب به الأقواس وتطبعه فوراً في الشاشة.

الجملة البرمجية (Statement): هي كتلة برمجية تؤدي فعلاً ولكن لا تنتج قيمة فورية (مثل الحلقات التكرارية التقليدية for loop أو الجمل الشرطية الكبيرة if else). هذا النوع ممنوع تماماً كتابته داخل أقواس الـ JSX وسيتسبب في انهيار المترجم.

2. أين يمكن استخدام الأقواس المجعدة؟

يمكنك زرع الأقواس المجعدة في مكانين أساسيين لا غنى عنهما:

كنص داخل العناصر (Children Text): لعرض محتوى ديناميكي بين وسمي البداية والنهاية، مثل:

javascript

1	<h1>مرحباً يا {username}</h1>
2

كقيم لسمات العناصر (Attributes Values): لتغيير مسارات الصور أو الروابط ديناميكياً، مثل:

javascript

1	<img src={userAvatar} />
2

ℹ️ معلومة

(لاحظ أننا هنا نحذف علامات التنصيص "" ونستبدلها بالأقواس مباشرة).