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

React هي مكتبة جافا سكريبت لعرض واجهات المستخدم (UI). تُبنى واجهة المستخدم من وحدات صغيرة مثل الأزرار والنصوص والصور. تتيح لك React دمجها فيمكوناتقابلة لإعادة الاستخدام والتضمين. من المواقع الإلكترونية إلى تطبيقات الهاتف، يمكن تقسيم كل شيء على الشاشة إلى مكونات. في هذا الفصل، ستتعلم كيفية إنشاء وتخصيص وعرض مكونات React بشكل مشروط.

مكونك الأول

تُبنى تطبيقات React من قطع معزولة لواجهة المستخدم تسمىمكونات. مكون React هو دالة جافا سكريبت يمكنك رشها بعلامات الترميز. يمكن أن تكون المكونات صغيرة مثل زر، أو كبيرة مثل صفحة كاملة. إليك مكونGalleryيقوم بعرض ثلاثة مكوناتProfile:

استيراد وتصدير المكونات

يمكنك تعريف العديد من المكونات في ملف واحد، لكن الملفات الكبيرة قد تصبح صعبة التنقل. لحل هذه المشكلة، يمكنكتصديرمكون إلى ملفه الخاص، ثماستيرادذلك المكون من ملف آخر:

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

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

إذا قمنا بلصق ترميز HTML موجود في مكون React، فقد لا يعمل دائمًا:

إذا كان لديك HTML موجود مثل هذا، يمكنك إصلاحه باستخدامأداة تحويل:

JavaScript في JSX باستخدام الأقواس المعقوفة

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

تمرير الخصائص (props) إلى مكون

تستخدم مكونات Reactالخصائص (props)للتواصل مع بعضها البعض. يمكن لكل مكون أب تمرير بعض المعلومات إلى مكوناته الفرعية من خلال منحها خصائص. قد تذكرك الخصائص بسمات HTML، ولكن يمكنك تمرير أي قيمة JavaScript من خلالها، بما في ذلك الكائنات والمصفوفات والدوال، وحتى JSX!

التصيير الشرطي

غالبًا ما تحتاج مكوناتك إلى عرض أشياء مختلفة اعتمادًا على شروط مختلفة. في React، يمكنك تصيير JSX شرطيًا باستخدام صيغة JavaScript مثل عباراتif، والمشغلين&&، و? :.

في هذا المثال، يتم استخدام مشغل JavaScript&&لتصيير علامة صح بشكل شرطي:

تصيير القوائم

غالبًا ما ترغب في عرض مكونات متعددة متشابهة من مجموعة بيانات. يمكنك استخدام دالتي JavaScriptfilter() و map()مع React لتصفية وتحويل مصفوفة البيانات الخاصة بك إلى مصفوفة من المكونات.

For each array item, you will need to specify akey. Usually, you will want to use an ID from the database as akey. Keys let React keep track of each item’s place in the list even if the list changes.

الحفاظ على نقاء المكونات

بعض دوال JavaScript هينقية.الدالة النقية:

• تهتم بشؤونها الخاصة.فهي لا تغير أي كائنات أو متغيرات كانت موجودة قبل استدعائها.
• نفس المدخلات، نفس المخرجات.عند إعطائها نفس المدخلات، يجب أن تعيد الدالة النقية دائمًا نفس النتيجة.

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

يمكنك جعل هذا المكون نقيًا عن طريق تمرير خاصية بدلاً من تعديل متغير موجود مسبقًا:

واجهة المستخدم الخاصة بك كشجرة

يستخدم React الأشجار لنمذجة العلاقات بين المكونات والوحدات النمطية.

شجرة عرض React هي تمثيل للعلاقة بين المكونات الأم والطفل.

مثال على شجرة عرض React.

المكونات القريبة من أعلى الشجرة، بالقرب من المكون الجذري، تعتبر مكونات ذات مستوى عالٍ. المكونات التي ليس لها مكونات فرعية هي مكونات ورقية. هذا التصنيف للمكونات مفيد لفهم تدفق البيانات وأداء العرض.

نمذجة العلاقة بين وحدات JavaScript النمطية هي طريقة أخرى مفيدة لفهم تطبيقك. نشير إليها باسم شجرة تبعية الوحدات النمطية.

مثال على شجرة تبعية الوحدات النمطية.

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

ما التالي؟

توجه إلىمكونك الأوللتبدأ قراءة هذا الفصل صفحة بصفحة!

أو، إذا كنت ملمًا بالفعل بهذه المواضيع، لماذا لا تقرأ عنإضافة التفاعلية؟