محول HTML إلى JSX
HTML → JSX// JSX output appears here
لماذا نحول HTML إلى JSX؟
عند نقل قوالب HTML الحالية إلى React، يجب عليك يدوياً تحويل سمات class إلى className، و for إلى htmlFor، والأنماط المضمنة من نصوص إلى كائنات جافا سكريبت. يقوم المحول الخاص بنا بأتمتة كل هذه التحويلات فوراً، مما يوفر عليك العناء ويسمح لك بالتركيز على منطق المكونات بدلاً من تصحيح الصيغ.
تحويل السمات
يحول class→className، و for→htmlFor، و tabindex→tabIndex، والمزيد تلقائياً.
كائنات التنسيق المضمنة
يحول style="color: red;" إلى style={{color: 'red'}} - وهي الصيغة الصالحة في React.
الوسوم مغلقة الجانب
يضيف شرطة الإغلاق للوسوم الفارغة: <br> يصبح <br /> و <input> يصبح <input />.
كيفية تحويل HTML إلى JSX
الصق كود HTML
الصق قالب HTML أو مقتطف الكود في اللوحة اليسرى.
تحويل تلقائي
سيقوم المحول فوراً بتحويل جميع السمات والأنماط والوسوم إلى صيغة JSX.
نسخ JSX
انسخ كود JSX الناتج والصقه داخل كتلة render/return في مكون React الخاص بك.
حالات الاستخدام
الهجرة إلى React
نقل صفحات أو قوالب HTML الحالية إلى مكونات React دون عناء التحويل اليدوي.
من Bootstrap إلى React
حول مكونات Bootstrap الجاهزة إلى JSX لاستخدامها مع react-bootstrap.
قوالب البريد الإلكتروني
حول قوالب الإيميل الجاهزة إلى JSX لاستعمالها مع مكتبات مثل React Email.
من CMS إلى React
تحويل كود HTML المستخرج من أنظمة مثل WordPress إلى هيكلية مكونات React.
نصائح HTML إلى JSX
✓ تحويل class إلى className ضروري
كلمة class محجوزة في جافا سكريبت. يتطلب React استخدام className لتنسيقات CSS وتجاهل ذلك يسبب أخطاء.
✓ تحويل for إلى htmlFor في التسميات
تتحول سمة for في وسوم <label> إلى htmlFor. نسيان هذا يؤثر على إمكانية الوصول (Accessibility).
✓ تحديث معالجات الأحداث
لا يتم تحويل onclick='...' تلقائياً بالكامل لأنها تحتاج لربطها بدوال React. يجب استبدالها يدوياً بـ onClick={handler}.
✓ تعليقات HTML تصبح تعليقات JSX
يتم تحويل <!-- تعليق --> إلى {/* تعليق */} لأن JSX لا يسمح بصيغة تعليقات HTML العادية بداخلها.
❓ الأسئلة الشائعة
لماذا يستخدم React كلمة className بدلاً من class؟
لأن كلمة class محجوزة في جافا سكريبت لتعريف الفئات (ES6 Classes). وبما أن JSX هو جافا سكريبت، تم اختيار className لتجنب التداخل.
هل يدعم المحول معالجات أحداث React؟
لا، معالجات مثل onclick لا تُحول تلقائياً لأنها تتطلب الإشارة إلى دوال برمجية داخل مكون React، وهو ما يجب برمجته يدوياً.
ما الفرق الجوهري بين HTML و JSX؟
JSX هو امتداد لجافا سكريبت يشبه HTML ولكنه يتحول إلى استدعاءات برمجية. الفروقات تشمل استخدام camelCase للسمات، وضرورة إغلاق جميع الوسوم.
لماذا يجب إغلاق الوسوم الفارغة (Void Elements) في JSX؟
يتم تحليل JSX كصيغة تشبه XML والتي تتطلب إغلاق جميع العناصر. لذا <br> و <input> يجب أن تنتهي دائماً بـ />.