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

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

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

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

• رأس الصفحة (Header): يحتوي على شعار الموقع وقائمة التنقل.
• قائمة المنشورات (Posts): تعرض مجموعة من المقالات أو المنشورات.
• قائمة جانبية (Sidebar): تعرض وسوم (Tags) أو معلومات إضافية.

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

• رأس الصفحة (Header): هذا الجزء الذي تراه أمامك، يتم تعريفه كمكون مستقل في ملف خاص به، ويمكنك تسميته بالاسم الذي تريده، مثل MyHeader. بعد ذلك، تصبح قادرًا على استخدام هذا الرأس مباشرة من خلال أكواد JSX.
• القائمة الجانبية (Sidebar): بالطريقة نفسها تمامًا، هذه القائمة الجانبية هي مكون آخر. تقوم بتعريفه في ملف ثانٍ وتسميه مثلًا SideMenu.
• المنشور (Post): وكذلك كل منشور هو مكون مستقل يتم تعريفه في ملف خاص به، ويمكن أن نسميه Post.

بفضل ميزة إعادة الاستخدام (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، ويمكنك أيضًا تعريف مكونات واستخدامها داخل مكونات أخرى. لديك الحرية الكاملة لتقسيمها وتداخلها بالشكل الذي تراه مناسبًا لمشروعك.

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