کامپوننت (Component) یک واحد قابل استفاده مجدد از رابط، رفتار یا منطق است. معنای آن به بستر بستگی دارد. در ری‌اکت و ویو جی‌اس معمولا بخشی از رابط کاربری است، در Laravel Blade می‌تواند یک قالب با ورودی مشخص باشد و در معماری Backend یک سرویس قابل ترکیب هم گاهی Component نامیده می‌شود.

کامپوننت در Vue.js

<script setup>
defineProps({ product: Object })
</script>
<template>
  <article>{{ product.name }}</article>
</template>

کامپوننت در React

function ProductCard({ product }) {
  return <article>{product.name}</article>;
}

کامپوننت در Angular

@Component({
  selector: 'app-product-card',
  standalone: true,
  template: '<article>{{ name }}</article>'
})
export class ProductCard { name = 'Laptop'; }

کامپوننت در لاراول Blade

<x-product-card :product="$product" />

کامپوننت در ASP.NET Core

<ProductCard Product="@product" />

تفاوت با کلاس

هر کامپوننت ممکن است درون خود کلاس یا تابع داشته باشد، اما کامپوننت یک مفهوم معماری و رابط است و لزوما مترادف کلاس نیست.

مطالعه ویو جی‌اس، ری‌اکت و انگولار برای جزئیات بیشتر مفید است.