كتابة الترميز باستخدام JSX

JSXهو امتداد للصياغة في JavaScript يتيح لك كتابة ترميز يشبه HTML داخل ملف JavaScript. على الرغم من وجود طرق أخرى لكتابة المكونات، فإن معظم مطوري React يفضلون اختصار JSX، ومعظم قواعد التعليمات البرمجية تستخدمه.

JSX: وضع الترميز في JavaScript

تم بناء الويب على HTML وCSS وJavaScript. لسنوات عديدة، احتفظ مطورو الويب بالمحتوى في HTML والتصميم في CSS والمنطق في JavaScript — غالبًا في ملفات منفصلة! تم وضع علامة على المحتوى داخل HTML بينما عاش منطق الصفحة بشكل منفصل في JavaScript:

HTML

JavaScript

ولكن مع زيادة تفاعلية الويب، أصبح المنطق يحدد المحتوى بشكل متزايد. أصبح JavaScript مسؤولًا عن HTML! لهذا السببفي React، يعيش منطق التصيير والترميز معًا في نفس المكان — المكونات.

Sidebar.jsمكون React

Form.jsمكون React

يحافظ على منطق تصيير الزر وترميزه معًا على تزامنهما معًا في كل تعديل. على العكس من ذلك، التفاصيل غير المرتبطة، مثل ترميز الزر وترميز الشريط الجانبي، معزولة عن بعضها البعض، مما يجعل تغيير أي منهما بمفرده أكثر أمانًا.

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

تحويل HTML إلى JSX

لنفترض أن لديك بعض HTML (صالح تمامًا):

وتريد وضعه في مكونك:

إذا قمت بنسخه ولصقه كما هو، فلن يعمل:

هذا لأن JSX أكثر صرامة وله قواعد أكثر قليلاً من HTML! إذا قرأت رسائل الخطأ أعلاه، فستوجهك لإصلاح الترميز، أو يمكنك اتباع الدليل أدناه.

قواعد JSX

1. إرجاع عنصر جذر واحد

لإرجاع عناصر متعددة من مكون،قم بلفها بعلامة أصل واحدة.

على سبيل المثال، يمكنك استخدام<div>:

إذا كنت لا تريد إضافة<div>إضافي إلى ترميزك، يمكنك كتابة<> و </>بدلاً من ذلك:

يُسمى هذا الوسم الفارغFragment.تسمح لك الأجزاء (Fragments) بتجميع العناصر دون ترك أي أثر في شجرة HTML للمتصفح.

2. أغلق جميع الوسوم

يتطلب JSX إغلاق الوسوم بشكل صريح: الوسوم ذاتية الإغلاق مثل<img>يجب أن تصبح<img />، والوسوم المغلفة مثل<li>orangesيجب كتابتها كـ<li>oranges</li>.

هكذا تبدو صورة هيدي لامار وعناصر القائمة مغلقة:

3. استخدم camelCaseلـمعظم الأشياء!

يتحول JSX إلى JavaScript وتتحول السمات المكتوبة في JSX إلى مفاتيح لكائنات JavaScript. في مكوناتك الخاصة، غالبًا ما سترغب في قراءة تلك السمات إلى متغيرات. لكن JavaScript لديها قيود على أسماء المتغيرات. على سبيل المثال، لا يمكن أن تحتوي أسماؤها على شرطات أو أن تكون كلمات محجوزة مثلclass.

لهذا السبب، في React، تُكتب العديد من سمات HTML وSVG باستخدام camelCase. على سبيل المثال، بدلاً منstroke-widthتستخدمstrokeWidth. وبما أنclassكلمة محجوزة، في React تكتبclassNameبدلاً من ذلك، مسماة على اسمخاصية DOM المقابلة:

يمكنكالعثور على كل هذه السمات في قائمة خاصيات مكون DOM.إذا أخطأت في واحدة، لا تقلق—سيطبع React رسالة تحتوي على تصحيح محتمل فيوحدة تحكم المتصفح.

نصيحة احترافية: استخدم محول JSX

يمكن أن يكون تحويل كل هذه السمات في الترميز الحالي مملًا! نوصي باستخداممحوللترجمة HTML وSVG الحاليين إلى JSX. المحولات مفيدة جدًا في الممارسة، لكن لا يزال من المفهم فهم ما يجري حتى تتمكن من كتابة JSX بسهولة بنفسك.

ها هي نتيجتك النهائية:

ملخص

الآن أنت تعرف سبب وجود JSX وكيفية استخدامه في المكونات:

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