جافا سكريبت

مقدمة عن JSX

عندما تم تقديم React لأول مرة ، كانت JSX هي إحدى الميزات التي جذبت انتباه معظم الناس (ووجهت أكبر قدر من الانتقادات). إذا كنت تتعلم React ، أو سبق لك أن رأيت أي أمثلة للتعليمات البرمجية ، فمن المحتمل أنك قمت بأخذ مزدوج في بناء الجملة. ما هذا الدمج الغريب لـ HTML و JavaScript؟
دعونا نلقي نظرة على ماهية JSX ، وكيف تعمل ، ولماذا نريد خلط HTML و JS في المقام الأول!

ما هو JSX؟
تم تعريفه بواسطة مستندات React على أنه “امتداد لجافا سكريبت”
(React.createElement(component, props, …children)
JSX هو ما يجعل كتابة مكونات React سهلة.
تعتبر JSX لغة خاصة بالمجال (DSL) ، والتي يمكن أن تبدو مشابهة جدًا للغة النموذج ، مثل Moustache أو Thymeleaf أو Razor أو Twig أو غيرها.

إليك مثال على تركيبها:

const element = <h1>Hello, World!</h1>;
Code language: JavaScript (javascript)

ما يأتي بعد علامة يساوي ليس سلسلة نصية أو HTML ، بل JSX. لا يتم عرضه على HTML مباشرة ولكن بدلاً من ذلك يتم عرضه إلى فئات React التي يستهلكها DOM الظاهري. في النهاية ، من خلال السحر الغامض لـ Virtual DOM ، سوف تشق طريقها إلى الصفحة ويتم تحويلها إلى HTML.

كيف يعمل؟
JSX لا يزال مجرد JavaScript مع بعض الوظائف الإضافية. باستخدام JSX ، يمكنك كتابة التعليمات البرمجية التي تبدو مشابهة جدًا لـ HTML أو XML ، ولكن لديك القدرة على مزج أساليب ومتغيرات JavaScript بسلاسة في التعليمات البرمجية الخاصة بك. يتم تفسير JSX بواسطة مترجم ، مثل Babel ، ويتم تقديمه إلى كود JavaScript الذي يمكن لـ UI Framework (React ، في هذه الحالة .

لماذا نستخدم JSX؟
هناك عدة أسباب تجعل JSX فكرة جيدة لديها حاجز منخفض للدخول. JSX أقرب ما يكون إلى HTML و CSS كما هو الحال حاليًا.
-باستخدام JSX ، يمكنك بسهولة تضمين أجزاء من JavaScript في القوالب الخاصة بك دون الحاجة إلى تعلم لغة قوالب إضافية والاضطرار إلى التعامل مع مستويات معقدة من التجريد. يجب ألا يواجه أي شخص مطلع على HTML و CSS وجافا سكريبت أي مشكلة في قراءة وفهم قوالب JSX.
– يدعم TypeScript تجميع ملفات TSX مع فحص النوع. هذا يعني أنه إذا ارتكبت خطأ في اسم عنصر أو نوع سمة ، فسوف تفشل عملية التجميع وستظهر لك رسالة خطأ تشير إلى خطأك.
– تدعم IDEs الشائعة مثل VS Code أيضًا ملفات TSX وتوفر إكمال التعليمات البرمجية وإعادة البناء وغيرها من الميزات المفيدة.
-الأمان. تهتم JSX بقضايا تعقيم الإخراج المعتادة لمنع الهجمات مثل البرمجة النصية عبر المواقع.

استخدام JSX مع React
هيا لنبدأ مع الأساسيات. كما ذكرنا سابقًا ، يجب تحويل JSX إلى JavaScript عادي قبل عرضه في المتصفح. لذلك ، إذا كنت ترغب في متابعة الأمثلة ، فيجب أن يكون لديك تطبيق React مُعد بالفعل.
يمكنك اختيار أداة Create React App من Facebook. لاستخدام هذا ، ستحتاج إلى تثبيت Node و npm. إذا لم تقم بذلك ، فتوجه إلى صفحة تنزيل Node.js واحصل على أحدث إصدار لنظامك (يأتي npm مرفقًا مع Node).



اظهر المزيد

مقالات ذات صلة

زر الذهاب إلى الأعلى

أنت تستخدم إضافة Adblock

الاعلانات هي مصدرنا الوحيد لدفع التكلفة التشغيلية لهذا المشروع الريادي يرجى الغاء تفعيل حاجب الأعلانات