مكوّنك الأول

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

في الويب، تمكننا HTML من إنشاء صفحات مبنية بجدارة بالعديد من عناصرها المدمَجة مثل <h1> و <li>:

<article>
  <h1>مكوّني الأول</h1>
  <ol>
    <li>المكوّنات: حجر بناء واجهة المستخدم</li>
    <li>تعريف المكوّن</li>
    <li>استخدام المكوّن</li>
  </ol>
</article>

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

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

تمامًا مثل عناصر HTML، يمكنك تجميع وترتيب وتضمين المكوّنات لتصميم صفحات كاملة. على سبيل المثال، صفحة المستندات التي تقرأها مصنوعة من مكوّنات React.

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">المستندات</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

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

تعريف المكوّن

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

وهنا كيفية بناء مكوّن:

الخطوة الأولى: تصدير المكوّن

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

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

باستخدام الدالة Profile() { } ، تقوم بتعريف دالة JavaScript بإسم “Profile”.

الخطوة الثالثة: أضف الترميز المرئي

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

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

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="كاثرين جونسون" />;

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

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="كاثرين جونسون" />
  </div>
);

استخدام المكوّن

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

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

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

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

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

<section>
  <h1>علماء رائعون</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="كاثرين جونسون" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="كاثرين جونسون" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="كاثرين جونسون" />
</section>

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

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

نظرًا لأن مكوّنات Profile يتم تصييرها داخل مكوّن Gallery - وحتى لعدة مرات! - يمكننا القول بأن مكون Gallery هو المكوّن الأب، الذي يقوم بتصيير كل مكوّن Profile كـ “ابن” . هذا جزء من سحر React: يمكنك تعريف مكوّن مرة واحدة، ثم استخدامه في العديد من الأماكن والعديد من المرات كما تريد.

export default function Gallery() {
  // 🔴 لا تقم أبدا بتعريف مكوّن داخل مكوّن اخر
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ قم بتعريف المكوّنات على المستوى الأعلى
function Profile() {
  // ...
}