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

مثال

بدل كتابة كود البطاقة نفسه عشر مرات في الصفحة، تصنع مكون “بطاقة” واحدًا وتستخدمه في كل مكان مع بيانات مختلفة:

function Card({ title, text }) {
  return `<div class="card"><h3>${title}</h3><p>${text}</p></div>`;
}

الفوائد

• إعادة الاستخدام: تكتب مرة وتستخدم كثيرًا.
• صيانة أسهل: تعديل المكون يحدّث كل أماكن استخدامه.
• تنظيم: كل جزء صغير وسهل الفهم والاختبار.

هذه الفكرة في قلب React وVue، وأيضًا في محرر ووردبريس Gutenberg حيث كل جزء من الصفحة “مكوّن”.