- Konu sahibi
- #1
React bileşeni, arayüzü oluşturan ve tekrar kullanılabilen JavaScript yapısıdır; HTML elemanı ise tarayıcının doğrudan tanıdığı ve DOM içinde oluşturduğu yapıdır. Örneğin
HTML elemanlarının anlamı ve davranışı tarayıcı tarafından belirlenir.
React bileşeni ise JavaScript ile tanımlanır. Props alabilir, kendi durumunu yönetebilir, olayları işleyebilir ve başka bileşenleri birleştirebilir. Bileşenin kendisi DOM'da mutlaka ayrı bir düğüm olarak görünmez. Örneğin bir bileşen yalnızca bir
JSX içinde büyük-küçük harf kullanımı da önemlidir:
Burada
Bu örneğin sonucu iki düğmenin görünmesidir: Biri
Kod, JSX dönüşümü ve React kök bağlaması zaten kurulmuş bir projede App.jsx bileşeni olarak kullanılır; import/export içeren JSX’i düz HTML dosyasında script içine yapıştırmak yeterli değildir. Bu örnekte Kaydet/İptal düğmelerine henüz işlem bağlanmamıştır; yalnız bileşen ile ürettiği düğmeyi gösterir.
Karar verirken şu ayrımı kullanın:
En iyi yaklaşım, HTML elemanlarını bileşenlerle değiştirmek değil, onları bileşenlerin içinde doğru amaçla kullanmaktır. Örneğin her tıklanabilir işlem için
En yaygın hata, HTML elemanının adını büyük harfle yazarak onu otomatik olarak React bileşeni sanmaktır.
Bir diğer hata, basit bir HTML yapısı için gereksiz bileşen katmanları oluşturmaktır. Tek yerde kullanılan kısa bir başlığı bileşene ayırmak zorunlu değildir. Buna karşılık aynı davranış kopyalanıyorsa veya birim olarak test edilmesi gerekiyorsa bileşenleştirme anlamlıdır.
Ayrıca bir bileşeni
Bileşenin adı genellikle DOM'da ayrı bir düğüm olarak görünmez. React, bileşenin döndürdüğü
Evet, ancak props'un gerçek HTML elemanına aktarılması gerekir. Bileşen
Kullanılabilir, ancak bu iki mekanizma aynı değildir. Özel HTML elementleri tarayıcının Web Components standartlarına dayanır; React bileşenleri ise React'in bileşen ve render modelini kullanır. Proje React'e dayanıyorsa tekrar kullanım ve durum yönetimi için genellikle React bileşeni tercih edilir.
Button bir React bileşeni olabilirken, button tarayıcının sunduğu yerleşik HTML elemanıdır. Bu rehber web üzerinde React DOM kullanımını ele alır. Bileşen bir arayüz açıklaması döndürür; React DOM bu açıklamaya göre tarayıcı düğümlerini oluşturur veya günceller. JSX içinde yazılan button ifadesiyle mevcut gerçek DOM düğümü aynı nesne değildir.Temel fark nasıl çalışır?
HTML elemanlarının anlamı ve davranışı tarayıcı tarafından belirlenir.
input metin girişi sağlar, form form gönderimini temsil eder, button ise tıklanabilir düğme davranışı sunar. Bu elemanlar DOM ağacının gerçek düğümleridir.React bileşeni ise JavaScript ile tanımlanır. Props alabilir, kendi durumunu yönetebilir, olayları işleyebilir ve başka bileşenleri birleştirebilir. Bileşenin kendisi DOM'da mutlaka ayrı bir düğüm olarak görünmez. Örneğin bir bileşen yalnızca bir
div döndürebilir, birkaç HTML elemanı döndürebilir veya koşula göre hiçbir şey döndürmeyebilir.JSX içinde büyük-küçük harf kullanımı da önemlidir:
Kod:
function ActionButton({ label }) {
return <button type="button">{label}</button>;
}
export default function App() {
return (
<main>
<h1>Hesap</h1>
<ActionButton label="Kaydet" />
<button type="button">İptal</button>
</main>
);
}Burada
ActionButton React bileşenidir. İçeride tarayıcının bildiği gerçek bir button HTML elemanı üretir. Küçük harfle yazılan button doğrudan yerleşik HTML elemanı olarak yorumlanır; büyük harfle yazılan ActionButton ise React'in tanımlı bileşeni aramasını sağlar.Bu örneğin sonucu iki düğmenin görünmesidir: Biri
ActionButton bileşeninin içinden, diğeri doğrudan JSX içindeki HTML elemanından gelir. Kullanıcı açısından görünüm aynı olabilir; ancak ilk düğmenin üretim mantığı tek bir yerde toplanmıştır.Kod, JSX dönüşümü ve React kök bağlaması zaten kurulmuş bir projede App.jsx bileşeni olarak kullanılır; import/export içeren JSX’i düz HTML dosyasında script içine yapıştırmak yeterli değildir. Bu örnekte Kaydet/İptal düğmelerine henüz işlem bağlanmamıştır; yalnız bileşen ile ürettiği düğmeyi gösterir.
Hangi durumda hangisini kullanmalısınız?
Karar verirken şu ayrımı kullanın:
| İhtiyaç | Tercih | Gerekçe |
|---|---|---|
| Tek bir semantik tarayıcı yapısı | HTML elemanı | Tarayıcının yerleşik davranışını doğrudan kullanırsınız. |
| Aynı arayüzü birçok yerde kullanmak | React bileşeni | İşaretleme ve davranış tek bir yapıda toplanır. |
| Değişken veri veya durum yönetimi | React bileşeni | Props, state ve olay işleme mantığı eklenebilir. |
| Erişilebilir ve doğru HTML anlamı | Uygun HTML elemanı | Bileşen, mümkünse yerleşik semantiği koruyarak bu elemanı üretmelidir. |
En iyi yaklaşım, HTML elemanlarını bileşenlerle değiştirmek değil, onları bileşenlerin içinde doğru amaçla kullanmaktır. Örneğin her tıklanabilir işlem için
div kullanmak yerine, bir button elemanını saran ActionButton bileşeni oluşturmak daha doğrudur.Uygulamada dikkat edilecek noktalar
- Tekrar eden görünüm veya davranışı belirleyin. Aynı kart, düğme, menü ya da form alanı birçok yerde kullanılacaksa bunu bileşene taşıyın.
- Bileşenin içindeki temel HTML elemanını amacına uygun seçin. Tıklama eylemi için
button, sayfa içi bağlantı içina, başlık için uygunh1–h6elemanını kullanın. - Değişen değerleri props olarak aktarın.
label,disabledveya olay işleyicisi gibi değerleri bileşenin içine sabitlemek yerine dışarıdan alabilirsiniz. - Bileşenin adını büyük harfle başlatın.
UserCardbir React bileşeni olarak ele alınır;usercardise özel bir HTML etiketi gibi yorumlanabilir ve beklediğiniz bileşen çalışmayabilir. - Bileşenin DOM'da ayrı bir eleman oluşturduğunu varsaymayın. Stil,
refveya olay bağlarken gerçek DOM elemanının bileşenin içinde nerede üretildiğini kontrol edin.
Sık yapılan hatalar
En yaygın hata, HTML elemanının adını büyük harfle yazarak onu otomatik olarak React bileşeni sanmaktır.
Button yalnızca Button adlı bir bileşen tanımlıysa anlamlıdır; aksi durumda beklenen yerleşik düğme davranışı oluşmaz.Bir diğer hata, basit bir HTML yapısı için gereksiz bileşen katmanları oluşturmaktır. Tek yerde kullanılan kısa bir başlığı bileşene ayırmak zorunlu değildir. Buna karşılık aynı davranış kopyalanıyorsa veya birim olarak test edilmesi gerekiyorsa bileşenleştirme anlamlıdır.
Ayrıca bir bileşeni
div ile sarmak her zaman doğru değildir. Gereksiz sarmalayıcılar DOM yapısını ve erişilebilirlik ağacını karmaşıklaştırabilir. Bileşenin amacı neyse ona uygun semantik elemanları döndürün.Kaynaklar
Sık sorulan sorular
React bileşeni DOM'da nasıl görünür?
Bileşenin adı genellikle DOM'da ayrı bir düğüm olarak görünmez. React, bileşenin döndürdüğü
div, button, section gibi gerçek HTML elemanlarını DOM'a yerleştirir.Bir React bileşeni HTML elemanı gibi props alabilir mi?
Evet, ancak props'un gerçek HTML elemanına aktarılması gerekir. Bileşen
className, id veya olay işleyicisini alıp içindeki uygun elemana iletebilir; aksi halde bu değerler otomatik olarak istediğiniz DOM düğümüne uygulanmayabilir.React bileşeni yerine özel HTML elementi kullanılabilir mi?
Kullanılabilir, ancak bu iki mekanizma aynı değildir. Özel HTML elementleri tarayıcının Web Components standartlarına dayanır; React bileşenleri ise React'in bileşen ve render modelini kullanır. Proje React'e dayanıyorsa tekrar kullanım ve durum yönetimi için genellikle React bileşeni tercih edilir.
