شرح JSX بالتفصيل

توفِّر JSX علينا عناء إنشاء العناصر باستخدام الدالة React.createElement(component, props, ...children)‎. انظر إلى الشيفرة التالية في JSX:

<MyButton color="blue" shadowSize={2}>
  انقر هنا
</MyButton>

تُترجَم الشيفرة السّابقة إلى:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'انقر هنا'
)

بإمكانك أيضًا استخدام الشكل ذاتي الإغلاق للعنصر إن كان لا يحتوي على أيّة عناصر أبناء:

<div className="sidebar" />

تُترجَم الشيفرة السّابقة إلى:

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

إن أردتَ اختبار كيفيّة تحويل بعض شيفرات JSX إلى JavaScript فبإمكانك تجريب مُترجِم Babel على الإنترنت.

تحديد نوع عنصر React

يُحدِّد أول عنصر في شيفرة JSX نوع عنصر React. تُشير الأنواع المكتوبة بأحرف كبيرة إلى أنّ العنصر المذكور هو مُكوِّن React. تُترجَم هذه العناصر إلى مرجع مباشر إلى المتغيّر الذي يحمل اسمها، لذا إن استخدمت التعبير ‎<Foo />‎ في JSX يجب أن يكون المتغيّر Foo في نفس المجال.

يجب على React أن تكون في نفس المجال

لمّا كانت JSX تُترجَم إلى نداءات للتابع React.createElement، فيجب على مكتبة React أن تكون في نفس المجال الذي تكون فيه شيفرة JSX.

على سبيل المثال الاستيراد التالي ضروري في هذه الشّيفرة على الرغم من أنّ React و CustomButton لا يُشار إليهما بشكل مباشر من JavaScript:

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  
  return <CustomButton color="red" />;
  // تُكافئ: return React.createElement(CustomButton, {color: 'red'}, null);
}

إن لم تستخدم مُحزِّم JavaScript وطلبتَ React من داخل عنصر <script>، فهي موجودة مُسبقًا في نفس المدى لأنّها عامّة (global).

استخدام النقطة لأنواع JSX

بإمكانك الإشارة أيضًا إلى مُكوِّن React باستخدام النقطة من داخل JSX. وهو أمرٌ جيّد إن كانت لديك وحدة (module) وحيدة والتي تُصدِّر عدّة مُكوِّنات React. على سبيل المثال إن كان MyComponents.DatePicker مُكوِّنًا، فيُمكِنك استخدامه بشكلٍ مباشر من JSX كما يلي:

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>تخيّل وجود {props.color} انتقاء للتاريخ هنا.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

يجب كتابة المكونات المعرفة من قبل المستخدم بأحرف كبيرة

عندما يبدأ نوع العنصر بحرف صغير، فهو يُشير إلى مُكوِّنات داخليّة مثل <div> أو <span> وينتج عنه السلسلة النصيّة 'div' أو 'span' والتي تُمرَّر إلى التّابع React.createElement. أمّا الأنواع التي تبدأ بأحرف كبيرة مثل ‎<Foo />‎ فتُترجَم إلى React.createElement(Foo)‎ وتُوافِق مُكوِّنات مُعرَّفة أو مُستوردة في ملّف JavaScript لديك.

نوصي بتسمية المُكوِّنات بأحرف كبيرة، وإن كان لديك مُكوِّن يبدأ بحرف صغير فعيّنه إلى مُتغيّر يبدأ بحرف كبير قبل استخدامه في JSX.

على سبيل المثال لن تعمل الشيفرة التالية كما هو مُتوقَّع: