ما هي صياغة JSX وكيف يفهمها المتصفح

ما هو JSXشرح JSX في ريأكتكيف يعمل JSXكورس ريأكت العربكود JSXمترجم Babel

جدول مرجعي سريع

ما هي صياغة JSX وكيف يفهمها المتصفح؟

المصطلح التقني	المفهوم البرمجي في ريأكت	كيف يراه المتصفح في الإنتاج النهائي
JSX	صياغة هجينة تدمج وسم الهيكل مع منطق جافا سكريبت في سطر واحد	كائن برمي عادي من نوع Object لا يحتوي على أي وسوم HTML حقيقية
Babel	المترجم والمحول البرمجي المسؤول عن تحويل الأكواد الحديثة	دالة جافا سكريبت قياسية مستدعاة تُسمى React.createElement لبناء العنصر
HTML	لغة توصيف هيكلية نصية بحتة يفهمها المتصفح بشكل طبيعي	واجهة مستخدم مرندرة ومحقونة ديناميكياً داخل عنصر الجذر root

الشرح

عندما تفتح ملف App.jsx لأول مرة، ستلاحظ شيئاً غريباً جداً قد يصيبك بالذهول؛ ستجد كوداً يشبه الـ HTML مكتوباً ومدمجاً في قلب دالة جافا سكريبت! في ديرتنا البرمجية القديمة، كان هذا يعتبر "خطيئة هندسية"، حيث تعلمت دائماً فصل الـ HTML في ملف والـ JavaScript في ملف آخر تماماً.

هذه الصياغة الهجينة والمبتكرة هي قلب ريأكت النابض، وتُسمى JSX.

1. ما هي صياغة JSX؟

كلمة JSX هي اختصار لـ (JavaScript XML). وهي ليست لغة برمجة جديدة، وليست كود HTML حقيقي؛ بل هي مجرد "امتداد صياغي" (Syntax Extension) للغة جافا سكريبت. تسمح لك JSX بكتابة بنية وهيكل واجهة المستخدم (UI) بنفس شكل الـ HTML المألوف لديك، ولكن مع الاستفادة الكاملة من القوة البرمجية الفائقة لـ JavaScript (مثل الحلقات التكرارية، الشروط، والمتغيرات) داخل نفس الكتلة البرمجية.

2. السر الهيكلي: كيف يفهم المتصفح كود JSX؟

الحقيقة الصادمة هنا: المتصفحات (مثل كروم وفايرفوكس) لا تفهم ولا تقرأ سطر كود واحد من الـ JSX! لو قمت بإرسال ملف يحتوي على JSX للمتصفح مباشرة، سيرمى لك خطأ في سطر الأوامر فوراً. إذاً، كيف يعمل الموقع؟ خلف الكواليس، وفي أجزاء من الثانية أثناء حفظك للكود، تتدخل أداة البناء الحديثة (مثل Vite) وتستدعي مترجماً برمجياً عبقرياً يُدعى Babel. يقوم Babel بأخذ كل سطر يشبه الـ HTML كتبته أنت، ويقوم بتحويله وترجمته إلى دوال جافا سكريبت عادية وقياسية تُسمى React.createElement(). هذا الكود الصافي المعالج هو ما يذهب للمتصفح في النهاية.

المقارنة البرمجية والتحويل خلف الكواليس

دعنا نرى كيف يرى مهندس البرمجيات الكود، وكيف يقوم المترجم Babel بتفكيكه ليتحول إلى جافا سكريبت صافية يفهمها الكمبيوتر:

الكود الذي تكتبه أنت (JSX Syntax):

javascript

1	const element = <h1 className="title">مرحباً بك في منصة نوفيل</h1>;
2

الكود الفعلي بعد معالجة Babel (Pure JavaScript):

javascript

1	// هذا هو الكود الحقيقي الذي يفهمه المتصفح ويتحول في الذاكرة إلى كائن Virtual DOM خفيف
2	const element = React.createElement(
3	'h1',
4	{ className: 'title' },
5	'مرحباً بك في منصة نوفيل'
6	);

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

—بما أن كود الـ JSX يتحول في النهاية إلى دالة جافا سكريبت عادية (React.createElement)، فهذا يعني هندسياً أن كل عنصر JSX تكتبه هو عبارة عن كائن (Object) وقيمة برمجية حقيقية!
—ماذا يعني هذا لك؟ يعني أنه يمكنك معاملة وسم الـ JSX كأي متغير عادي في جافا سكريبت؛ فيمكنك حفظ الوسم داخل متغير (let x = <h1>..</h1>)، ويمكنك تمريره كمعامل داخل دالة، ويمكنك جعل الدالة ترجع وسم JSX كامل عبر أمر return. فهمك لهذه الجزئية سيجعل تعاملك مع الواجهات الديناميكية في غاية المرونة والذكاء!

الدرس السابق

بنية ملفات مجلد مشروع React

الدرس التالي

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

المصطلح التقني

المفهوم البرمجي في ريأكت

كيف يراه المتصفح في الإنتاج النهائي

JSX

صياغة هجينة تدمج وسم الهيكل مع منطق جافا سكريبت في سطر واحد

كائن برمي عادي من نوع Object لا يحتوي على أي وسوم HTML حقيقية

Babel

المترجم والمحول البرمجي المسؤول عن تحويل الأكواد الحديثة

دالة جافا سكريبت قياسية مستدعاة تُسمى React.createElement لبناء العنصر

HTML

لغة توصيف هيكلية نصية بحتة يفهمها المتصفح بشكل طبيعي

واجهة مستخدم مرندرة ومحقونة ديناميكياً داخل عنصر الجذر root

1. ما هي صياغة JSX؟

2. السر الهيكلي: كيف يفهم المتصفح كود JSX؟

المقارنة البرمجية والتحويل خلف الكواليس

الكود الذي تكتبه أنت (JSX Syntax):

javascript

1	const element = <h1 className="title">مرحباً بك في منصة نوفيل</h1>;
2

الكود الفعلي بعد معالجة Babel (Pure JavaScript):

javascript

1	// هذا هو الكود الحقيقي الذي يفهمه المتصفح ويتحول في الذاكرة إلى كائن Virtual DOM خفيف
2	const element = React.createElement(
3	'h1',
4	{ className: 'title' },
5	'مرحباً بك في منصة نوفيل'
6	);