React JSX
ملف JSX هو كود مصدري لبناء واجهات المواقع. الصياغة تشبه HTML لكنها مكتوبة داخل لغة JavaScript. أنشأته Facebook عام 2013 لمكتبة React. لا يحمل رقماً سحرياً ولا نوع MIME، ويحتاج أداة مثل Babel لترجمته قبل أن يفهمه المتصفح.
تحويل JSX غير متاح حالياً في FileDex. استخدم أوامر CLI في المرجع التقني أدناه لترجمة JSX إلى JavaScript عبر Babel أو SWC.
أسئلة شائعة
ما هو ملف JSX؟
ملف JSX هو ملف كود مصدري يُستخدم لبناء واجهات المواقع، خاصة تلك المبنية بإطار React. الصياغة تجمع بين علامات تُشبه HTML وكود JavaScript في ملف واحد. يحتاج الملف أداة وسيطة (مثل Babel) لترجمته إلى JavaScript عادية قبل أن يفهمه المتصفح.
كيف أفتح ملف JSX؟
أي محرر كود يفتح ملف JSX كنص. الأكثر شعبية هو محرر VS Code، حيث تظهر الصياغة بألوان تلقائية. لكن الفتح ليس تشغيلاً — لتشغيل الكود تحتاج أداة بناء مثل Vite. هذه الأداة تُحوّل JSX إلى JavaScript عادية قبل أن يعرضها المتصفح.
ما الفرق بين JSX و HTML؟
HTML هي اللغة التي يفهمها المتصفح مباشرة لعرض الصفحات. JSX أسلوب كتابة يبدو مثل HTML في الشكل. لكن الصياغة في الحقيقة جزء من لغة JavaScript. قبل أن يصل الكود إلى المتصفح، تُترجمه أداة بناء إلى JavaScript عادية.
لماذا لا يعمل ملف JSX في المتصفح مباشرة؟
لأن المتصفح لا يفهم صياغة JSX. المتصفحات تتبع معيار لغة ECMAScript، وهذا المعيار لا يتضمن العلامات الزاوية الخاصة بـ JSX. لذا يجب أن يمر الملف بأداة بناء (مثل Babel) أولاً. تُعيد الأداة كتابة الملف بصياغة JavaScript قياسية، ثم يستطيع المتصفح تشغيله.
هل تستخدم شركات التقنية السعودية React و JSX؟
نعم، بشكل واسع. React هو الإطار الأكثر استخداماً لبناء واجهات الويب في المنصات الحكومية السعودية مثل أبشر وتوكلنا. شركات كبرى مثل STC وإلم تعتمد على React في تطبيقاتها. أكاديميات البرمجة السعودية — طويق ومسك — تُدرّس React و JSX في مناهج تطوير الواجهة الأمامية.
ما يميز .JSX
افتح ملف .jsx في متصفحك — لن يحدث شيء. هذا ليس عطلاً. JSX صياغة برمجية، لا يستطيع أي متصفح قراءتها مباشرة. تُترجَم دائماً إلى JavaScript قبل أن تصل إلى أي مستخدم.
اكتشف التفاصيل التقنية
أرسل ملف .jsx إلى متصفحك. لا شيء يحدث. لماذا؟
معظم لغات البرمجة لها محرك يُنفّذها. JavaScript يُنفَّذ في المتصفح. Python له مُفسّر خاص. JSX لا يملك محركاً من أي نوع.
المواصفات الرسمية لصياغة JSX — وثيقة مسودة تحتفظ بها Meta — تنص بوضوح على أن الصياغة «بدون دلالات محددة». أي أنها صياغة، لا لغة مكتملة. المعنى الفعلي للكود تحدده المكتبة التي تستخدمه (مثل React)، لا الصياغة نفسها.
النتيجة العملية: كل ملف JSX في العالم يمر بمرحلة ترجمة قبل التشغيل. الأداة الأشهر هي Babel (محوّل الكود الأصلي). هناك بدائل أحدث وأسرع. esbuild مكتوب بلغة Go. SWC مكتوب بلغة Rust. أياً كانت الأداة المستخدمة، الناتج واحد — ملف JavaScript عادي يستطيع المتصفح تنفيذه مباشرة.
هذا الأمر له نتيجة مهمة. لا يمكن كتابة ملف JSX وتشغيله مباشرة في أي مكان. يجب أن يكون هناك مشروع مُعد مسبقاً — عادة باستخدام Vite أو Next.js — يقوم بالترجمة تلقائياً في الخلفية. في بيئة التطوير تبدو العملية سحرية: تكتب الكود، وتحصل على صفحة ويب. لكن وراء الكواليس، أداة بناء تعمل بجد.
هذه السمة هي الأهم في فهم JSX. إنها ليست لغة تعمل — إنها أسلوب كتابة يُترجَم إلى لغة تعمل. الملف الذي يراه المتصفح ليس الملف الذي كتبه المطور. سؤال مهمّ: إذا لم يُنفِّذه أيّ متصفح، فمن يُحدِّد قواعده؟
لا بايتات سحرية، لا نوع MIME، لا جهة معيارية. كيف JSX تنسيق ملف أصلاً؟
معظم التقنيات المشهورة على الويب لها جهة رسمية تُحدّد قواعدها. HTML لها منظمة WHATWG. CSS لها هيئة W3C. JavaScript لها لجنة Ecma. JSON له معيار IETF. الأمر مستقر منذ عقود.
JSX وحدها ليس لها جهة قياسية دولية. الأقرب إلى مواصفات رسمية هي وثيقة مسودة نشرتها Meta على GitHub منذ سنوات — لم تتغير كثيراً منذ 2015. لا توجد RFC. لا يوجد معيار ISO. لا تسمية ECMA مستقلة.
الخوادم لا تعرف كيف تصف ملف JSX عندما تُرسله عبر الشبكة. لا يوجد نوع MIME مُسجَّل رسمياً. بعض الأدوات تستخدم «text/jsx» غير المُسجَّل، والبعض الآخر يُعامل الملف مثل JavaScript عادي. لا توجد بايتات سحرية في بداية الملف تُحدد هويته. البرامج تعتمد على امتداد الاسم (.jsx أو .tsx) لتعرف ماذا تفعل.
هذا الوضع غريب لصياغة يستخدمها ملايين المطورين حول العالم. كيف تعمل بدون معيار رسمي؟ الجواب: الأدوات اتفقت. كل من يكتب JSX يستخدم Babel أو أداة شبيهة. كل هذه الأدوات تُترجم الصياغة بالطريقة نفسها. الاتفاق العملي حلّ محل اللجنة القياسية.
النتيجة: يمكنك نقل ملف JSX بين المشاريع والشركات، وتوقع أن يُترجَم بالطريقة نفسها في كل مكان. غياب المعيار الرسمي يبقى خفياً — حتى تحاول العثور على وثيقة مرجعية، وتكتشف أنها لا توجد بالمعنى المألوف. غياب المعيار يفسِّر أيضاً تفصيلاً صغيراً يكشف هوية كلّ ملف JSX.
كلمة واحدة تُعرِّف JSX فوراً. أيّ كلمة؟
افتح أي ملف JSX وابحث عن كلمة «className». في HTML، نكتب class. في JSX، نكتب className. الفرق حرف واحد — لكنه يكشف آلية الترجمة كلها.
السبب بسيط. كلمة class محجوزة في لغة JavaScript — لها معنى موجود أصلاً (تعني «تعريف فئة من الكائنات»). عندما يُترجَم JSX إلى JavaScript، تحدث مشكلة. كلمة class تتعارض مع معناها المحجوز. الحل: تغيير الاسم. class تصبح className عند الترجمة إلى JSX.
النمط نفسه يتكرر في أماكن أخرى. سمة for تتحول إلى htmlFor في JSX. أحداث النقر onclick تُكتب onClick في JSX — الفرق في كبَر الأحرف. سمة style التي تُكتب في HTML كسلسلة نصية، تصبح في JSX كائن JavaScript.
كل هذه الاختلافات لها سبب واحد: JSX يجب أن يُترجَم بسلاسة إلى JavaScript. أي كلمة يستخدمها JavaScript أصلاً، يجب على JSX أن يبتعد عنها. الاختلافات التي تبدو عشوائية هي في الحقيقة نتيجة للترجمة.
لو كنت تنقل كود HTML إلى JSX لأول مرة، هذه هي القواعد التي ستتعثر فيها. المحررات الحديثة — مثل VS Code — تُقدّم تصحيحات تلقائية لهذه الاختلافات. لكن القاعدة الأساسية واحدة: إذا كانت JavaScript تمتلك الكلمة بالفعل، JSX يستخدم بديلاً. ترجمة تحدث مئات المرّات في كلّ عملية بناء — وكلّ أداة تفعلها بطريقة مختلفة قليلاً.
نفس ملف JSX يترجم إلى JavaScript مختلف حسب الأداة. لماذا؟
صياغة JSX واحدة. لكن النتيجة تختلف تماماً حسب المكتبة التي تعالجها.
React هي الأشهر والأصل. تأخذ JSX، وتُحوّله إلى تمثيل داخلي في الذاكرة. هذا التمثيل يُسمى Virtual DOM. عندما يتغير شيء، تُقارن React الحالة الجديدة بالقديمة، وتُحدّث الأجزاء التي تغيرت فقط. هذا النهج جعل React مشهورة منذ 2013، ويُشغّل اليوم معظم الويب الحديث.
Preact تعمل بالأسلوب نفسه تقريباً، لكن بحجم أصغر بكثير. فريق Preact أعاد كتابة أفكار React في مكتبة حجمها 3 كيلوبايت فقط. معظم الكود الذي يعمل في React يعمل في Preact أيضاً. يمكن تبديل أحدهما بالأخرى دون تعديل ملفات JSX.
SolidJS تسير في اتجاه مختلف جذرياً. تأخذ الصياغة نفسها، لكنها لا تستخدم Virtual DOM على الإطلاق. تعتمد على نموذج مختلف تماماً. بدلاً من ذلك، تتتبع القيم المحددة التي تتغير، وتُحدّث عقد الصفحة المرتبطة بها مباشرة. النتيجة: أداء أسرع في حالات معينة، لكن بنموذج ذهني مختلف عن React.
هذا التنوع هو السبب في أهمية JSX كصياغة مستقلة عن أي مكتبة. يمكن كتابة JSX مرة واحدة، ثم اختيار المحرك المناسب للمشروع. React للنظام البيئي الواسع. Preact عند الحاجة إلى حجم صغير. Solid عند الحاجة إلى أداء عالٍ. نفس الصياغة، عقول مختلفة.
مقارنة .JSX مع البدائل
| المقارنة | المعيار | الفائز |
|---|---|---|
| .JSX vs .TSX | أمان الأنواع وتجربة المطور ملف TSX هو JSX مع إضافة أنواع برمجية صارمة. قبل أن يعمل الكود، يفحص المُجمِّع كل خاصية وحالة وحدث. أي خطأ في الاسم أو النوع يظهر فوراً في المحرر، لا في المتصفح بعد التشغيل. هذا الفحص المبكر يجعل TSX الخيار الأنسب للمشاريع الإنتاجية — بينما يُفضَّل JSX العادي للنماذج السريعة. | TSX أفضل |
| .JSX vs .VUE SFC | معمارية المكونات في JSX، يُكتب الكود البرمجي والعلامات الشبيهة بـ HTML في مكان واحد — داخل دالة واحدة. Vue تتبنى نهجاً معاكساً: القالب والكود والنمط يعيشون في ملف واحد، لكن في أقسام منفصلة. لا يوجد خيار صحيح — الأمر يعتمد على ثقافة الفريق البرمجي ومنظومة الأدوات التي يستخدمها. | تعادل |
| .JSX vs .SVELTE | أداء وقت التشغيل Svelte تتّخذ طريقاً مختلفاً عن React. بدل إنشاء نسخة افتراضية من الصفحة ومقارنتها في كل تحديث، Svelte تحوّل المكونات إلى أوامر DOM مباشرة أثناء البناء. النتيجة: كود أسرع وأصغر في وقت التشغيل. Svelte تتفوق هنا على React. | SVELTE أفضل |
المرجع التقني
- نوع MIME
text/jsx- المطوّر
- Meta (Facebook)
- سنة التقديم
- 2013
- معيار مفتوح
- نعم
البنية الثنائية
ملف JSX ليس تنسيقاً ثنائياً — هو نص UTF-8 عادي، لا يحمل توقيعاً مميزاً في بدايته ولا نوع MIME رسمياً مُسجَّلاً. التعرف على الملف يعتمد على امتداده (.jsx أو .tsx) وعلى محتواه. هيكل الملف النموذجي يبدأ بعبارات الاستيراد، يليها تعريف مكون واحد أو أكثر (كدوال غالباً)، ثم سطر تصدير في النهاية. داخل المكونات، توجد تعبيرات JSX — علامات أقواس زاوية تُشبه HTML تظهر بعد كلمة return وتُغلَّف بأقواس عادية. الإشارة الأوضح على أن الملف هو React JSX تحديداً هي وجود عبارة استيراد من 'react' قرب الأعلى.
| Offset | Length | Field | Example | Description |
|---|---|---|---|---|
Line 1 | variable | سطر الاستيراد | import { useState } from 'react'; | غالباً أوّل شيء تراه في الملف. مصدر الاستيراد يكشف الإطار المستخدَم: استيراد من 'react' يعني React JSX، ومن 'solid-js' يعني Solid.js JSX |
Line N | variable | تعريف المكوِّن | function MyComponent({ title }) { | المكوِّن في الغالب دالة عادية (في الكود الحديث) أو إعلان فئة (في الكود القديم). القاعدة الصارمة: اسم المكوِّن يبدأ بحرف كبير — وإلا عُومِل كعنصر HTML عادي |
Line N+1 | variable | كتلة JSX | return (\n <div className="wrapper"> | بعد عبارة return تبدأ علامات JSX. الأقواس العادية تُغلِّف الكتلة كاملة عندما تمتدّ على عدّة أسطر — وبدونها يقع الكود في خطأ تفسير نحوي |
Last line | variable | سطر التصدير | export default MyComponent; | التصدير هو ما يجعل المكوِّن قابلاً للاستيراد في ملفّات أخرى. النمط الأشهر هو التصدير الافتراضي (مكوِّن واحد لكلّ ملف)، لكنّ التصدير المُسمّى مسموح به أيضاً |
تحويل JSX غير متاح حالياً في FileDex. استخدم أوامر CLI في المرجع التقني أدناه لترجمة JSX إلى JavaScript عبر Babel أو SWC.
نقاط الضعف
- حقن سكريبتات عبر dangerouslySetInnerHTML
- هجمات سلسلة التوريد عبر حزم npm
- تلويث Prototype عبر معامل الانتشار
الحماية: تعامل مع ملفات JSX من مصادر غير موثوقة كأي كود مصدري. افحصها بحثاً عن استيرادات مشبوهة أو استدعاءات eval أو حمولات base64 قبل التثبيت أو التشغيل. شغّل npm audit على تبعيات المشروع للكشف عن حزم خبيثة معروفة. لا تُنفِّذ JSX دون مراجعة ناتج الترجمة. FileDex لا يحلل أو يُنفِّذ JSX — هذه الصفحة مرجع ثابت، لا رفع ملف.
- مواصفات JSX Draft Specification — Meta
- توثيق React — Writing Markup with JSX
- توثيق Babel @babel/preset-react
- توثيق TypeScript JSX Handbook
- توثيق MDN — Introduction to JSX