تعلم React
وصف واجهة المستخدم UI

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

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

You will learn

  • لماذا يمزج React بين علامات البناء ومنطق التصيير
  • كيف يختلف JSX عن HTML
  • كيفية عرض المعلومات باستخدام JSX

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

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

ترميز HTML بخلفية بنفسجية و div يحتوي على علامتي p و form كطفلين له.
ترميز HTML بخلفية بنفسجية و div يحتوي على علامتي p و form كطفلين له.

HTML

ثلاثة معالجي JavaScript بخلفية صفراء: onSubmit، onLogin، و onClick.
ثلاثة معالجي JavaScript بخلفية صفراء: onSubmit، onLogin، و onClick.

JavaScript

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

الصورة تصف المكون في React الذي يحتوي على ترميز HTML و JavaScript مختلط من الأمثلة السابقة. اسم الدالة هو "Sidebar" التي تستدعي الدالة "isLoggedIn" المميزة باللون الأصفر. ومدرجة داخل الدالة المميزة باللون الأرجواني، علامة p من السابق، وعلامة form تشير إلى المكون المعروض في الرسم التوضيحي التالي.
الصورة تصف المكون في React الذي يحتوي على ترميز HTML و JavaScript مختلط من الأمثلة السابقة. اسم الدالة هو "Sidebar" التي تستدعي الدالة "isLoggedIn" المميزة باللون الأصفر. ومدرجة داخل الدالة المميزة باللون الأرجواني، علامة p من السابق، وعلامة form تشير إلى المكون المعروض في الرسم التوضيحي التالي.

مكوّن React Sidebar.js

مكون React يحتوي على ترميز HTML و JavaScript مختلط من الأمثلة السابقة. اسم الدالة هو Form وتحتوي على معالجين onClick و onSubmit المميزين باللون الأصفر. بعد المعالجين يأتي HTML المميز باللون الأرجواني. يحتوي ال HTML على عنصر form مضمن مع عنصر input، يحتوي كل منهما على خاصية onClick.
مكون React يحتوي على ترميز HTML و JavaScript مختلط من الأمثلة السابقة. اسم الدالة هو Form وتحتوي على معالجين onClick و onSubmit المميزين باللون الأصفر. بعد المعالجين يأتي HTML المميز باللون الأرجواني. يحتوي ال HTML على عنصر form مضمن مع عنصر input، يحتوي كل منهما على خاصية onClick.

مكوّن ReactForm.js

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

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

Note

JSX و React هما شيئان منفصلان عن بعضهما البعض. غالبًا ما يتم استخدامهما معًا، ولكن يمكنك استخدام أحدهما بشكل مستقل. JSX هو امتداد لكود البناء، بينما React مكتبة لـ JavaScript.

تحويل 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 (
    // ???
  )
}

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

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

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

Note

في أغلب الأحيان، ستساعدك رسائل الخطأ التي تظهر على الشاشة في React على إيجاد مكان المشكلة. قم بقراءتها إذا واجهتك مشكلة!

قواعد 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 في المتصفح.

Deep Dive

لماذا يجب عليك تجميع عناصر JSX في عنصر واحد؟

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

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 بطباعة رسالة مع تصحيح محتمل إلى وحدة التحكم في المتصفح.

Pitfall

لأسباب تاريخية، تكتب السمات aria-* و data-* كما هي في HTML مع شرطات.

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

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

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

export default function TodoList() {
  return (
    <>
      <h1>مهمات هايدي</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="هايدي"
        className="photo"
      />
      <ul>
        <li>اختراع إشارات المرور</li>
        <li>إعادة تمثيل مشهد من فيلم</li>
        <li>تحسين بعض التكنولوجيا</li>
      </ul>
    </>
  );
}

Recap

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

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

Try out some challenges

Challenge 1 of 1:
حوّل بعض HTML إلى JSX

تم لصق هذا الكود في مكون، لكنه ليس JSX صالح. قم بإصلاحه:

export default function Bio() {
  return (
    <div class="intro">
      <h1>مرحبًا بكم في موقعي!</h1>
    </div>
    <p class="summary">
      يمكنك العثور على أفكاري هنا.
      <br><br>
      <b>و <i>صور</i></b> للعلماء!
    </p>
  );
}

أيًّا ما تفعل، استخدام محّول أو بيدك، اختر المناسب لك.

Previousاستيراد وتصدير المكونات
NextJavaScript في JSX باستخدام الأقواس المنحنية