Softonic

محوّل HTML إلى JSX

خطوة 1 / 2

يحوّل: class إلى className، و for إلى htmlFor، والأنماط المضمّنة إلى كائنات JSX، ويغلق تلقائيًا الوسوم الفارغة، ويزيل تعليقات HTML.

تحويل إلى JSX

يبدو JSX مثل HTML حتى لا يكون كذلك، فـ class هو className، وfor هو htmlFor، وstyle كائن لا سلسلة، وكل وسم فارغ يجب أن يُغلق نفسه. الصق HTML وينتج هذا المحوّل JSX يُترجَم من أول محاولة، فتستطيع رفع صفحة تسويقية إلى مكوّن React دون قضاء عشر دقائق في مطاردة أخطاء المترجم.

كيف تحوّل HTML إلى JSX

  1. 1

    الصق HTML

    ترميز بحجم مكوّن، أو شذرة صفحة كاملة.

  2. 2

    حوّل

    يعيد المحوّل تسمية السمات مثل `class` و`for` و`readonly` وفق كتابة JSX ويحوّل الأنماط المضمّنة إلى كائنات.

  3. 3

    راجع JSX

    الناتج جاهز للصق في ملف `.jsx` أو `.tsx`.

  4. 4

    انسخ والصق

    تستخدم الشيفرة تعابير من سطر واحد فتلائم مكوّنا موجودا جيدا.

كل فرق بين HTML وJSX يهم

JSX ليس HTML. إنه تعبير JavaScript يُترجَم إلى استدعاءات React.createElement()، فتتبع أسماء السمات أعراف JavaScript.

يتولّى المحوّل إعادة تسمية السمات الأكثر شيوعا تلقائيا. القائمة الكاملة أدناه مرجع تحفظه عند كتابة JSX يدويا.

إعادة تسمية السمات

HTML JSX ملاحظات
class className class محجوزة في JS
for htmlFor for محجوزة
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref نطاقات النقطتين مسطّحة
aria-label aria-label تحتفظ ARIA بالشرطات
data-* data-* تحتفظ سمات البيانات بالشرطات

سمة النمط

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

القيم العددية بلا وحدات تصبح بكسلات؛ أبقِ السلاسل للنسب المئوية والقيم بلا وحدات مثل flex.

العناصر الفارغة الذاتية الإغلاق

يتسامح HTML مع <br> و<input> دون وسم إغلاق. أما JSX فيتطلب <br /> و<input />، كل عنصر يجب أن يُغلق صراحة.

التعليقات

تعليقات HTML (<!-- -->) غير صالحة في أجساد JSX. يزيلها هذا المحوّل؛ وإذا أردت الإبقاء على ملاحظة فاكتبها بنفسك بصيغة {/* تعليق كتلة JavaScript */}.

السمات المنطقية

HTML: <input checked> (أو <input checked="checked">)

JSX: <input checked={true} /> أو ببساطة <input checked />. لا تمرّر سلسلة “true” أبدا.

مخارج الطوارئ

  • يمكن عرض شذرات HTML غير الموثوقة بـ dangerouslySetInnerHTML={{ __html: ... }}، قبيحة عمدا لتثبيط الاستخدام.
  • تبقى سمات data-* المخصصة كما هي؛ تُمرَّر السمات غير القياسية لكنها قد تثير تحذيرات React في وضع التطوير.

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

سمات SVG مثل stroke-width يجب أن تكون camelCase (strokeWidth) في JSX، وكل وسم يجب أن يُغلق نفسه. يغلِق المحوّل الوسوم الفارغة داخل SVG ويحوّل أسماء الخصائص داخل سلاسل النمط إلى camelCase، لكنه لا يعيد تسمية سمات SVG؛ غيّر stroke-width إلى strokeWidth يدويا. للأيقونات الفردية، أنظف نهج هو الحفظ كملف SVG واستيراده كمكوّن عبر svgr.

نعم، يستخدم كل من JSX وTSX className. الاستثناء الوحيد داخل dangerouslySetInnerHTML، حيث تحتفظ سلسلة HTML الخام بـ class لأنها تُدرَج كما هي في DOM.

لا. الناتج هو شذرة JSX فقط، دون غلاف export default function ودون تعليقات أنواع. الصقها في ملف .jsx أو .tsx وأضف الخصائص والأنواع والغلاف بنفسك. ما زال class يُحوَّل إلى className، وهو بالضبط ما يتوقعه TSX.

تُمرَّر كما هي دون تغيير. لا يعيد المحوّل تسمية معالجات الأحداث، فغيّر onclick إلى onClick واستبدل نص السلسلة بدالة حقيقية، مثل onClick={() => doThing()}. ستحتاج إلى تعريف doThing في نطاق مكوّنك.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

مدقق البريد الإلكتروني

تحقق من عنوان بريد إلكتروني: فحص صياغة RFC 5322، واستعلام حي عن سجل MX، بالإضافة إلى تفاصيل الجزء المحلي والنطاق والطول. لا يتم إرسال أي بريد.

مولد EditorConfig

أنشئ ملف .editorconfig بقواعد نمط المسافة البادئة وحجمها ونهاية السطر ومجموعة الأحرف والمسافات البيضاء، لتنسيق موحّد عبر بيئات التطوير المتكاملة (IDEs) والمحررات.

منسق HTML

نسّق HTML محلياً في المتصفح بمسافة بادئة من مسافتين أو أربع مسافات. لا يُرفع HTML ولا يُتحقق منه.

الأداة متاحة بلغات أخرى