React Fragment, Bu makalemizde React.Fragment adlı yardımcı component’in ne işe yaradığına örnekler ile bakacağız. Birçok SPA framework’unu kullandım en sık kullandığım SPA framework’ü olan Angular framework’ünde <ng-container></ng-container> adlı özelliği kullanarak aynı ihtiyacı karşılıyorduk. React tarafında bu ihtiyacı karşılamak için React.Fragment adlı yardımcı component’i kullanacağız.
React Fragment Nedir, Örnekli Nasıl Kullanılır?
Bu örneği en güzel şekilde şöyle açıklayabiliriz web sayfanızda <ul> elementi var ve bu element içerisinde tanımlı olan 3 <li> etiketi olduğunu varsayalım 3 li element’i dışında 4 li ementinin de farklı bir Component’den getirmeye çalışalım. Fakat burada şöyle bir sorun doğuyor, 4 li element’inin bir Component’in render fonksiyonundan dönebilmesi için bir root element tarafından sarılması gerekiyor. Peki neden? React’ın render fonksiyonundan kural gereği tek bir root element dönebiliyor ve onun altında istenilen sayıda element eklenebiliyor ve genellikle bu alt elementler için belirlenecek root element için div kullanılıyor ve sorun tam olarak burada başlıyor ul elementi altına eklemek istediğimiz 4 adet li elementini div etiketine sarılmış olarak yani div etiketi 4 li etiketinin root elementi olarak ayarlanmış olarak dönderilecek ve böylelikle ul elementinin 3.elementinden sonra div elementi eklenmiş olacak ama bizim istediğimiz Component içerisindeki 4 elementin direkt olarak ul elementine eklenmesini istiyoruz.
Öncelikle yaşadığımız sorunun örnek koduna göz atalım. Hatalı olan kod örneğimiz şu şekilde.
Yanlış Kullanım
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | import * as React from "react"; import { render } from "react-dom"; import "./styles.css"; export class App extends React.Component { render() { return ( <div className="App"> <ul> <li>Orange</li> <li>Apple</li> <li>Grapes</li> <Fruits></Fruits> </ul> </div> ); } } export class Fruits extends React.Component { render() { return <div> <li>Lime</li> <li>Lemon</li> <li>Strawberry</li> <li>Watermelon</li> </div> } } const rootElement = document.getElementById("root"); render(<App />, rootElement); |
Bu kodu çalıştırdığımızda yeni tarayıcılar bunu düzgün bir biçimde render edecektir 3 li elementinden sonraki li’ler her ne kadar div altında olsada tarayıcılar tarafından bu durum gözardı edilerek düzgün bir render işlemi olacaktır ama olay sadece render değil bu li elementlerine bir stil uygulandığını düşünün ve bu li elementleri için uygulanan seçicininde ul > li olduğunu varsayarsak 3.li elementinden sonraki li elementlerine div altında kaldıkları için css stili uygulanmayacaktır yada javascript seçicileri doğru olarak çalışmayabilir başka bir örnek verirsek en olası yaşayacağınız sorunlardan biride javascript kütüphaneleri için oluşturmuş olduğunuz html elementlerinin hiyerarşisi çok önemli olduğundan ekstra eklenecebilecek div v.b. elementler ile kütüphanelerin düzgün çalışmamasına neden olabilir açıkçası üstteki gibi bir kullanımda farklı birçok sorun ile karşılaşmanız olasıdır. Ayrıca buradaki tek sorunu sadece ul-li elementleri ile yaşayacağınızı düşünmeyin bu sadece bir örnek diğer tüm html elementleri için aynı durum sözkonusudur.
Üstteki kod bloğu sonucunda ortaya çıkan html şu şekildedir açıkças 3.li elementinden sonra oluşan sorun gözükmektedir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="root"> <div class="App"> <ul> <li>Orange</li> <li>Apple</li> <li>Grapes</li> <div> <li>Lime</li> <li>Lemon</li> <li>Strawberry</li> <li>Watermelon</li> </div> </ul> </div> </div> |
Peki üstteki kodun doğru şekilde yazımı nasıl olmalı onu görelim.
Doğru Kullanım
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | import * as React from "react"; import { render } from "react-dom"; import "./styles.css"; export class App extends React.Component { render() { return ( <div className="App"> <ul> <li>Orange</li> <li>Apple</li> <li>Grapes</li> <Fruits></Fruits> </ul> </div> ); } } export class Fruits extends React.Component { render() { return <React.Fragment> <li>Lime</li> <li>Lemon</li> <li>Strawberry</li> <li>Watermelon</li> </React.Fragment> } } const rootElement = document.getElementById("root"); render(<App />, rootElement); |
Üstte göreceğiniz üzere React.Fragment adlı yardımcı component kullanılarak içerisindeki elementlerin üst bir root yer almadan sayfaya render edilmesi sağlanıyor ve alttaki gibi temiz bir çıktı elde edebiliyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="root"> <div class="App"> <ul> <li>Orange</li> <li>Apple</li> <li>Grapes</li> <li>Lime</li> <li>Lemon</li> <li>Strawberry</li> <li>Watermelon</li> </ul> </div> </div> |
Kısa Sözdizimi
React.Fragment için kullanabileceğiniz kısa bir sözdizimi’de mevcuttur. Alttaki örnek kod bloğunda görebileceğiniz üzere içi boş etiketler açıp kapatarak React.Fragment yazmadanda kısa şekilde bir kullanım sağlayabilirsiniz.
1 2 3 4 5 6 7 8 9 10 | export class Fruits extends React.Component { render() { return <> <li>Lime</li> <li>Lemon</li> <li>Strawberry</li> <li>Watermelon</li> </> } } |
React.Fragment için örnekli olarak anlatabileceklerim bu kadar umarım ne için kullanılabileceği ve ne tür ihtiyaçlarınız için yardımınıza yetişelebilecek yardımcı bir component olduğu konusunda yardımcı olabilmişimdir. Üstteki kodlarımızı ve çıktıya alttaki demo’dan erişebilirsiniz.
📚 Kaynaklar
📚 Diğer React Makaleleri
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
Basit anlaşılır bir şekilde fragment’ların önemini çok güzel özetlemişsiniz…. Beyninize sağlık
gercekten muhtesem acikladin tesekurler
Görüpr göreceğim en iyi açıklama. Samimi olarak teşekkür ederim.
Değerli görüşünüz için ben teşekkür ederim 🙂
Herkesin karşılaşabileceği bir soruna değinmişsin teşekkür ederim.
Rica ederim 🙂