UI Bileşeni

User Interface Component

İngilizcesi: UI Component
Türkçe karşılığı: arayüz bileşeni, bileşen

Günlük kullanımda iki ad da yaygın.

Güncellendi 5 Ekim 20262 dk okuma

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şenjsx

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.

İlgili sayfalar

Kaynaklar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin