محوّل HTML → JSX
خصوصية بالتصميم — يعمل بالكامل في متصفحك
الصق HTML في الجهة اليسرى وانسخ JSX جاهزًا لـ React في الجهة اليمنى. يعيد المحوّل كتابة class إلى className، وfor إلى htmlFor، وسلاسل style المضمّنة إلى كائنات camelCase، ويُغلق ذاتيًا عناصر void مثل img وinput حتى يستطيع JSX تحليلها.
إعادة تسمية الصفات والأحداث
يستخدم React أسماء خصائص الـ DOM بدل أسماء صفات HTML: تتحول tabindex إلى tabIndex، وreadonly إلى readOnly، وcolspan إلى colSpan. أما المعالجات المضمّنة فتنتقل من onclick إلى onClick، ومن onmouseover إلى onMouseOver، وهكذا في كل المعالجات القياسية. وأبرز تغييرَين خاصَّين بـ HTML هما class إلى className وfor إلى htmlFor، لأن كليهما كلمتان محجوزتان في JavaScript.
تحويل سلاسل style إلى كائنات camelCase
يستلزم JSX أن يكون style المضمّن كائنًا حرفيًا، وأن تكون كل خاصية CSS بصيغة camelCase. تصبح سلسلة مثل padding: 1rem; background-color: #fff على هيئة style={{ padding: '1rem', backgroundColor: '#fff' }}. يتعامل المحوّل مع تحويل kebab-case إلى camelCase وبادئات المتصفحات (-webkit- و-moz- و-ms-) وخصائص CSS المخصصة (--brand-color تبقى كما هي، مع جعل المفتاح سلسلة عند الحاجة).
الخصوصية والحالات الحدية
يجري التحويل داخل دالة JavaScript واحدة في هذه التبويبة، فلا يغادر HTML المتصفح، وهو ما يهم عند نقل مارك آب يتضمن بيانات عملاء. تظهر عناصر void الأربعة عشر (img وinput وbr وhr وmeta وlink وarea وbase وcol وembed وsource وtrack وwbr وparam) ذاتية الإغلاق ليتمكن JSX من قبولها، أما صفات data- وaria- فتظل كما هي لأنها صالحة أصلًا في JSX.
الأسئلة الشائعة
- ما الصفات التي يعاد تسميتها؟
- class إلى className، وfor إلى htmlFor، وtabindex إلى tabIndex، وreadonly إلى readOnly، وcolspan إلى colSpan، فضلًا عن camelCase لكل خصائص الـ DOM القياسية والمعالجات on*.
- كيف تتحول سلسلة style؟
- تُجزَّأ على الفواصل المنقوطة، وتُحوَّل كل خاصية CSS إلى camelCase، ويُخرَج الناتج ككائن JSX بقوسين معقوفين مزدوجين، مع الحفاظ على بادئات المتصفحات والخصائص المخصصة.
- هل تتغير data-* وaria-*؟
- لا. يقبل JSX كلتيهما في صيغة kebab، فلا يلمسهما المحوّل، ويُعاد تسمية صفات DOM القياسية فقط.
- هل تُحوَّل تعليقات HTML؟
- نعم. يتحول <!-- تعليق --> إلى {/* تعليق */} للحفاظ على المعنى دون كسر مُحلِّل JSX.
- وماذا عن السكربتات والمعالجات المضمّنة؟
- يعيد المحوّل تسمية onclick إلى onClick وغيرها من المعالجات، بينما يبقى جسم الدالة سلسلةً نصية. عادةً ما يعاد كتابة الجسم لاحقًا كاستدعاء React قبل النشر.
- هل يُرفع HTML الخاص بي إلى أي مكان؟
- لا. يجري التحويل بالكامل داخل هذه التبويبة. لا ترى Toova ما تلصقه؛ لا تحليلات ولا سجلات، لا شيء.