محول HTML إلى JSX
محول مجاني من HTML إلى JSX عبر الإنترنت. الصق الشفرة واحصل فورًا على JSX نظيف لـ React مع className وhtmlFor وأنماط camelCase ووسوم مغلقة ذاتيًا وتعليقات آمنة، كله داخل متصفحك.
ماذا يفعل محول HTML إلى JSX؟
يحوّل شفرة HTML العادية إلى JSX يستطيع React عرضه. الصق HTML في منطقة الإدخال وسيظهر JSX المكافئ في لوحة الإخراج، مع تحديث مباشر أثناء الكتابة بعد مهلة قصيرة.
أي الخصائص تُغيَّر أسماؤها؟
class تصبح className، وfor تصبح htmlFor، وtabindex تصبح tabIndex، كما تتحول الخصائص المفصولة بشرطة مثل maxlength وcolspan وstroke-width إلى أسماء camelCase الخاصة بـ React. أما data-* وaria-* فتبقى كما هي.
كيف تُحوَّل خاصية style؟
نص CSS مثل style="background-color: red; font-size: 12px" يصبح كائن JavaScript: style={{backgroundColor:'red', fontSize:'12px'}}، حيث تُكتب كل خاصية CSS بصيغة camelCase وتوضع القيمة بين علامتي تنصيص.
كيف تُعالَج العناصر الفارغة؟
العناصر التي لا تحتمل أبناءً — img وbr وinput وhr وmeta وlink وغيرها — تُطبَّع إلى صيغة الإغلاق الذاتي، فتتحول <img> إلى <img /> وهو ما يتطلبه JSX، وتُغلق عناصر div وspan الفارغة بالطريقة نفسها.
ماذا يحدث لتعليقات HTML؟
تتحول إلى تعليقات JSX: <!-- note --> تصبح {/* note */}. وأي تتابع قد ينهي التعليق مبكرًا يُعطَّل حتى يبقى الكود الناتج قابلًا للترجمة دائمًا.
كيف تُعالَج الكيانات والرموز الخاصة؟
تُفكِّك الكيانات مثل & و&copy; إلى أحرف حقيقية، ثم تُعاد تهريب الأقواس المعقوفة والزاوية بصيغة آمنة لـ JSX، فيُعرض النص الذي يحتوي { } أو < بشكل صحيح دون كسر المكوّن.
ما وظيفة خيار مكوّن الدالة؟
تلتف الشفرة المحوَّلة في قالب جاهز: function Component() { return ( ...JSX... ) } بدل JSX المجرد. فعّلها عندما تريد لصق المقطع مباشرة في ملف React.
هل يُرفَع HTML الخاص بي إلى أي مكان؟
لا. يتم التحليل بالكامل داخل متصفحك عبر DOMParser المدمج، ولا يُرسل شيء إلى أي خادم، فيمكنك تحويل شفرة خاصة بأمان، والأداة تعمل دون اتصال أيضًا.
كيفية استخدام محول HTML إلى JSX
حوّل HTML العادي إلى JSX لـ React جاهزًا للاستخدام دون مغادرة المتصفح. يُحلَّل كل شيء محليًا عبر DOMParser المدمج — لا يُرفع الترميز الخاص بك أبدًا.
- الصق HTML في المحرر الأيسر؛ يظهر ناتج JSX على اليمين ويتحدّث أثناء الكتابة (تخميد 300 مللي ثانية).
- اختر عرض الإزاحة في "المسافة البادئة" — مسافتان أو أربع لكل مستوى تداخل.
- فعّل "مكوّن دالة" لتغليف الناتج في function Component() { return ( ... ) } جاهزًا للصق في ملف React.
- استخدم «نسخ» لأخذ الناتج، أو «مثال» لتحميل عينة، أو «مسح» للبدء من جديد.
يتحول class وfor وtabindex إلى className وhtmlFor وtabIndex، وتصبح سلاسل style كائنات بنمط camelCase، وتُصدر العناصر الفارغة مثل img أو br ذاتية الإغلاق — وهو بالضبط ما يتوقعه JSX.
أدوات ذات صلة
- مجمّل HTML نسق وجمّل كود HTML فورًا. حوّل HTML المضغوط إلى كود نظيف ومقروء مع مسافات بادئة. أداة مجانية عبر الإنترنت، بدون تسجيل.
- كود إلى صورة حوّل مقتطفات الكود إلى صور قابلة للمشاركة مع تمييز بناء الجملة والسمات المخصصة وزخارف النافذة. خصوصية 100%، كل شيء في متصفحك.
- مدقق التجزئة احسب وتحقق من تجزئات MD5 وSHA-1 وSHA-256 وSHA-512 محليًا
- حاسبة Chmod حاسبة chmod مجانية عبر الإنترنت لتصور وحساب أذونات ملفات Linux بمربعات اختيار. تحويل فوري بين التدوين الرقمي (755، 644) والرمزي (rwxr-xr-x). يدعم الأذونات الخاصة مثل setuid وsetgid وsticky bit.
- جدول ASCII مرجع كامل لترميز أحرف ASCII مع الأكواد العشرية والسداسية العشرية والثمانية والثنائية وكيانات HTML وأوصاف الأحرف. البحث والتصفية الفورية.
- عارض سداسي عشري عرض محتويات الملفات بتنسيق سداسي عشري مع البحث والتنقل بالإزاحة والتمرير الافتراضي
- بحث أنواع MIME ابحث فوراً عن أنواع MIME حسب امتداد الملف أو ابحث عن الامتدادات حسب نوع MIME. مرجع مجاني عبر الإنترنت مع أكثر من 1000 إدخال.
- فحص دقة الشاشة اكتشاف دقة الشاشة وحجم إطار العرض وDPI وعمق اللون في الوقت الفعلي.