مكونك الأول

المكوناتهي أحد المفاهيم الأساسية في React. فهي الأساس الذي تبني عليه واجهات المستخدم (UI)، مما يجعلها المكان المثالي لبدء رحلتك مع React!

المكونات: لبنات بناء واجهة المستخدم

على الويب، تتيح لنا HTML إنشاء مستندات منظمة غنية باستخدام مجموعة الوسوم المدمجة فيها مثل<h1> و <li>:

تمثل هذه العلامات هذه المقالة<article>، وعنوانها<h1>، وجدول المحتويات (المختصر) كقائمة مرتبة<ol>. تقف مثل هذه العلامات، إلى جانب CSS للتنسيق، وJavaScript لإضافة التفاعلية، وراء كل شريط جانبي وصورة رمزية ونافذة منبثقة وقائمة منسدلة — وراء كل جزء من واجهة المستخدم تراه على الويب.

تتيح لك React دمج علاماتك وCSS وJavaScript في "مكونات" مخصصة،وهي عناصر واجهة مستخدم قابلة لإعادة الاستخدام في تطبيقك.يمكن تحويل كود جدول المحتويات الذي رأيته أعلاه إلى مكون<TableOfContents />يمكنك عرضه في كل صفحة. في الخلفية، لا يزال يستخدم نفس وسوم HTML مثل<article>، و<h1>، إلخ.

تمامًا كما هو الحال مع وسوم HTML، يمكنك تركيب وترتيب وتداخل المكونات لتصميم صفحات كاملة. على سبيل المثال، صفحة الوثائق التي تقرأها الآن مكونة من مكونات React:

مع نمو مشروعك، ستلاحظ أنه يمكن تكوين العديد من تصاميمك من خلال إعادة استخدام المكونات التي كتبتها بالفعل، مما يسرع عملية التطوير. يمكن إضافة جدول المحتويات الخاص بنا أعلاه إلى أي شاشة باستخدام<TableOfContents />! يمكنك حتى بدء مشروعك بسرعة باستخدام الآلاف من المكونات التي يشاركها مجتمع React مفتوح المصدر مثلChakra UI و Material UI.

تحديد مكون

تقليديًا عند إنشاء صفحات الويب، كان مطورو الويب يضعون علامات على محتواهم ثم يضيفون التفاعلية برش القليل من JavaScript. كان هذا يعمل بشكل رائع عندما كانت التفاعلية أمرًا إضافيًا على الويب. أما الآن فهي متوقعة للعديد من المواقع وجميع التطبيقات. تضع React التفاعلية في المقام الأول مع الاستمرار في استخدام نفس التقنية:مكون React هو دالة JavaScript يمكنكرش العلامات عليها.إليك كيف يبدو ذلك (يمكنك تعديل المثال أدناه):

وإليك كيفية بناء مكون:

الخطوة 1: تصدير المكون

بادئةexport default هي تركيب قياسي في JavaScript(وليس خاصًا بـ React). تتيح لك تحديد الدالة الرئيسية في ملف بحيث يمكنك استيرادها لاحقًا من ملفات أخرى. (المزيد عن الاستيراد فياستيراد وتصدير المكونات!)

الخطوة 2: تعريف الدالة

باستخدامfunction Profile() { }، تُعرّف دالة JavaScript باسمProfile.

الخطوة 3: إضافة العلامات

يُرجع المكون وسم<img />مع السمتينsrc و alt. يُكتب<img />مثل HTML، لكنه في الواقع JavaScript في الخلفية! يُسمى هذا التركيبJSX، وهو يتيح لك تضمين العلامات داخل JavaScript.

يمكن كتابة عبارات الإرجاع في سطر واحد، كما في هذا المكون:

ولكن إذا لم يكن ترميزك على نفس سطر كلمةreturn، فيجب عليك لفّه بزوج من الأقواس:

استخدام مكون

الآن بعد أن عرّفت مكونProfile، يمكنك تضمينه داخل مكونات أخرى. على سبيل المثال، يمكنك تصدير مكونGalleryيستخدم عدة مكوناتProfile:

ما يراه المتصفح

لاحظ الفرق في حالة الأحرف:

• <section>بأحرف صغيرة، لذا يعرف React أننا نشير إلى وسم HTML.
• <Profile />يبدأ بحرف كبيرP، لذا يعرف React أننا نريد استخدام مكوننا المسمىProfile.

ويتضمنProfileالمزيد من HTML:<img />. في النهاية، هذا ما يراه المتصفح:

تضمين وتنظيم المكونات

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

لأن مكوناتProfileتُعرض داخلGallery—عدة مرات حتى!—يمكننا القول إنGalleryهومكون أب،يعرض كلProfileكـ "طفل". هذا جزء من سحر React: يمكنك تعريف مكون مرة واحدة، ثم استخدامه في أكبر عدد تريده من الأماكن والمرات.

ملخص

لقد تذوقت للتو أول طعم لك من React! دعونا نلخص بعض النقاط الرئيسية.

• يتيح لك React إنشاء مكونات،عناصر واجهة مستخدم قابلة لإعادة الاستخدام لتطبيقك.
• في تطبيق React، كل جزء من واجهة المستخدم هو مكون.
• مكونات React هي دوال JavaScript عادية باستثناء:
  1. أسماؤها تبدأ دائمًا بحرف كبير.
  2. تُرجع ترميز JSX.