# UI Bileşeni (User Interface Component)

Adres: https://softwaredictionary.org/tr/terimler/ui-component
Kategori: Web Geliştirme
Son güncelleme: 2026-10-05
İngilizcesi: UI Component
Türkçe karşılığı: arayüz bileşeni, bileşen

Kısaca: UI bileşeni, buton, form ya da kart gibi arayüzün yeniden kullanılabilen bir parçasıdır; işaretlemesini, stilini ve davranışını bir arada taşır.

## UI bileşeni (UI component) nedir?

Modern arayüzler bileşenlerden kurulur: her biri ekranın bir bölümünü çizen ve daha büyük parçalar oluşturmak için birleştirilebilen küçük parçalar. Bir buton, bir arama kutusu ve bir ürün kartı birer bileşendir; bir sayfa da pek çok başka bileşenden oluşan bir bileşendir. Her bileşen genellikle props denen girdiler alır ve aynı girdiler için aynı şekilde render edilir; böylece pek çok yerde yeniden kullanılabilir.

Bir bileşen birbirine ait olanları bir araya getirir: işaretlemesini, stillerini ve bir tıklamada ne olacağı gibi davranışını. React, Vue, Svelte ve Angular'da bileşen, işaretleme döndüren bir fonksiyon ya da dosyadır; tarayıcının kendi Web Components standardı ise framework'le ya da framework'süz çalışan `<user-card>` gibi özel HTML elemanları tanımlamanızı sağlar. Bir bileşen, bir menünün açık olup olmadığı gibi kendi state'ini tutabilir ve veriyi içindeki bileşenlere aktarabilir.

Bileşenler yapı taşları gibi çalışır: her birinin belirli bir şekli ve birkaç bağlanma yolu vardır ve aynı taş pek çok yerde karşınıza çıkar. Ekipler bileşenlerini bir tasarım sisteminde ya da bileşen kütüphanesinde toplar; böylece bir buton her sayfada aynı görünür ve aynı çalışır. İyi bir bileşen tek bir iş yapar, yalnızca ihtiyaç duyduğu girdileri alır ve tek başına test edilebilir.

## Önemli noktalar

- UI bileşeni, arayüzün yeniden kullanılabilen ve kendi başına çalışan bir parçasıdır.
- Props denen girdiler alır ve işaretlemesini, stillerini ve davranışını bunlardan üretir.
- Sayfalar bileşenlerin iç içe yerleştirilmesiyle kurulur.
- Tasarım sistemleri bileşenleri toplar, böylece her yerde aynı görünür ve aynı çalışırlar.

## Örnek: Farklı girdilerle yeniden kullanılan küçük bir bileşen

```jsx
function Badge({ label, tone = "neutral" }) {
  return <span className={`badge badge-${tone}`}>{label}</span>;
}

function ProductStatus({ product }) {
  return (
    <p>
      {product.isNew && <Badge label="New" tone="success" />}
      {product.stock === 0 && <Badge label="Sold out" tone="danger" />}
    </p>
  );
}
```

## Sık sorulan sorular

**Bileşen ile modül arasındaki fark nedir?**

Modül bir kod birimidir: fonksiyon ya da değer export eden bir dosya. Bileşen ise bir arayüz birimidir: ekranın bir bölümünü çizen şey. Bir bileşen genellikle bir modülün içinde yaşar, ama tarih yardımcılarıyla dolu bir modül gibi pek çok modül hiç bileşen içermez.

**Props nedir?**

Props, properties'in kısaltmasıdır ve bir üst bileşenin bir bileşene verdiği girdilerdir; bir fonksiyona verilen argümanlar gibi. Bileşen props'larını okur ama değiştirmez; zamanla değişen bir değerin yeri bileşenin kendi state'idir.

## Kaynaklar

- [React documentation: Your First Component](https://react.dev/learn/your-first-component)
- [MDN: Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt