کامپوننت یک قطعهی کوچک از صفحه است که ساختار، ظاهر و رفتارش را در یک واحد جمع کرده‌اند. مثل قطعههای لگو: یک بار می‌سازید و هر جا لازم بود می‌گذارید. صفحه‌ی کامل از ترکیب چند کامپوننت ساخته می‌شود.
مثال#
صفحه‌ی لیست محصولات یک فروشگاه را در نظر بگیرید. «کارت محصول» یک کامپوننت است که تصویر، نام، قیمت و دکمه‌ی خرید دارد. به‌جای نوشتن دوباره‌ی همان کد برای بیست محصول، یک بار کارت را تعریف می‌کنید و برای هر محصول با داده‌ی جدید از آن استفاده می‌کنید. اگر طرح کارت عوض شود، فقط یک جا ویرایش می‌شود.
چه چیزهایی کامپوننت می‌شوند#
- دکمه‌ها و فیلدهای فرم
- هدر و فوتر
- کارت محصول یا مقاله
- پنجره‌ی بازشو (مودال)
- نوار جستجو
مزایا#
- جلوگیری از تکرار کد
- یکدستی ظاهر در کل سایت
- تغییر و نگهداری ساده‌تر
- تست کردن هر قطعه به‌صورت جداگانه
- هم‌کاری راحت‌تر بین طراح و برنامه‌نویس، به‌ویژه با «سیستم طراحی»
در کتابخانه‌ها و فریم‌ورک‌ها#
ابزارهایی مثل React، Vue و Angular بر پایه‌ی کامپوننت ساخته شده‌اند. هر کامپوننت داده‌هایی به نام ورودی (props) می‌گیرد و بر اساس آن نمایش خود را می‌سازد. در وردپرس هم ایدهی مشابه را در «ابزارک‌ها» و «الگوهای بلوک» می‌بینید.
اشتباه رایج#
ساختن کامپوننت‌های خیلی بزرگ و همه‌کاره. بهتر است هر کامپوننت یک وظیفه‌ی روشن داشته باشد تا قابلاستفادهی مجدد بماند.