منسق JSX
نسّق وجمّل كود JSX مع إبراز بناء الجملة
الإدخال
المخرجات المنسقة
ما هو منسق JSX؟
JSX هو JavaScript مع بناء جملة شبيه بـXML لمكونات React. يضيف منسق JSX المسافات البادئة وفواصل الأسطر إلى كود JSX/React. تحدد وثائق JSX في React بناء الجملة. قد لا يتعامل منسق JavaScript القياسي مع JSX بشكل صحيح.
تعمل هذه الأداة بالكامل في متصفحك. لا تُرسل أي بيانات إلى خادم. الصق JSX أو ارفع ملف .jsx أو .js للحصول على مخرجات منسقة. لـJavaScript العادي، استخدم منسق JavaScript. للتحقق، استخدم مدقق JavaScript. للتحويل إلى TypeScript، استخدم JavaScript إلى TypeScript.
كيفية استخدام هذه الأداة
الصق أو ارفع
الصق كود JSX أو React في اللوحة اليسرى أو ارفع ملف .jsx أو .js. استخدم تحميل مثال لتحميل كود نموذجي. استخدم مسح لإعادة الضبط.
تحقق من المخرجات
تعرض اللوحة اليمنى JSX منسقاً بمسافات بادئة صحيحة. سيُظهر JSX غير الصالح خطأً.
انسخ أو نزّل
استخدم نسخ أو تنزيل للحصول على النتيجة. لتشغيل الكود، استخدم وحدة تحكم JavaScript. للضغط، استخدم مضغط JavaScript.
أمثلة منسق JSX
إليك مثال على تنسيق كود JSX/React المضغوط.
مثال: مكوّن بطاقة المشترك
مدخل JSX المضغوط:
المخرجات المنسقة:
متى يساعد منسق JSX
عند العمل مع React أو Next.js أو أطر أخرى قائمة على JSX، يتعامل هذا المنسق مع مزيج JavaScript وXML. ممتاز للمكونات والخطافات وقوالب JSX. كثيراً ما تستخدم أدوات البناء مثل webpack وVite الـBabel لتحويل JSX. لـJS العادي، استخدم منسق JavaScript.
الأسئلة الشائعة
هل بياناتي خاصة؟
نعم. يعمل التنسيق بالكامل في متصفحك. لا تُرسل أي بيانات إلى أي خادم.
منسق JSX مقابل منسق JS؟
يفهم منسق JSX بناء جملة JSX (الوسوم والخصائص). منسق JS للـJavaScript العادي. استخدم منسق JSX لكود React.
هل يدعم TypeScript/TSX؟
قد يتعامل مع TSX في بعض الحالات. للتنسيق المتمحور حول TypeScript، تحقق من المخرجات.
ماذا عن قوالب Vue؟
Vue يستخدم بناء جملة قالب مختلفاً. هذه الأداة لـJSX/React.