مطور / React

محوّل HTML إلى JSX

حوّل HTML إلى JSX لـ React: حوّل class إلى className، والأنماط المضمنة إلى كائنات، وأغلق العناصر الفارغة، واستبدل الأقواس المعقوفة، وحوّل التعليقات، مع إمكانية تغليف الناتج في مكوّن.

محوّل HTML إلى JSX: يحلّل HTML إلى عناصر، لذلك يعيد تسمية السمات لتتوافق مع React (class وfor وtabindex وreadonly وmaxlength وغيرها)، ويحوّل الأنماط إلى كائنات بمفاتيح camelCase، ويغلق العناصر الفارغة مثل <br> و<img>. ويستبدل الأقواس المعقوفة والأقواس الزاوية في النصوص بصيغة مهروبة، ويحوّل التعليقات إلى {/* */}، كما يحوّل قيم النماذج إلى defaultValue وdefaultChecked حتى تظل الحقول قابلة للتحرير. يُترجم ناتج صفحات الاختبار بنجاح إلى TSX. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.

الفئة: أدوات المطورين
مرات التشغيل: في المتصفح
التكلفة: مجاني · بلا تسجيل
التوفر: جاهز للاستخدام

تحويل HTML إلى JSXمعالجة محلية

تعمل بالكامل في المتصفح

HTML

<div class="card" style="margin-top: 8px; background-color: #fff">
  <label for="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required>
  <button onclick="send()" tabindex="0">Send</button>
  <!-- footer -->
  <p>Price: {price} &gt; 0</p>
</div>

تغليف داخل مكوّن

تمت إزالة onclick="send()" من <button>؛ اكتبها كدالة، مثل onClick={() => …}.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

تُعاد تسمية السمات لتناسب React (من class إلى className، ومن for إلى htmlFor، ومن tabindex إلى tabIndex)، وتصبح الأنماط كائنات، وتُغلق العناصر الفارغة والعناصر التي لا تحتاج إلى وسم إغلاق، وتتحول التعليقات إلى {/* */}، وتصبح قيم النماذج defaultValue حتى تظل الحقول قابلة للتحرير.

بعد التحويل

حوّل العلامات المتكررة إلى مكوّنات تستقبل props، واستبدل النص الثابت بمتغيرات بين الأقواس المعقوفة، وانقل الأنماط المضمّنة إلى فئات CSS أو نظام التنسيق الذي تستخدمه، لأن كائنات style يُعاد إنشاؤها عند كل عرض.

بالنسبة إلى أيقونات SVG، تنشئ أداة SVG إلى JSX مكوّناً يمرر props، ولإزالة التعليقات والمسافات البيضاء الزائدة أولاً، استخدم مصغّر HTML.

اختلافات تسبب الالتباس

يتطلب JSX عنصراً جذرياً واحداً، لذلك تُغلّف العناصر المتعددة في جزء (<>…</>). يجب إغلاق كل عنصر، وتُكتب أسماء السمات بصيغة camelCase، كما يجب كتابة النص الذي يحتوي على { أو } بصيغة {"{"}، وهذا ما ينفذه المحوّل تلقائياً.

طريقة الاستخدام

ألصق HTML، بدءًا من عنصر واحد وصولًا إلى قسم كامل من الصفحة.
غلّف الناتج اختياريًا داخل مكوّن يحمل اسمًا تحدده.
انسخ JSX، وأعد كتابة أي معالجات أحداث مضمنة تظهر في التحذيرات.

الخصوصية والقيود

يُحوَّل HTML في المتصفح ولا يُرفع إلى أي خادم.

أدوات ذات صلة

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

لماذا تُحذف سمات onclick؟

تكون هذه السمات في HTML سلاسل من التعليمات البرمجية، بينما يجب أن تكون في React دوالًا. يسرد المحوّل كل سمة منها لتتمكن من إعادة كتابتها، مثل تحويل onclick="save()" إلى onClick={save}.

لماذا تتحول value إلى defaultValue؟

تجعل سمة value الحقل مُدارًا في React، لذلك لا يمكن الكتابة فيه من دون معالج onChange؛ أما defaultValue فتحدد النص الابتدائي وتُبقي الحقل قابلًا للتحرير.

هل يتعامل مع SVG؟

نعم، إذ تتحول سمات SVG مثل stroke-width إلى strokeWidth. ولتحويل ملف SVG كامل إلى مكوّن، تضيف أداة SVG إلى JSX الخصائص props.

أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا