من HTML إلى JSX / React

حول هذه الأداة

يحلّل محوّل من HTML إلى JSX / React مقتطف HTML باستخدام DOMParser الأصلي في المتصفح ويعيد تسلسله كـ JSX صالح، مصلحًا كل ما يحتاجه React. يعمل بالكامل من جهة العميل، لذا يبقى الترميز الذي تلصقه على جهازك. الصق أي HTML — تصدير تصميم، أو قالب بريد إلكتروني، أو مسودة مكوّن — واحصل على JSX يمكنك إدراجه مباشرة في ملف React.

تعيد إعادة الكتابة تسمية السمات المحجوزة (class تصبح className، وfor تصبح htmlFor)، وتحوّل البقية إلى camelCase — tabindex إلى tabIndex، وmaxlength إلى maxLength، وstroke-width إلى strokeWidth — مع ترك سمات data-* وaria-* دون مساس. تُجعَل العناصر الفارغة مثل img وbr وinput وhr مغلقة ذاتيًا (<img />)، وتصبح تعليقات HTML {/* ... */}، وتُهرَّب الأقواس المعقوفة الحرفية في النص كـ {'{'}، وتُحوَّل سلسلة style="a:b;c:d" المضمّنة إلى كائن style={{ a: 'b', c: 'd' }} بمفاتيح CSS بأسلوب camelCase. السمات المنطقية مثل disabled يمكن إصدارها عارية أو كـ ={true} عبر مفتاح.

اختر مُخرَج fragment — تُغلَّف عقد الجذر المتعددة تلقائيًا في fragment بصيغة <>...</> — أو مُخرَج المكوّن الكامل، الذي يغلّف JSX في دالة export default باسمك المختار ومسافتك البادئة (مسافتان، أو 4 مسافات، أو علامات جدولة). النتيجة جاهزة للّصق؛ ولأن التحليل يستخدم DOM حقيقيًا، يُطبَّع التداخل المشوّه بالطريقة نفسها التي يفعلها المتصفح.

الأسئلة الشائعة

أي سمات تُعاد تسميتها؟

class تصبح className وfor تصبح htmlFor؛ والسمات الأخرى المُعرّفة بشرطات أو المحجوزة تُحوَّل إلى camelCase (tabindex إلى tabIndex، وmaxlength إلى maxLength، وstroke-width إلى strokeWidth). تُحفَظ سمات data-* وaria-* تمامًا كما كُتبت.

كيف تُعالَج الأنماط المضمّنة؟

سلسلة style="color:red;font-size:14px" تصبح style={{ color: 'red', fontSize: '14px' }} — تُحوَّل كل خاصية CSS إلى camelCase وتُصدَر كل قيمة كسلسلة، وهو دائمًا صالح لأنماط React المضمّنة.

ماذا يحدث مع عناصر جذر متعددة؟

يحتاج JSX إلى جذر واحد، لذا عندما يحوي مقتطفك عدة عقد عالية المستوى تُغلَّف في Fragment (<>...</>). أما وضع المكوّن الكامل فيغلّفها بدلًا من ذلك داخل تعبير مُعاد بين قوسين.

هل يحوّل التعليقات والوسوم الفارغة؟

نعم. تصبح تعليقات HTML تعليقات JSX {/* ... */}، وتُعرَض العناصر الفارغة (img وbr وinput وhr وmeta وlink والبقية) مغلقة ذاتيًا كـ <img />، وهو ما يتطلّبه JSX.

حول هذه الأداة

الأسئلة الشائعة

المزيد من الأدوات