كتابة ترميز البناء بـ JSX

JSX: وضع علامات البناء داخل الجافاسكربت

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

ولكن مع تفاعلية الويب، أصبح المنطق مسيطرًا على المحتوى. وبالتالي، أصبح من الأفضل أن يكون JavaScript داخل HTML. ولهذا السبب، في React، يتجمع المنطق والبناء معًا في نفس المكان - المكونات.

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

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

تحويل HTML إلى JSX

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

<h1>مَهمَّات هايدي ليمار</h1>
<img
  src="https://i.imgur.com/yXOvdOSs.jpg"
  alt="هايدي"
  class="photo"
>
<ul>
  <li>اختراع إشارات المرور
  <li>إعادة تمثيل مشهد من فيلم
  <li>تحسين بعض التكنولوجيا
</ul>

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

export default function TodoList() {
  return (
    // ???
  )
}

إن نسختها ولصقتها لن تعمل

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

قواعد JSX

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

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

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

<div>
  <h1>مَهام هايدي ليمار</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="هايدي" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

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

<>
  <h1>مَهام هايدي ليمار</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="هايدي" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

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

2. أغلق كل العلامات

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

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

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="هايدي"
    class="photo"
  />
  <ul>
    <li>اختراع إشارات المرور</li>
    <li>إعادة تمثيل مشهد من فيلم</li>
    <li>تحسين بعض التكنولوجيا</li>
  </ul>
</>

3. اكتب camelCase لكل الأشياء لمعظم الأشياء!

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

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

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="هايدي"
  className="photo"
/>

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

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

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

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