React uygulamalar\u0131n\u0131zda bile\u015fenler aras\u0131 i\u00e7erik payla\u015f\u0131m\u0131n\u0131 daha mod\u00fcler ve y\u00f6netilebilir bir hale getirmekte zorlan\u0131yor musunuz? \u00d6zellikle karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczleri (UI) geli\u015ftirirken, bile\u015fenlerinizin esnekli\u011fini art\u0131rmak ve farkl\u0131 senaryolara kolayca adapte olabilmesini sa\u011flamak kritik \u00f6neme sahiptir. \u0130\u015fte tam bu noktada, Modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan bile\u015fen tabanl\u0131 mimari, uygulamalar\u0131m\u0131z\u0131 k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alara ay\u0131rmam\u0131z\u0131 sa\u011flar. React, bu felsefenin \u00f6nc\u00fclerinden biridir ve K\u0131sacas\u0131, \u00d6ncelikle, projenizin k\u00f6k dizininde terminalinizi a\u00e7arak a\u015fa\u011f\u0131daki komutlardan birini \u00e7al\u0131\u015ft\u0131rarak veya<\/p>\n Bu komut, k\u00fct\u00fcphaneyi \u015eimdi, Yukar\u0131daki \u00f6rnekte, \u015eimdi Bu \u00f6rnekte de yine makale kurallar\u0131na uyarak inline stil kullan\u0131lm\u0131\u015ft\u0131r. G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, Bir Bir sayfa d\u00fczeni ( Yukar\u0131daki \u00f6rnekte, Bazen, bir yuvaya yerle\u015ftirece\u011finiz i\u00e7eri\u011fin, o yuvan\u0131n bulundu\u011fu bile\u015fenden baz\u0131 \u00f6zelliklere (props) eri\u015fmesi gerekebilir. \u00d6rne\u011fin, bir A\u015fa\u011f\u0131daki Bu \u00f6rnekte, Dinamik i\u00e7erik ve varsay\u0131lan de\u011ferler, Formlar, modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Ancak, bir form i\u00e7indeki her bir giri\u015f alan\u0131 (input), etiket (label), yard\u0131mc\u0131 metin (help text), hata mesaj\u0131 (error message) ve hatta \u00f6zel bir ikon gibi farkl\u0131 elemanlar i\u00e7erebilir. Geleneksel yakla\u015f\u0131mla, t\u00fcm bu varyasyonlar\u0131 tek bir Problem:<\/strong> Bir \u00c7\u00f6z\u00fcm:<\/strong> Avantajlar:<\/strong> Veri tablolar\u0131 (data tables), farkl\u0131 t\u00fcrde verileri ve etkile\u015fimleri bar\u0131nd\u0131rabilir. Bir tablo sat\u0131r\u0131 ( Problem:<\/strong> Bir \u00c7\u00f6z\u00fcm:<\/strong> Avantajlar:<\/strong> Modal pencereler veya diyalog kutular\u0131, kullan\u0131c\u0131ya bilgi sunmak veya onay almak i\u00e7in s\u0131k\u00e7a kullan\u0131l\u0131r. Genellikle bir ba\u015fl\u0131k, ana i\u00e7erik ve bir alt bilgi (aksiyon butonlar\u0131) b\u00f6l\u00fcm\u00fcnden olu\u015furlar. Ancak, her modal\u0131n ba\u015fl\u0131\u011f\u0131, i\u00e7eri\u011fi ve aksiyonlar\u0131 (\u00f6rne\u011fin “Kaydet”, “\u0130ptal”, “Sil” gibi) farkl\u0131l\u0131k g\u00f6sterebilir.<\/p>\n Problem:<\/strong> Bir \u00c7\u00f6z\u00fcm:<\/strong> Avantajlar:<\/strong> Bu vaka analizleri, Bir k\u00fct\u00fcphane kullan\u0131rken akla gelen ilk sorulardan biri genellikle performanst\u0131r. “\u00c7ok fazla slot kullanmak uygulamam\u0131 yava\u015flat\u0131r m\u0131?” veya “Karma\u015f\u0131k bile\u015fenleri slot olarak ge\u00e7irmek ekstra render’lara neden olur mu?” gibi endi\u015feleriniz olabilir. Genel olarak, Ancak, her React uygulamas\u0131nda oldu\u011fu gibi, gereksiz yeniden render’lar\u0131 (re-render) \u00f6nlemek i\u00e7in dikkatli olmak \u00f6nemlidir. E\u011fer bir slot i\u00e7eri\u011fi s\u0131k s\u0131k de\u011fi\u015fiyorsa ve bu de\u011fi\u015fiklikler performans a\u00e7\u0131s\u0131ndan kritikse, Bu yakla\u015f\u0131m, Slot adlar\u0131, bile\u015fenlerinizin API’sinin bir par\u00e7as\u0131 haline gelir. Bu nedenle, a\u00e7\u0131k, anla\u015f\u0131l\u0131r ve tutarl\u0131 isimlendirme kurallar\u0131 benimsemek, hem sizin hem de ekibinizdeki di\u011fer geli\u015ftiricilerin i\u015fini kolayla\u015ft\u0131r\u0131r.<\/p>\n Geli\u015ftirici deneyimi (Developer Experience – DX), bir k\u00fct\u00fcphanenin veya arac\u0131n ne kadar kolay ve keyifli kullan\u0131labildi\u011fini ifade eder. React’te i\u00e7erik projeksiyonu i\u00e7in react-slotx<\/code> k\u00fct\u00fcphanesi devreye girerek, React bile\u015fenlerinize “slot” (yuva) tabanl\u0131 bir i\u00e7erik projeksiyonu mekanizmas\u0131 kazand\u0131r\u0131r. Bu makalede, react-slotx<\/code>‘in ne oldu\u011funu, neden bu kadar de\u011ferli oldu\u011funu ve ger\u00e7ek d\u00fcnya projelerinizde nas\u0131l kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Haz\u0131rsan\u0131z, React bile\u015fen mimarinizi bir \u00fcst seviyeye ta\u015f\u0131maya ba\u015flayal\u0131m!<\/p>\nreact-slotx Nedir ve Neden \u0130htiya\u00e7 Duyar\u0131z?<\/h2>\n
props<\/code> (\u00f6zellikler) ve children<\/code> (\u00e7ocuklar) gibi mekanizmalarla bile\u015fenler aras\u0131 veri ve i\u00e7erik ak\u0131\u015f\u0131n\u0131 y\u00f6netir. Ancak, baz\u0131 senaryolarda standart children<\/code> prop’u yetersiz kalabilir. \u00d6rne\u011fin, bir Card<\/code> (kart) bile\u015feni d\u00fc\u015f\u00fcn\u00fcn. Bu kart\u0131n hem bir ba\u015fl\u0131\u011f\u0131, hem ana i\u00e7eri\u011fi, hem de bir alt bilgisi (footer) olabilir. Geleneksel yakla\u015f\u0131mla, bu farkl\u0131 i\u00e7erik b\u00f6lgelerini y\u00f6netmek i\u00e7in ya \u00e7ok say\u0131da prop tan\u0131mlaman\u0131z ya da children<\/code> prop’unu karma\u015f\u0131k bir \u015fekilde ayr\u0131\u015ft\u0131rman\u0131z gerekebilir. \u0130\u015fte react-slotx<\/code>, bu t\u00fcr karma\u015f\u0131kl\u0131klar\u0131 ortadan kald\u0131rmak i\u00e7in tasarlanm\u0131\u015f bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\nreact-slotx<\/code>, temel olarak, bile\u015fenlerinizde adland\u0131r\u0131lm\u0131\u015f i\u00e7erik yuvalar\u0131 (named content slots) tan\u0131mlaman\u0131za olanak tan\u0131yan hafif bir k\u00fct\u00fcphanedir. Bu yuvalar sayesinde, bir bile\u015fenin i\u00e7 yap\u0131s\u0131n\u0131 bozmadan veya karma\u015f\u0131k prop zincirleri olu\u015fturmadan, farkl\u0131 b\u00f6lgelerine dinamik olarak i\u00e7erik yerle\u015ftirebilirsiniz. Bu konsept, Web Components standard\u0131ndaki “slots” mekanizmas\u0131na benzer ve React ekosistemine bu g\u00fc\u00e7l\u00fc esnekli\u011fi getirir. Peki, neden react-slotx<\/code>‘e ihtiya\u00e7 duyar\u0131z? Bu sorunun cevab\u0131, \u00f6zellikle b\u00fcy\u00fck ve s\u00fcrd\u00fcr\u00fclebilir uygulamalar geli\u015ftirirken ortaya \u00e7\u0131kan baz\u0131 temel zorluklarda yat\u0131yor:<\/p>\n\n
headerContent<\/code>, footerContent<\/code> gibi birden fazla prop tan\u0131mlamak yayg\u0131n bir y\u00f6ntemdir. Ancak bu, prop listesini uzat\u0131r ve bile\u015fenin API’sini karma\u015f\u0131kla\u015ft\u0131r\u0131r. react-slotx<\/code> ile bu i\u00e7erik b\u00f6lgeleri, adland\u0131r\u0131lm\u0131\u015f yuvalar arac\u0131l\u0131\u011f\u0131yla \u00e7ok daha temiz ve anla\u015f\u0131l\u0131r bir \u015fekilde tan\u0131mlanabilir.\n <\/li>\n<Slot name=\"header\" \/><\/code> ifadesini g\u00f6rd\u00fc\u011f\u00fcnde, buraya bir ba\u015fl\u0131k i\u00e7eri\u011fi gelece\u011fini anlar. Bu, prop’lar\u0131 veya karma\u015f\u0131k children<\/code> manip\u00fclasyonlar\u0131n\u0131 de\u015fifre etmekten \u00e7ok daha sezgiseldir. Bu netlik, \u00f6zellikle b\u00fcy\u00fck ekiplerde ve uzun vadeli projelerde kodun bak\u0131m\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r.\n <\/li>\nreact-slotx<\/code>, bu t\u00fcr karma\u015f\u0131k UI bile\u015fenlerinin i\u00e7 yap\u0131s\u0131n\u0131 basitle\u015ftirirken, d\u0131\u015far\u0131dan gelen i\u00e7eri\u011fin esnekli\u011fini korumas\u0131n\u0131 sa\u011flar. Bu, UI katman\u0131n\u0131z\u0131n daha d\u00fczenli ve \u00f6l\u00e7eklenebilir olmas\u0131na yard\u0131mc\u0131 olur.<\/li>\n<\/ul>\nreact-slotx<\/code>, React geli\u015ftiricilerine daha d\u00fczenli, esnek ve yeniden kullan\u0131labilir bile\u015fenler olu\u015fturmalar\u0131 i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 sunar. Geleneksel React yakla\u015f\u0131mlar\u0131n\u0131n k\u0131s\u0131tlamalar\u0131n\u0131 a\u015farak, daha karma\u015f\u0131k ve dinamik i\u00e7erik projeksiyonu senaryolar\u0131n\u0131 zarif bir \u015fekilde y\u00f6netmenizi sa\u011flar.<\/p>\nreact-slotx Kurulumu ve Temel Kullan\u0131m Ad\u0131mlar\u0131<\/h2>\n
react-slotx<\/code>‘i projenize dahil etmek ve kullanmaya ba\u015flamak olduk\u00e7a basittir. Bu b\u00f6l\u00fcmde, k\u00fct\u00fcphanenin kurulum ad\u0131mlar\u0131n\u0131 ve temel kullan\u0131m prensiplerini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bir Card<\/code> (kart) bile\u015feni \u00f6rne\u011fi \u00fczerinden, adland\u0131r\u0131lm\u0131\u015f yuvalar\u0131n nas\u0131l tan\u0131mland\u0131\u011f\u0131n\u0131 ve kullan\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6rece\u011fiz.<\/p>\nreact-slotx Nas\u0131l Kurulur?<\/h3>\n
react-slotx<\/code>‘i projenize eklemelisiniz:<\/p>\n\nnpm install react-slotx\n <\/code><\/pre>\n<\/p><\/div>\n\nyarn add react-slotx\n <\/code><\/pre>\n<\/p><\/div>\nnode_modules<\/code> dizininize indirecek ve package.json<\/code> dosyan\u0131za ba\u011f\u0131ml\u0131l\u0131k olarak ekleyecektir. Kurulum tamamland\u0131ktan sonra, react-slotx<\/code>‘in sundu\u011fu bile\u015fenleri React uygulaman\u0131zda kullanmaya ba\u015flayabilirsiniz.<\/p>\nTemel Bile\u015fen Olu\u015fturma: Bir Kart \u00d6rne\u011fi<\/h3>\n
react-slotx<\/code> kullanarak esnek bir Card<\/code> bile\u015feni olu\u015ftural\u0131m. Bu kart\u0131n bir ba\u015fl\u0131k (header) ve bir alt bilgi (footer) yuvas\u0131 olacak. Ana i\u00e7eri\u011fi ise standart children<\/code> prop’u \u00fczerinden alacak.<\/p>\n1. Kart Bile\u015fenini Tan\u0131mlama (
Card.jsx<\/code>):<\/h4>\nCard<\/code> bile\u015fenimizde, react-slotx<\/code>‘ten gelen Slot<\/code> bile\u015fenini kullanarak adland\u0131r\u0131lm\u0131\u015f yuvalar\u0131 tan\u0131mlayaca\u011f\u0131z. Bu yuvalar, name<\/code> prop’u ile benzersiz bir \u015fekilde adland\u0131r\u0131l\u0131r.<\/p>\n\nimport React from 'react';\nimport { Slot } from 'react-slotx';\n\nconst Card = ({ children }) => {\n return (\n <div style={{ border: '1px solid #e0e0e0', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>\n <Slot name=\"header\" \/>\n <div style={{ margin: '10px 0', padding: '8px 0', borderTop: '1px solid #eee', borderBottom: '1px solid #eee' }}>\n {children}\n <\/div>\n <Slot name=\"footer\" \/>\n <\/div>\n );\n};\n\nexport default Card;\n <\/code><\/pre>\n<\/p><\/div>\n<Slot name=\"header\" \/><\/code> ve <Slot name=\"footer\" \/><\/code> ifadeleri, bu b\u00f6lgelere d\u0131\u015far\u0131dan i\u00e7erik yerle\u015ftirilebilece\u011fini belirtir. Bu bile\u015fenin stilini, makale kurallar\u0131na uygun olarak inline tan\u0131mlad\u0131m, ancak ger\u00e7ek bir projede bu stilleri harici bir CSS dosyas\u0131 veya stil k\u00fct\u00fcphanesi arac\u0131l\u0131\u011f\u0131yla y\u00f6netmeniz daha uygun olacakt\u0131r.<\/p>\n2. Kart Bile\u015fenini Kullanma (
App.jsx<\/code> veya ana bile\u015feniniz):<\/h4>\nCard<\/code> bile\u015fenimizi kullan\u0131rken, SlotProvider<\/code> bile\u015feni arac\u0131l\u0131\u011f\u0131yla yuvalara nas\u0131l i\u00e7erik sa\u011flayaca\u011f\u0131m\u0131z\u0131 g\u00f6relim. SlotProvider<\/code>, slots<\/code> ad\u0131nda bir prop al\u0131r. Bu prop, anahtar-de\u011fer \u00e7iftlerinden olu\u015fan bir obje olup, anahtarlar yuva adlar\u0131n\u0131 (\u00f6rne\u011fin \"header\"<\/code>, \"footer\"<\/code>) temsil ederken, de\u011ferler bu yuvalara yerle\u015ftirilecek React elementlerini i\u00e7erir.<\/p>\n\nimport React from 'react';\nimport Card from '.\/Card'; \/\/ Card bile\u015fenimizi import ediyoruz\nimport { SlotProvider } from 'react-slotx';\n\nfunction App() {\n return (\n <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>\n <h2 style={{ color: '#333' }}>react-slotx Temel Kullan\u0131m \u00d6rne\u011fi<\/h2>\n\n <SlotProvider slots={{\n header: <h3 style={{ color: '#007bff' }}>\u00dcr\u00fcn Bilgileri<\/h3>,\n footer: <button style={{ padding: '8px 16px', backgroundColor: '#28a745', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>Sepete Ekle<\/button>\n }}>\n <Card>\n <p>Bu \u00fcr\u00fcn, y\u00fcksek kaliteli malzemelerden \u00fcretilmi\u015ftir ve uzun \u00f6m\u00fcrl\u00fc kullan\u0131m sunar. Detayl\u0131 bilgi i\u00e7in a\u015fa\u011f\u0131daki butona t\u0131klay\u0131n\u0131z.<\/p>\n <ul>\n <li>Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ekran<\/li>\n <li>Uzun pil \u00f6mr\u00fc<\/li>\n <li>H\u0131zl\u0131 i\u015flemci<\/li>\n <\/ul>\n <\/Card>\n <\/SlotProvider>\n\n <h3 style={{ color: '#333', marginTop: '30px' }}>Farkl\u0131 Ba\u015fl\u0131k ve Alt Bilgi ile Kart<\/h3>\n <SlotProvider slots={{\n header: <h4 style={{ color: '#ffc107' }}>Kampanya Duyurusu<\/h4>,\n footer: <a href=\"#\" style={{ color: '#007bff', textDecoration: 'none' }}>Kampanya Detaylar\u0131<\/a>\n }}>\n <Card>\n <p>S\u0131n\u0131rl\u0131 s\u00fcreli indirimlerimizi ka\u00e7\u0131rmay\u0131n! \u00dcr\u00fcnlerimizde %30'a varan indirimler sizleri bekliyor. Hemen g\u00f6z at\u0131n!<\/p>\n <\/Card>\n <\/SlotProvider>\n <\/div>\n );\n}\n\nexport default App;\n <\/code><\/pre>\n<\/p><\/div>\nSlotProvider<\/code>‘\u0131n slots<\/code> prop’u arac\u0131l\u0131\u011f\u0131yla header<\/code> ve footer<\/code> yuvalar\u0131na farkl\u0131 React elementleri (<h3><\/code>, <button><\/code>, <h4><\/code>, <a><\/code>) kolayca yerle\u015ftirebildik. Card<\/code> bile\u015feninin i\u00e7 yap\u0131s\u0131 de\u011fi\u015fmeden, d\u0131\u015far\u0131dan gelen i\u00e7erikle tamamen farkl\u0131 g\u00f6r\u00fcn\u00fcmler elde ettik. Bu, react-slotx<\/code>‘in sa\u011flad\u0131\u011f\u0131 esnekli\u011fin ve mod\u00fclerli\u011fin en temel g\u00f6stergesidir.<\/p>\nSlotProvider<\/code> ve Slot<\/code> bile\u015fenleri aras\u0131ndaki ili\u015fki, React’in Context API’sine benzer \u015fekilde \u00e7al\u0131\u015f\u0131r. SlotProvider<\/code>, kendisine sa\u011flanan yuva i\u00e7eriklerini (slots) bir ba\u011flam (context) i\u00e7inde tutar ve bu ba\u011flam\u0131 alt\u0131ndaki t\u00fcm Slot<\/code> bile\u015fenlerine eri\u015filebilir k\u0131lar. Bir Slot<\/code> bile\u015feni, kendi name<\/code> prop’u ile e\u015fle\u015fen i\u00e7eri\u011fi SlotProvider<\/code>‘dan al\u0131r ve render eder. E\u011fer e\u015fle\u015fen bir i\u00e7erik bulunamazsa, Slot<\/code> bile\u015feninin i\u00e7ine do\u011frudan yaz\u0131lm\u0131\u015f varsay\u0131lan i\u00e7eri\u011fi render eder ki bu konuyu bir sonraki b\u00f6l\u00fcmde daha detayl\u0131 inceleyece\u011fiz.<\/p>\nreact-slotx ile Dinamik \u0130\u00e7erik ve Varsay\u0131lan De\u011ferler Nas\u0131l Y\u00f6netilir?<\/h2>\n
react-slotx<\/code>‘in g\u00fcc\u00fc sadece statik i\u00e7erik yerle\u015ftirmekle s\u0131n\u0131rl\u0131 de\u011fildir. K\u00fct\u00fcphane, dinamik i\u00e7erik y\u00f6netimi ve yuvalar i\u00e7in varsay\u0131lan (fallback) de\u011ferler tan\u0131mlama konusunda da olduk\u00e7a esneklik sunar. Bu \u00f6zellikler, bile\u015fenlerinizin daha sa\u011flam ve uyarlanabilir olmas\u0131n\u0131 sa\u011flar. Bu b\u00f6l\u00fcmde, yuvalara \u00f6zellik (props) ge\u00e7irme ve varsay\u0131lan i\u00e7erik tan\u0131mlama mekanizmalar\u0131n\u0131 detayl\u0131ca inceleyece\u011fiz.<\/p>\nVarsay\u0131lan \u0130\u00e7erik (Fallback Content) Tan\u0131mlama<\/h3>\n
SlotProvider<\/code> arac\u0131l\u0131\u011f\u0131yla belirli bir yuvaya i\u00e7erik sa\u011flanmad\u0131\u011f\u0131nda, ne olmal\u0131? react-slotx<\/code>, bu senaryo i\u00e7in Slot<\/code> bile\u015feninin i\u00e7ine do\u011frudan i\u00e7erik yazarak varsay\u0131lan bir de\u011fer belirlemenize olanak tan\u0131r. Bu, bile\u015fenlerinizin her zaman belirli bir i\u00e7eri\u011fe sahip olmas\u0131n\u0131 garantiler, hatta d\u0131\u015far\u0131dan \u00f6zel bir i\u00e7erik gelmese bile.<\/p>\nLayout<\/code>) bile\u015feni \u00f6rne\u011fi \u00fczerinden bu \u00f6zelli\u011fi inceleyelim:<\/p>\nLayout<\/code> bile\u015fenindeki <Slot name=\"header\"><\/code> ve <Slot name=\"footer\"><\/code> etiketlerinin i\u00e7ine do\u011frudan HTML elementleri yerle\u015ftirdik. \u0130lk SlotProvider<\/code> kullan\u0131m\u0131nda, header<\/code> ve footer<\/code> yuvalar\u0131 i\u00e7in herhangi bir de\u011fer sa\u011flamad\u0131k. Bu durumda, Layout<\/code> bile\u015feni varsay\u0131lan olarak tan\u0131mlad\u0131\u011f\u0131m\u0131z <h1>Varsay\u0131lan Sayfa Ba\u015fl\u0131\u011f\u0131<\/h1><\/code> ve <p>Telif Hakk\u0131 © 2023 T\u00fcm Haklar\u0131 Sakl\u0131d\u0131r.<\/p><\/code> i\u00e7eriklerini g\u00f6sterdi. \u0130kinci kullan\u0131mda ise, SlotProvider<\/code>‘a \u00f6zel i\u00e7erikler ge\u00e7irdik ve bu i\u00e7erikler varsay\u0131lanlar\u0131 ge\u00e7ersiz k\u0131ld\u0131.<\/p>\nSlotProps (Yuva \u00d6zellikleri) ile Dinamik \u0130\u00e7erik<\/h3>\n
ProfileCard<\/code> (profil kart\u0131) bile\u015feninde bir avatar<\/code> yuvas\u0131 olabilir ve bu avatar\u0131n boyutu, kart\u0131n genel boyutuna g\u00f6re de\u011fi\u015febilir. react-slotx<\/code>, SlotProvider<\/code>‘\u0131n slots<\/code> prop’una bir React elementi yerine bir fonksiyon ge\u00e7irme yetene\u011fi sunarak bu t\u00fcr dinamik senaryolar\u0131 destekler. Bu fonksiyon, yuvan\u0131n bulundu\u011fu yerden gelen prop’lar\u0131 arg\u00fcman olarak al\u0131r.<\/p>\nProfileCard<\/code> \u00f6rne\u011fini inceleyelim:<\/p>\n\nimport React from 'react';\nimport { Slot, SlotProvider } from 'react-slotx';\n\n\/\/ Avatar bile\u015feni, 'size' prop'u alarak avatar boyutunu belirler\nconst Avatar = ({ size = 50 }) => (\n <img\n src={https:\/\/via.placeholder.com\/${size}<\/code>}\n alt=\"Kullan\u0131c\u0131 Avatar\u0131\"\n style={{ borderRadius: '50%', width: ${size}px<\/code>, height: ${size}px<\/code>, objectFit: 'cover', border: '2px solid #ccc' }}\n \/>\n);\n\nconst ProfileCard = ({ children, cardSize = 100 }) => {\n const avatarSize = cardSize \/ 2; \/\/ Kart boyutunun yar\u0131s\u0131 kadar avatar boyutu\n\n return (\n <div style={{ border: '1px solid #a0a0a0', padding: '20px', margin: '20px 0', borderRadius: '10px', width: ${cardSize * 2}px<\/code>, textAlign: 'center' }}>\n <Slot name=\"avatar\" size={avatarSize} \/> {\/* Avatar slotuna 'size' prop'u ge\u00e7iyoruz *\/}\n <div style={{ marginTop: '15px' }}>\n {children}\n <\/div>\n <\/div>\n );\n};\n\nfunction AppWithProps() {\n return (\n <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>\n <h3 style={{ color: '#333' }}>Slot'lara \u00d6zellik Ge\u00e7irme \u00d6rne\u011fi<\/h3>\n\n <SlotProvider slots={{\n avatar: ({ size }) => <Avatar size={size} \/> \/\/ SlotProvider'a fonksiyon ge\u00e7iyoruz\n }}>\n <ProfileCard cardSize={150}>\n <h4 style={{ margin: '5px 0', color: '#444' }}>Ay\u015fe Y\u0131lmaz<\/h4>\n <p style={{ fontSize: '0.9em', color: '#777' }}>Frontend Geli\u015ftirici<\/p>\n <\/ProfileCard>\n <\/SlotProvider>\n\n <SlotProvider slots={{\n avatar: ({ size }) => <Avatar size={size + 20} \/> \/\/ Farkl\u0131 bir avatar boyutu hesaplama\n }}>\n <ProfileCard cardSize={100}>\n <h4 style={{ margin: '5px 0', color: '#444' }}>Mehmet Demir<\/h4>\n <p style={{ fontSize: '0.9em', color: '#777' }}>UI\/UX Tasar\u0131mc\u0131<\/p>\n <\/ProfileCard>\n <\/SlotProvider>\n <\/div>\n );\n}\n\nexport default AppWithProps;\n <\/code><\/pre>\n<\/p><\/div>\nProfileCard<\/code> bile\u015feni, cardSize<\/code> prop’una ba\u011fl\u0131 olarak bir avatarSize<\/code> hesaplar ve bu de\u011feri <Slot name=\"avatar\" size={avatarSize} \/><\/code> ifadesiyle avatar<\/code> yuvas\u0131na iletir. SlotProvider<\/code>‘da ise, avatar<\/code> yuvas\u0131 i\u00e7in bir fonksiyon tan\u0131mlad\u0131k: avatar: ({ size }) => <Avatar size={size} \/><\/code>. Bu fonksiyon, Slot<\/code> bile\u015feninden gelen size<\/code> prop’unu al\u0131r ve Avatar<\/code> bile\u015fenine iletir. B\u00f6ylece, ProfileCard<\/code>‘\u0131n genel boyutu de\u011fi\u015ftik\u00e7e, avatar\u0131n boyutu da dinamik olarak g\u00fcncellenmi\u015f olur. Bu y\u00f6ntem, bile\u015fenleriniz aras\u0131nda daha g\u00fc\u00e7l\u00fc ve esnek bir etkile\u015fim kurman\u0131z\u0131 sa\u011flar.<\/p>\nreact-slotx<\/code>‘i sadece basit i\u00e7erik yerle\u015ftirmelerin \u00f6tesine ta\u015f\u0131yarak, daha karma\u015f\u0131k ve adaptif bile\u015fenler olu\u015fturman\u0131z i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 haline getirir. Bu yetenekler sayesinde, uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde tutarl\u0131 bir UI\/UX sa\u011flarken, ayn\u0131 zamanda her bir bile\u015fenin \u00f6zel ihtiya\u00e7lar\u0131na cevap verebilirsiniz.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131nda react-slotx Kullan\u0131m\u0131: Vaka Analizleri<\/h2>\n
react-slotx<\/code>‘in teorik faydalar\u0131n\u0131 ve temel kullan\u0131m\u0131n\u0131 anlad\u0131ktan sonra, bu k\u00fct\u00fcphanenin ger\u00e7ek d\u00fcnya projelerinde ne t\u00fcr sorunlar\u0131 \u00e7\u00f6zebilece\u011fine dair somut \u00f6rneklere odaklanal\u0131m. \u0130\u015fte react-slotx<\/code>‘in parlad\u0131\u011f\u0131 ve geli\u015ftirme s\u00fcrecinizi \u00f6nemli \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131rabilece\u011fi birka\u00e7 vaka analizi:<\/p>\nSenaryo 1: Dinamik Form Yap\u0131lar\u0131<\/h3>\n
FormGroup<\/code> bile\u015feni alt\u0131nda y\u00f6netmek olduk\u00e7a karma\u015f\u0131k hale gelebilir. Her bir eleman i\u00e7in ayr\u0131 ayr\u0131 prop’lar tan\u0131mlamak, FormGroup<\/code> bile\u015feninin API’sini \u015fi\u015firir ve okunabilirli\u011fini azalt\u0131r.<\/p>\nFormGroup<\/code> bile\u015feninin, farkl\u0131 form alanlar\u0131 i\u00e7in esnek bir \u015fekilde ba\u015fl\u0131k, giri\u015f alan\u0131, a\u00e7\u0131klama ve hata mesaj\u0131 gibi i\u00e7erikleri bar\u0131nd\u0131rmas\u0131 gerekiyor. Her form alan\u0131n\u0131n bu i\u00e7eriklerden baz\u0131lar\u0131na ihtiyac\u0131 varken, baz\u0131lar\u0131na ihtiyac\u0131 olmayabilir.<\/p>\nreact-slotx<\/code> kullanarak FormGroup<\/code> bile\u015feni i\u00e7inde adland\u0131r\u0131lm\u0131\u015f yuvalar (label<\/code>, input<\/code>, helpText<\/code>, errorMessage<\/code>) tan\u0131mlayabiliriz. Bu sayede, FormGroup<\/code> sadece genel d\u00fczeni ve stilini y\u00f6netirken, her bir yuva d\u0131\u015far\u0131dan gelen i\u00e7eri\u011fi render eder.<\/p>\n\n\/\/ FormGroup.jsx\nimport React from 'react';\nimport { Slot } from 'react-slotx';\n\nconst FormGroup = ({ children }) => {\n return (\n <div style={{ marginBottom: '15px', padding: '10px', border: '1px solid #eee', borderRadius: '5px' }}>\n <Slot name=\"label\" \/>\n <div style={{ margin: '5px 0' }}>\n <Slot name=\"input\" \/>\n <\/div>\n <Slot name=\"helpText\" \/>\n <Slot name=\"errorMessage\" \/>\n {children} {\/* Ekstra i\u00e7erik i\u00e7in *\/}\n <\/div>\n );\n};\n\nexport default FormGroup;\n <\/code><\/pre>\n<\/p><\/div>\n\n\/\/ App.jsx (Kullan\u0131m \u00d6rne\u011fi)\nimport React from 'react';\nimport FormGroup from '.\/FormGroup';\nimport { SlotProvider } from 'react-slotx';\n\nfunction FormExample() {\n return (\n <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>\n <h3>Dinamik Form Yap\u0131lar\u0131<\/h3>\n\n <SlotProvider slots={{\n label: <label htmlFor=\"username\">Kullan\u0131c\u0131 Ad\u0131<\/label>,\n input: <input type=\"text\" id=\"username\" placeholder=\"Kullan\u0131c\u0131 ad\u0131n\u0131z\u0131 girin\" style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }} \/>,\n helpText: <small style={{ color: '#666', display: 'block', marginTop: '5px' }}>Minimum 6 karakter olmal\u0131d\u0131r.<\/small>\n }}>\n <FormGroup \/>\n <\/SlotProvider>\n\n <SlotProvider slots={{\n label: <label htmlFor=\"email\">E-posta<\/label>,\n input: <input type=\"email\" id=\"email\" placeholder=\"E-posta adresinizi girin\" style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }} \/>,\n errorMessage: <p style={{ color: 'red', fontSize: '0.9em', marginTop: '5px' }}>Ge\u00e7ersiz e-posta adresi!<\/p>\n }}>\n <FormGroup \/>\n <\/SlotProvider>\n <\/div>\n );\n}\n\nexport default FormExample;\n <\/code><\/pre>\n<\/p><\/div>\nFormGroup<\/code> bile\u015feni olduk\u00e7a sade kal\u0131r ve sadece d\u00fczeni y\u00f6netir. Her bir form alan\u0131, ihtiyac\u0131na g\u00f6re farkl\u0131 yuvalar\u0131 doldurabilir veya bo\u015f b\u0131rakabilir. Bu, form bile\u015fenlerinin esnekli\u011fini art\u0131r\u0131r ve kodun daha okunabilir olmas\u0131n\u0131 sa\u011flar.<\/p>\nSenaryo 2: Karma\u015f\u0131k Tablo Sat\u0131rlar\u0131<\/h3>\n
TableRow<\/code>) bazen sadece metin, bazen bir durum g\u00f6stergesi, bazen bir buton grubu veya bir resim i\u00e7erebilir. Her h\u00fccrenin i\u00e7eri\u011fini do\u011frudan prop olarak ge\u00e7mek, TableRow<\/code> bile\u015feninin prop listesini uzatabilir ve karma\u015f\u0131kla\u015ft\u0131rabilir.<\/p>\nTableRow<\/code> bile\u015feninin, farkl\u0131 s\u00fctunlar i\u00e7in dinamik ve \u00e7e\u015fitli i\u00e7erikleri (metin, buton, ikon vb.) kolayca alabilmesi gerekiyor.<\/p>\nTableRow<\/code> bile\u015feni i\u00e7inde her bir h\u00fccre i\u00e7in dinamik olarak adland\u0131r\u0131lm\u0131\u015f yuvalar (\u00f6rne\u011fin cell_name<\/code>, cell_status<\/code>, cell_actions<\/code>) tan\u0131mlanabilir. SlotProvider<\/code> arac\u0131l\u0131\u011f\u0131yla bu yuvalara ilgili i\u00e7erikler sa\u011flan\u0131r.<\/p>\n\n\/\/ TableRow.jsx\nimport React from 'react';\nimport { Slot } from 'react-slotx';\n\nconst TableRow = ({ children }) => {\n return (\n <tr style={{ borderBottom: '1px solid #eee' }}>\n <td style={{ padding: '8px', textAlign: 'left' }}><Slot name=\"cell_id\" \/><\/td>\n <td style={{ padding: '8px', textAlign: 'left' }}><Slot name=\"cell_name\" \/><\/td>\n <td style={{ padding: '8px', textAlign: 'left' }}><Slot name=\"cell_status\" \/><\/td>\n <td style={{ padding: '8px', textAlign: 'left' }}><Slot name=\"cell_actions\" \/><\/td>\n {children}\n <\/tr>\n );\n};\n\nexport default TableRow;\n <\/code><\/pre>\n<\/p><\/div>\n\n\/\/ App.jsx (Kullan\u0131m \u00d6rne\u011fi)\nimport React from 'react';\nimport TableRow from '.\/TableRow';\nimport { SlotProvider } from 'react-slotx';\n\nfunction TableExample() {\n const products = [\n { id: 1, name: 'Laptop', status: 'Stokta', actions: <button style={{ padding: '5px 10px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '3px' }}>Detay<\/button> },\n { id: 2, name: 'Mouse', status: 'T\u00fckendi', actions: <button style={{ padding: '5px 10px', backgroundColor: '#dc3545', color: 'white', border: 'none', borderRadius: '3px' }}>Bildir<\/button> },\n ];\n\n return (\n <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>\n <h3>Karma\u015f\u0131k Tablo Sat\u0131rlar\u0131<\/h3>\n <table style={{ width: '100%', borderCollapse: 'collapse', border: '1px solid #ccc' }}>\n <thead>\n <tr style={{ backgroundColor: '#f2f2f2' }}>\n <th style={{ padding: '8px', textAlign: 'left' }}>ID<\/th>\n <th style={{ padding: '8px', textAlign: 'left' }}>\u00dcr\u00fcn Ad\u0131<\/th>\n <th style={{ padding: '8px', textAlign: 'left' }}>Durum<\/th>\n <th style={{ padding: '8px', textAlign: 'left' }}>Eylemler<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n {products.map(product => (\n <SlotProvider key={product.id} slots={{\n cell_id: <span>{product.id}<\/span>,\n cell_name: <strong>{product.name}<\/strong>,\n cell_status: <span style={{ color: product.status === 'Stokta' ? 'green' : 'red' }}>{product.status}<\/span>,\n cell_actions: product.actions\n }}>\n <TableRow \/>\n <\/SlotProvider>\n ))}\n <\/tbody>\n <\/table>\n <\/div>\n );\n}\n\nexport default TableExample;\n <\/code><\/pre>\n<\/p><\/div>\nTableRow<\/code> bile\u015feni, h\u00fccrelerin i\u00e7eri\u011fini render etme sorumlulu\u011funu \u00fcstlenmez, sadece d\u00fczenlerini sa\u011flar. Bu sayede, her bir h\u00fccre i\u00e7eri\u011fi, ana tablo bile\u015feni taraf\u0131ndan dinamik olarak belirlenebilir. Bu, \u00f6zellikle farkl\u0131 veri tiplerine sahip veya farkl\u0131 etkile\u015fimler gerektiren tablolar i\u00e7in b\u00fcy\u00fck bir esneklik sunar.<\/p>\nSenaryo 3: \u00d6zelle\u015ftirilebilir Modal veya Diyalog Kutular\u0131<\/h3>\n
Modal<\/code> bile\u015feninin, farkl\u0131 kullan\u0131m senaryolar\u0131 i\u00e7in ba\u015fl\u0131\u011f\u0131n\u0131, ana i\u00e7eri\u011fini ve alt bilgi aksiyonlar\u0131n\u0131 kolayca \u00f6zelle\u015ftirebilmesi gerekiyor.<\/p>\nModal<\/code> bile\u015fenine header<\/code>, body<\/code> ve footer<\/code> ad\u0131nda slotlar eklenir. Bu slotlar, modal\u0131n iskeletini korurken, i\u00e7eri\u011fin d\u0131\u015far\u0131dan tamamen kontrol edilmesini sa\u011flar.<\/p>\n\n\/\/ Modal.jsx\nimport React from 'react';\nimport { Slot } from 'react-slotx';\n\nconst Modal = ({ isOpen, onClose, children }) => {\n if (!isOpen) return null;\n\n return (\n <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 1000 }}>\n <div style={{ backgroundColor: 'white', padding: '20px', borderRadius: '8px', minWidth: '400px', maxWidth: '80%', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}>\n <div style={{ borderBottom: '1px solid #eee', paddingBottom: '10px', marginBottom: '15px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n <Slot name=\"header\"><h3 style={{ margin: 0, color: '#333' }}>Varsay\u0131lan Ba\u015fl\u0131k<\/h3><\/Slot>\n <button onClick={onClose} style={{ background: 'none', border: 'none', fontSize: '1.5em', cursor: 'pointer', color: '#888' }}>×<\/button>\n <\/div>\n <div style={{ marginBottom: '15px' }}>\n <Slot name=\"body\">{children}<\/Slot>\n <\/div>\n <div style={{ borderTop: '1px solid #eee', paddingTop: '10px', display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>\n <Slot name=\"footer\">\n <button onClick={onClose} style={{ padding: '8px 15px', backgroundColor: '#f0f0f0', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}>Kapat<\/button>\n <\/Slot>\n <\/div>\n <\/div>\n <\/div>\n );\n};\n\nexport default Modal;\n <\/code><\/pre>\n<\/p><\/div>\n\n\/\/ App.jsx (Kullan\u0131m \u00d6rne\u011fi)\nimport React, { useState } from 'react';\nimport Modal from '.\/Modal';\nimport { SlotProvider } from 'react-slotx';\n\nfunction ModalExample() {\n const [isInfoModalOpen, setInfoModalOpen] = useState(false);\n const [isConfirmModalOpen, setConfirmModalOpen] = useState(false);\n\n return (\n <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>\n <h3>\u00d6zelle\u015ftirilebilir Modal Kutular\u0131<\/h3>\n <button onClick={() => setInfoModalOpen(true)} style={{ padding: '10px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginRight: '10px' }}>Bilgi Modal\u0131n\u0131 A\u00e7<\/button>\n <button onClick={() => setConfirmModalOpen(true)} style={{ padding: '10px 20px', backgroundColor: '#28a745', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>Onay Modal\u0131n\u0131 A\u00e7<\/button>\n\n <SlotProvider slots={{\n header: <h3 style={{ margin: 0, color: '#007bff' }}>\u00d6nemli Bilgilendirme<\/h3>,\n body: <p>Bu bir bilgilendirme mesaj\u0131d\u0131r. L\u00fctfen dikkatlice okuyunuz. Uygulaman\u0131zdaki yenilikler hakk\u0131nda bilgi veriyoruz.<\/p>,\n footer: <button onClick={() => setInfoModalOpen(false)} style={{ padding: '8px 15px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>Anlad\u0131m<\/button>\n }}>\n <Modal isOpen={isInfoModalOpen} onClose={() => setInfoModalOpen(false)} \/>\n <\/SlotProvider>\n\n <SlotProvider slots={{\n header: <h3 style={{ margin: 0, color: '#dc3545' }}>Onay Gerekiyor!<\/h3>,\n body: <p>Bu i\u015flemi ger\u00e7ekle\u015ftirmek istedi\u011finizden emin misiniz? Geri al\u0131namaz bir i\u015flemdir.<\/p>,\n footer: (\n <>\n <button onClick={() => setConfirmModalOpen(false)} style={{ padding: '8px 15px', backgroundColor: '#f0f0f0', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}>\u0130ptal<\/button>\n <button onClick={() => { alert('\u0130\u015flem Onayland\u0131!'); setConfirmModalOpen(false); }} style={{ padding: '8px 15px', backgroundColor: '#dc3545', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>Onayla<\/button>\n <\/>\n )\n }}>\n <Modal isOpen={isConfirmModalOpen} onClose={() => setConfirmModalOpen(false)} \/>\n <\/SlotProvider>\n <\/div>\n );\n}\n\nexport default ModalExample;\n <\/code><\/pre>\n<\/p><\/div>\nModal<\/code> bile\u015feninin iskeleti sabit kal\u0131rken, ba\u015fl\u0131\u011f\u0131, i\u00e7eri\u011fi ve aksiyon butonlar\u0131 tamamen d\u0131\u015far\u0131dan kontrol edilebilir hale gelir. Bu, ayn\u0131 Modal<\/code> bile\u015fenini farkl\u0131 uyar\u0131lar, onay diyaloglar\u0131 veya formlar i\u00e7in yeniden kullanabilmenizi sa\u011flar, b\u00f6ylece kod tekrar\u0131n\u0131 azalt\u0131r ve bile\u015fen k\u00fct\u00fcphanenizin g\u00fcc\u00fcn\u00fc art\u0131r\u0131r.<\/p>\nreact-slotx<\/code>‘in sadece basit i\u00e7erik yerle\u015ftirmeden \u00e7ok daha fazlas\u0131n\u0131 sundu\u011funu g\u00f6stermektedir. Bile\u015fenlerinizin API’sini basitle\u015ftirirken, ayn\u0131 zamanda onlara inan\u0131lmaz bir esneklik ve yeniden kullan\u0131labilirlik kazand\u0131r\u0131r. Bu da, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k React uygulamalar\u0131nda geli\u015ftirme h\u0131z\u0131n\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi art\u0131r\u0131r.<\/p>\nreact-slotx Kullan\u0131rken Dikkat Edilmesi Gerekenler ve \u0130pu\u00e7lar\u0131<\/h2>\n
react-slotx<\/code>, React bile\u015fenlerinizin esnekli\u011fini art\u0131rmak i\u00e7in harika bir ara\u00e7 olsa da, her ara\u00e7ta oldu\u011fu gibi, en iyi sonu\u00e7lar\u0131 elde etmek ve potansiyel tuzaklardan ka\u00e7\u0131nmak i\u00e7in baz\u0131 en iyi uygulamalar\u0131 ve dikkat edilmesi gereken noktalar\u0131 bilmek \u00f6nemlidir. Bu b\u00f6l\u00fcmde, react-slotx<\/code>‘i kullan\u0131rken performans, isimlendirme, geli\u015ftirici deneyimi ve alternatifler gibi konulara de\u011finece\u011fiz.<\/p>\nPerformans Etkileri ve Optimizasyon<\/h3>\n
react-slotx<\/code> React’in kendi render mekanizmalar\u0131n\u0131 kulland\u0131\u011f\u0131 i\u00e7in, do\u011frudan kendisi \u00f6nemli bir performans darbo\u011faz\u0131 yaratmaz. React’in sanal DOM (Virtual DOM) ve diffing algoritmas\u0131, sadece de\u011fi\u015fen k\u0131s\u0131mlar\u0131 g\u00fcncelleyerek performans\u0131 optimize eder.<\/p>\nReact.memo<\/code> veya useCallback<\/code>\/useMemo<\/code> gibi React optimizasyon tekniklerini kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. \u00d6zellikle, SlotProvider<\/code>‘a ge\u00e7en slots<\/code> objesi i\u00e7indeki React elementleri veya fonksiyonlar, her render’da yeniden olu\u015fturuluyorsa, bu durum alt bile\u015fenlerin de gereksiz yere render olmas\u0131na neden olabilir. Bu durumu \u00f6nlemek i\u00e7in slots<\/code> objesini bir useMemo<\/code> hook’u i\u00e7inde sarmalamak faydal\u0131 olabilir:<\/p>\n\nimport React, { useMemo } from 'react';\nimport { SlotProvider } from 'react-slotx';\nimport MyComponentWithSlots from '.\/MyComponentWithSlots';\n\nfunction ParentComponent() {\n const dynamicHeader = <h3>Dinamik Ba\u015fl\u0131k<\/h3>;\n const dynamicFooter = <p>Dinamik Alt Bilgi<\/p>;\n\n const memoizedSlots = useMemo(() => ({\n header: dynamicHeader,\n footer: dynamicFooter,\n }), [dynamicHeader, dynamicFooter]); \/\/ Ba\u011f\u0131ml\u0131l\u0131klar\u0131 do\u011fru belirleyin\n\n return (\n <SlotProvider slots={memoizedSlots}>\n <MyComponentWithSlots \/>\n <\/SlotProvider>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nmemoizedSlots<\/code> objesinin yaln\u0131zca dynamicHeader<\/code> veya dynamicFooter<\/code> de\u011fi\u015fti\u011finde yeniden olu\u015fturulmas\u0131n\u0131 sa\u011flar.<\/p>\n\u0130simlendirme Kurallar\u0131 ve Geli\u015ftirici Deneyimi (DX)<\/h3>\n
\n
content<\/code> yerine mainContent<\/code> veya sidebar<\/code> yerine primarySidebar<\/code> gibi daha spesifik adlar kullan\u0131n.\n <\/li>\nreact-slotx<\/code>, bile\u015fen API’lerini basitle\u015ftirerek DX’i art\u0131rmay\u0131 hedefler. Bu hedefe ula\u015fmak i\u00e7in, bile\u015fenlerinizin dok\u00fcmantasyonunu net tutmak ve \u00f6rnek kullan\u0131mlar sunmak \u00e7ok \u00f6nemlidir. Hangi slotlar\u0131n mevcut oldu\u011fu, hangi t\u00fcr i\u00e7erikleri kabul ettikleri ve varsay\u0131lan davran\u0131\u015flar\u0131 hakk\u0131nda bilgi sa\u011flamak, di\u011fer geli\u015ftiricilerin bile\u015fenlerinizi etkin bir \u015fekilde kullanmas\u0131na yard\u0131mc\u0131 olacakt\u0131r.<\/p>\nAlternatifler ve Ne Zaman react-slotx Tercih Edilmeli?<\/h3>\n
react-slotx<\/code> d\u0131\u015f\u0131nda da y\u00f6ntemler bulunmaktad\u0131r. Bunlar aras\u0131nda en yayg\u0131n olanlar\u0131 children<\/code> prop’u ve “render props” paternidir. Her birinin kendine \u00f6zg\u00fc kullan\u0131m alanlar\u0131 ve avantajlar\u0131 vard\u0131r:<\/p>\n\n
children<\/code> Prop’u:<\/strong> React’in do\u011fal bir \u00f6zelli\u011fidir ve bir bile\u015fenin i\u00e7ine tek bir ana i\u00e7erik blo\u011fu yerle\u015ftirmek i\u00e7in idealdir. \u00d6rne\u011fin, bir