مقدمة إلى المكونات (Components): أساس بناء واجهات المستخدم الحديثة

من أبرز الميزات التي وفرتها أطر عمل الجافا سكريبت هي إمكانية تقسيم الصفحة إلى مجموعة من العناصر التي يمكن أن تحمل مسميات مختلفة، والاسم الشائع لها هو المكونات (Components). فما هو المكون؟ وكيف يمكننا أن ننظر إلى الصفحة الكاملة على أنها مقسمة إلى مجموعة من المكونات، كل واحد منها هو عبارة عن ملف كود مستقل بذاته، سهل التعديل، وسهل القراءة، ويمكن حتى إعادة استخدامه.

لفهم هذا المفهوم، دعنا نفترض أنه مطلوب منك بناء الموقع التالي.

مثال: تحليل واجهة موقع إلكتروني

لنفترض أن لدينا موقعًا يتكون من الأجزاء التالية:

عندما ننظر إلى هذا الموقع من منظور بناء المكونات، فإن كل شيء تراه في الواجهة هو فعليًا مقسم إلى مكون مستقل.

بفضل ميزة إعادة الاستخدام (Reusability) التي توفرها المكونات، فإن المنشور الثاني، حتى لو اختلفت بياناته قليلًا، سيستخدم نفس تصميم وشكل المكون Post. بناءً على ذلك، تقوم بإعادة استخدام نفس المكون لإنشاء المنشور الثاني، والثالث، وهكذا.

لاحظ كيف أن صفحة الموقع الكاملة ما هي إلا مجموعة من المكونات، كل واحد منها مُعرَّف في دالة منفصلة أو حتى في ملف منفصل. في النهاية، كل هذه المكونات تتبع لمكون واحد كبير جدًا يمثل الموقع بأكمله، والذي نسميه App. هذا المكون هو المكون الأب (Parent Component)، وجميع المكونات الأخرى تكون موجودة بداخله.

الهيكلية في الكود

لو أردت أن تعكس هذا التقسيم على الكود، فسينتج لديك شيء شبيه بالكود التالي. سيكون لديك وسم لعنصر <App>، وبداخله ستجد كل المكونات الأخرى:

<App>
  <MyHeader />
  <SideMenu />
  <Post />
  <Post />
  <Post />
</App>

لاحظ كيف أنه بعد تعريف كل المكونات، فإنك تقوم فعليًا بتضمينها داخل المكون الكبير الذي اسمه App.

المكونات المتداخلة (Nested Components)

الآن، طريقة تقسيم المكونات والحد الذي تتوقف عنده في تقسيم الصفحة هو في النهاية قرار راجع لك شخصيًا حسب الحاجة.

لنعد إلى مثالنا ونركز على مكون المنشور Post. هذا المكون الكامل يحتوي بداخله على تفاصيل مثل صورة المستخدم واسمه، ثم نص المنشور. لكن يمكنك أن تنظر إلى جزئية معلومات المستخدم (الصورة والاسم) على أنها مكون منفصل بحد ذاتها، يمكنك استخدامه داخل مكون Post.

بمعنى آخر، هذه الجزئية الخاصة بالمستخدم يمكنك تعريفها في مكون مستقل وتسميته Profile على سبيل المثال. بناءً على ذلك، لو عدنا إلى الكود، سنجد أن المكون Post هو ملف كود آخر يحتوي على تعريف دالة Post، وبداخل هذه الدالة، بالإضافة إلى عناصر HTML، يتم استخدام مكون آخر وهو Profile لعرض صورة المستخدم واسمه.

قد يبدو الكود الخاص بملف Post.js كالتالي:

function Post() {
  return (
    <div className="post">
      <Profile />
      <p>هذا هو محتوى المنشور...</p>
      {/* ... باقي عناصر المنشور ... */}
    </div>
  );
}

هذا ما نسميه بالمكونات المتداخلة (Nested Components). يمكنك تعريف المكونات واستخدامها في المكون الأب App، ويمكنك أيضًا تعريف مكونات واستخدامها داخل مكونات أخرى. لديك الحرية الكاملة لتقسيمها وتداخلها بالشكل الذي تراه مناسبًا لمشروعك.

كان هذا مرورًا نظريًا على مفهوم المكونات وكيف ننظر للمواقع بنظرة تقسيمية، نرى من خلالها المكونات من الخارج، وبناءً عليه نقرر كيف سنقسمها إلى مجموعة من الملفات أو الدوال التي تمثلها.

شارك المقال

أحدث المقالات

CONNECTED
ONLINE: ...
SECURE
00:00:00