الفرق بين المراجعتين لصفحة: «React/introducing jsx»

مراجعة 14:31، 11 يوليو 2018

فلننظر إلى تعريف هذا المتغير:

const element = <h1>!أهلًا بالعالم</h1>;

إنّ الصّياغة الغريبة السّابقة التي تحتوي على وسم هي ليست سلسلة نصيّة ولا حتى HTML.

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

تُنتِج JSX عناصر React. سنستعرض إظهار هذه العناصر في DOM في قسم تصيير العناصر (Rendering Elements). سنتحدّث في الفقرات التالية عن أساسيّات JSX الضرورية للبدء.

لماذا JSX؟

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

بدلًا من الفصل بين التقنيات عن طريق وضع اللغة الترميزيّة (markup) والمنطق في ملفّات منفصلة، تفصل React بين المهام عبر وحدات مرتبطة بإحكام تدعى المكونات (components) والتي تحتوي على كليهما معًا. سنعود للحديث عن المكونات في القسم الخاص بها. ولكن إن لم تكن مرتاحًا لوضع اللغة الترميزيّة ضمن JavaScript فاطلع على هذه المناقشة التي قد تقنعك بعكس ذلك.

لا تشترط React استخدام JSX، ولكن يجدها الغالبيّة كمساعدة بصريّة عند التعامل مع واجهة المستخدم بداخل شيفرة JavaScript، فهي تسمح لمكتبة React بأن تُظهِر المزيد من الأخطاء المفيدة والرسائل التحذيريّة.

تضمين التعابير في JSX

نُعرِّف في المثال التالي متغيّرًا يُدعى name ونستخدمه بداخل JSX عن طريق تغليفه بين قوسين:

const name = 'محمّد';
const element = <h1>أهلًا {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

بإمكانك وضع أي تعبير صحيح في JavaScript بداخل القوسين في JSX، على سبيل المثال 2+2، أو user.firstName، أو ‎formatName(user)‎.

نُضمِّن في المثال التالي نتيجة استدعاء دالة JavaScript، وهي ‎formatName(user)‎، بداخل عنصر ‎<h1>‎:

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:مقدمة إلى JSX}}</noinclude>
+فلننظر إلى تعريف هذا المتغير:<syntaxhighlight lang="javascript">
+const element = <h1>!أهلًا بالعالم</h1>;
+</syntaxhighlight>إنّ الصّياغة الغريبة السّابقة التي تحتوي على وسم هي ليست سلسلة نصيّة ولا حتى HTML.
+تُدعى الصّياغة السّابقة JSX وهي عبارة عن امتداد لصياغة JavaScript، نوصي باستخدامها مع React لوصف المظهر الذي ينبغي أن تكون عليه واجهة المستخدم. قد تُذكِّرك JSX بلغات القوالب، ولكنها تمتلك قوة JavaScript الكاملة.
+تُنتِج JSX عناصر React. سنستعرض إظهار هذه العناصر في DOM في قسم [[React/rendering elements|تصيير العناصر (Rendering Elements)]]. سنتحدّث في الفقرات التالية عن أساسيّات JSX الضرورية للبدء.
+== لماذا JSX؟ ==
+تتقبّل React حقيقة أنّ منطق التصيير مرتبط بشكل متوارث مع المنطق الآخر لواجهة المستخدم، والذي نقصد به كيفية التعامل مع الأحداث، وكيفية تغيّر الحالة مع مرور الزمن، وكيفية تحضير البيانات لعرضها.
+بدلًا من الفصل بين التقنيات عن طريق وضع اللغة الترميزيّة (markup) والمنطق في ملفّات منفصلة، تفصل React بين المهام عبر وحدات مرتبطة بإحكام تدعى المكونات (components) والتي تحتوي على كليهما معًا. سنعود للحديث عن المكونات في [[React/components and props|القسم الخاص بها]]. ولكن إن لم تكن مرتاحًا لوضع اللغة الترميزيّة ضمن JavaScript فاطلع على [https://www.youtube.com/watch?v=x7cQ3mrcKaY هذه المناقشة] التي قد تقنعك بعكس ذلك.
+[[React/react without jsx|لا تشترط React استخدام JSX]]، ولكن يجدها الغالبيّة كمساعدة بصريّة عند التعامل مع واجهة المستخدم بداخل شيفرة JavaScript، فهي تسمح لمكتبة React بأن تُظهِر المزيد من الأخطاء المفيدة والرسائل التحذيريّة.
+== تضمين التعابير في JSX ==
+نُعرِّف في المثال التالي متغيّرًا يُدعى <code>name</code> ونستخدمه بداخل JSX عن طريق تغليفه بين قوسين:<syntaxhighlight lang="javascript">
+const name = 'محمّد';
+const element = <h1>أهلًا {name}</h1>;
+ReactDOM.render(
+  element,
+  document.getElementById('root')
+);
+</syntaxhighlight>بإمكانك وضع أي تعبير صحيح في JavaScript بداخل القوسين في JSX، على سبيل المثال <code>2+2</code>، أو <code>user.firstName</code>، أو <code>‎formatName(user)</code>‎.
+نُضمِّن في المثال التالي نتيجة استدعاء دالة JavaScript، وهي <code>‎formatName(user)</code>‎، بداخل عنصر ‎<code><nowiki><h1></nowiki></code>‎: