L\u00fctfen giri\u015f yap\u0131n\u0131z.<\/p>;\n }\n\n if (isAdmin) {\n return (\n
\n
Admin Paneli<\/h3>\n T\u00fcm kullan\u0131c\u0131 verilerine eri\u015fiminiz var.<\/p>\n Kullan\u0131c\u0131lar\u0131 Y\u00f6net<\/button>\n <\/div>\n );\n }\n\n return (\n \n
Kullan\u0131c\u0131 Profili<\/h3>\n Ho\u015f geldiniz, normal kullan\u0131c\u0131.<\/p>\n Ayarlar<\/button>\n <\/div>\n );\n}\n\n\/\/ Kullan\u0131m \u00d6rne\u011fi:\n\/\/ Ne Zaman Kullan\u0131l\u0131r:<\/strong>Avantajlar\u0131:<\/strong>Okunabilirlik:<\/strong> JavaScript’e a\u015fina olan herkes i\u00e7in olduk\u00e7a anla\u015f\u0131l\u0131rd\u0131r.Esneklik:<\/strong> Karma\u015f\u0131k mant\u0131k zincirlerini kolayca uygulayabilirsiniz.Erken \u00c7\u0131k\u0131\u015f:<\/strong> Bile\u015fenin daha fazla i\u015f yapmas\u0131n\u0131 engellemek i\u00e7in belirli bir ko\u015fulda hemen render etmeyi durdurabilir.<\/p>\nDezavantajlar\u0131:<\/strong>JSX D\u0131\u015f\u0131nda Kullan\u0131m:<\/strong> if<\/code>\/else<\/code> ifadelerini do\u011frudan JSX i\u00e7inde kullanamazs\u0131n\u0131z. Bu, bazen JSX’i par\u00e7alara ay\u0131rmay\u0131 veya render mant\u0131\u011f\u0131n\u0131 bile\u015fenin d\u0131\u015f\u0131na \u00e7\u0131karmay\u0131 gerektirebilir.Tekrar Eden Kod:<\/strong> E\u011fer sadece k\u00fc\u00e7\u00fck bir farkla iki benzer bile\u015feni render ediyorsan\u0131z, kod tekrar\u0131na yol a\u00e7abilir.<\/p>\n2. \u00dc\u00e7l\u00fc Operat\u00f6r: ? :<\/code> (Ternary Operator)<\/h3>\n\u00dc\u00e7l\u00fc operat\u00f6r, JavaScript’te bir ko\u015fula ba\u011fl\u0131 olarak iki farkl\u0131 de\u011feri d\u00f6nd\u00fcrmek i\u00e7in kullan\u0131lan k\u0131sa bir ifadedir. React’te, JSX i\u00e7inde sat\u0131r i\u00e7i ko\u015fullu render etme i\u00e7in son derece kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
Nas\u0131l Kullan\u0131l\u0131r:<\/strong>ko\u015ful ? ifade1 : ifade2<\/code> \u015feklindedir. E\u011fer ko\u015ful<\/code> do\u011fruysa ifade1<\/code>, yanl\u0131\u015fsa ifade2<\/code> render edilir.<\/p>\nimport React from 'react';\n\nfunction MesajKutusu({ isOkundu }) {\n return (\n \n {isOkundu ? (\n
Bu mesaj okundu.<\/p>\n ) : (\n
Bu mesaj hen\u00fcz okunmad\u0131.<\/p>\n )}\n {isOkundu ? 'Okunmad\u0131 Olarak \u0130\u015faretle' : 'Okundu Olarak \u0130\u015faretle'}<\/button>\n <\/div>\n );\n}\n\n\/\/ Kullan\u0131m \u00d6rne\u011fi:\n\/\/ Ne Zaman Kullan\u0131l\u0131r:<\/strong>if<\/code>\/else<\/code> senaryolar\u0131 i\u00e7in.Avantajlar\u0131:<\/strong>K\u0131sa ve \u00d6z:<\/strong> \u00d6zellikle basit ko\u015fullar i\u00e7in \u00e7ok daha az kod yazmay\u0131 sa\u011flar.Sat\u0131r \u0130\u00e7i Kullan\u0131m:<\/strong> Do\u011frudan JSX i\u00e7inde kullan\u0131labilir, bu da ilgili mant\u0131\u011f\u0131 bile\u015fenin render k\u0131sm\u0131na yak\u0131n tutar.Okunabilirlik:<\/strong> Basit durumlarda olduk\u00e7a okunabilirdir.<\/p>\nDezavantajlar\u0131:<\/strong>Karma\u015f\u0131kl\u0131k:<\/strong> \u00c7ok fazla i\u00e7 i\u00e7e \u00fc\u00e7l\u00fc operat\u00f6r kullanmak veya karma\u015f\u0131k ifadelerle kullanmak kodun okunabilirli\u011fini h\u0131zla d\u00fc\u015f\u00fcrebilir.\u0130ki Se\u00e7enek:<\/strong> Yaln\u0131zca iki olas\u0131 render sonucu (do\u011fru veya yanl\u0131\u015f) i\u00e7in uygundur. Daha fazla se\u00e7enek i\u00e7in if<\/code>\/else<\/code> veya switch<\/code> daha iyi olabilir.<\/p>\n3. Mant\u0131ksal &&<\/code> Operat\u00f6r\u00fc (Logical AND Operator)<\/h3>\nMant\u0131ksal &&<\/code> operat\u00f6r\u00fc, React’te “e\u011fer ko\u015ful do\u011fruysa, \u015funu render et; aksi takdirde hi\u00e7bir \u015fey render etme” senaryolar\u0131 i\u00e7in harika bir k\u0131sayoldur. JavaScript’te true && ifade<\/code> ifade<\/code>yi d\u00f6nd\u00fcr\u00fcrken, false && ifade<\/code> false<\/code> d\u00f6nd\u00fcr\u00fcr. React, false<\/code>, null<\/code>, undefined<\/code> veya true<\/code> gibi boolean de\u011ferleri render etmez.<\/p>\nNas\u0131l Kullan\u0131l\u0131r:<\/strong>ko\u015ful && JSX_ifadesi<\/code> \u015feklinde kullan\u0131l\u0131r. E\u011fer ko\u015ful<\/code> do\u011fruysa, JSX_ifadesi<\/code> render edilir. E\u011fer ko\u015ful<\/code> yanl\u0131\u015fsa, &&<\/code> operat\u00f6r\u00fc false<\/code> d\u00f6nd\u00fcr\u00fcr ve React bu false<\/code> de\u011ferini g\u00f6z ard\u0131 ederek hi\u00e7bir \u015fey render etmez.<\/p>\nimport React from 'react';\n\nfunction Bildirimler({ bildirimSayisi }) {\n return (\n \n
Bildirimler<\/h3>\n {bildirimSayisi > 0 && (\n Okunmam\u0131\u015f {bildirimSayisi} adet bildiriminiz var!<\/p>\n )}\n {bildirimSayisi === 0 && (\n
Yeni bildiriminiz yok.<\/p>\n )}\n <\/div>\n );\n}\n\n\/\/ Kullan\u0131m \u00d6rne\u011fi:\n\/\/
Ne Zaman Kullan\u0131l\u0131r:<\/strong>Avantajlar\u0131:<\/strong>\u00c7ok K\u0131sa ve \u00d6z:<\/strong> Tek bir ko\u015fula ba\u011fl\u0131 olarak bir \u015feyi render etmek i\u00e7in en k\u0131sa yoldur.Sat\u0131r \u0130\u00e7i Kullan\u0131m:<\/strong> JSX i\u00e7inde do\u011frudan kullan\u0131labilir.Okunabilirlik:<\/strong> “E\u011fer bu do\u011fruysa, bunu g\u00f6ster” mant\u0131\u011f\u0131n\u0131 \u00e7ok net bir \u015fekilde ifade eder.<\/p>\nDezavantajlar\u0131:<\/strong>Sadece Tek Y\u00f6nl\u00fc:<\/strong> Yaln\u0131zca bir ko\u015fulun do\u011fru oldu\u011fu durumu ele al\u0131r. Ko\u015ful yanl\u0131\u015f oldu\u011funda ba\u015fka bir \u015fey render etmek isterseniz, \u00fc\u00e7l\u00fc operat\u00f6r daha uygun olabilir.S\u0131f\u0131r De\u011feri Sorunu:<\/strong> E\u011fer ko\u015ful<\/code> bir say\u0131sal de\u011fer (\u00f6rne\u011fin 0<\/code>) ise ve bu de\u011fer false<\/code> olarak de\u011ferlendiriliyorsa, 0<\/code> rakam\u0131 ekranda g\u00f6r\u00fcnebilir. \u00d6rne\u011fin, bildirimSayisi && <\/p>\n...<\/p>\n
<\/code> durumunda bildirimSayisi<\/code> 0 ise, ekranda 0<\/code> yaz\u0131s\u0131 g\u00f6r\u00fcnecektir. Bu durumu engellemek i\u00e7in bildirimSayisi > 0 && <\/p>\n...<\/p>\n
<\/code> gibi a\u00e7\u0131k bir kontrol kullanmak daha g\u00fcvenlidir.<\/p>\n
4. Switch \u0130fadeleri<\/h3>\n switch<\/code> ifadeleri, tek bir de\u011fi\u015fkenin birden fazla olas\u0131 de\u011ferine g\u00f6re farkl\u0131 kod bloklar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r. React’te, bu yap\u0131, bir bile\u015fenin farkl\u0131 durumlar\u0131na veya tiplerine g\u00f6re tamamen farkl\u0131 UI’lar render etmeniz gerekti\u011finde kullan\u0131\u015fl\u0131d\u0131r. if<\/code>\/else if<\/code> zincirine bir alternatif sunar.<\/p>\nNas\u0131l Kullan\u0131l\u0131r:<\/strong>if<\/code>\/else<\/code> gibi, switch<\/code> ifadeleri de JSX’in d\u0131\u015f\u0131nda, genellikle bir fonksiyonun i\u00e7inde veya return<\/code> ifadesinden \u00f6nce kullan\u0131l\u0131r.<\/p>\nimport React from 'react';\n\nfunction DurumGostergesi({ durum }) {\n let gosterilecekIcerik;\n\n switch (durum) {\n case 'yukleniyor':\n gosterilecekIcerik = Veriler y\u00fckleniyor...<\/p>;\n break;\n case 'basarili':\n gosterilecekIcerik = (\n
\n
\u0130\u015flem ba\u015far\u0131yla tamamland\u0131!<\/p>\n Devam Et<\/button>\n <\/div>\n );\n break;\n case 'hata':\n gosterilecekIcerik = (\n Bir hata olu\u015ftu. L\u00fctfen tekrar deneyin.<\/p>\n );\n break;\n default:\n gosterilecekIcerik =
Bilinmeyen durum.<\/p>;\n }\n\n return (\n
\n {gosterilecekIcerik}\n <\/div>\n );\n}\n\n\/\/ Kullan\u0131m \u00d6rne\u011fi:\n\/\/
\/\/ \"Veriler y\u00fckleniyor...\"\n\/\/
\/\/ \"\u0130\u015flem ba\u015far\u0131yla tamamland\u0131!\"<\/code><\/pre>\n
Ne Zaman Kullan\u0131l\u0131r:<\/strong>prop<\/code> olarak ald\u0131\u011f\u0131 bir de\u011fere (\u00f6rne\u011fin, status<\/code>, type<\/code>, role<\/code>) g\u00f6re birden fazla farkl\u0131 UI par\u00e7ac\u0131\u011f\u0131 render etmeniz gerekti\u011finde.if<\/code>\/else if<\/code> blo\u011funun okunabilirli\u011fi azaltt\u0131\u011f\u0131 durumlarda, switch<\/code> daha d\u00fczenli bir yap\u0131 sunar.<\/p>\nAvantajlar\u0131:<\/strong>Okunabilirlik:<\/strong> \u00c7ok say\u0131da ko\u015fullu dal\u0131 olan senaryolar i\u00e7in if<\/code>\/else if<\/code> zincirine g\u00f6re daha d\u00fczenli ve okunabilir bir yap\u0131 sa\u011flar.Performans:<\/strong> Baz\u0131 durumlarda, \u00f6zellikle \u00e7ok say\u0131da kar\u015f\u0131la\u015ft\u0131rma yap\u0131ld\u0131\u011f\u0131nda, switch<\/code> ifadeleri if<\/code>\/else if<\/code> zincirlerinden biraz daha performansl\u0131 olabilir (ancak modern JavaScript motorlar\u0131 bu fark\u0131 minimize eder).<\/p>\nDezavantajlar\u0131:<\/strong>JSX D\u0131\u015f\u0131nda Kullan\u0131m:<\/strong> if<\/code>\/else<\/code> gibi, switch<\/code> ifadelerini de do\u011frudan JSX i\u00e7inde kullanamazs\u0131n\u0131z.Tek De\u011fi\u015fken:<\/strong> Yaln\u0131zca tek bir de\u011fi\u015fkenin de\u011ferine g\u00f6re ko\u015fullar\u0131 kontrol etmek i\u00e7in uygundur. Birden fazla de\u011fi\u015fkenin kombinasyonuna dayal\u0131 ko\u015fullar i\u00e7in if<\/code>\/else<\/code> daha esnek olabilir.<\/p>\n5. Element De\u011fi\u015fkenleri (Element Variables)<\/h3>\n Element de\u011fi\u015fkenleri, render edilecek JSX’i bir de\u011fi\u015fkende depolay\u0131p daha sonra bu de\u011fi\u015fkeni render etme y\u00f6ntemidir. Bu, karma\u015f\u0131k ko\u015fullu mant\u0131\u011f\u0131 return<\/code> ifadesinden ay\u0131rman\u0131za ve JSX’i daha temiz tutman\u0131za olanak tan\u0131r.<\/p>\nNas\u0131l Kullan\u0131l\u0131r:<\/strong>return<\/code> k\u0131sm\u0131nda bu de\u011fi\u015fkeni render edersiniz.<\/p>\nimport React from 'react';\n\nfunction UrunDetay({ urun, isLoading, error }) {\n let icerik;\n\n if (isLoading) {\n icerik = \u00dcr\u00fcn bilgileri y\u00fckleniyor...<\/p>;\n } else if (error) {\n icerik =
\u00dcr\u00fcn bilgileri al\u0131namad\u0131: {error.message}<\/p>;\n } else if (!urun) {\n icerik =
\u00dcr\u00fcn bulunamad\u0131.<\/p>;\n } else {\n icerik = (\n
\n
{urun.ad}<\/h2>\n Fiyat: {urun.fiyat} TL<\/p>\n
{urun.aciklama}<\/p>\n Sepete Ekle<\/button>\n <\/div>\n );\n }\n\n return (\n \n {icerik}\n <\/div>\n );\n}\n\n\/\/ Kullan\u0131m \u00d6rne\u011fi:\n\/\/
\n\/\/
\n\/\/
<\/code><\/pre>\n
Ne Zaman Kullan\u0131l\u0131r:<\/strong>return<\/code> ifadesini daha temiz ve okunabilir hale getirmek istedi\u011finizde.Avantajlar\u0131:<\/strong>Temiz JSX:<\/strong> return<\/code> ifadesi yaln\u0131zca bir de\u011fi\u015fkeni render etti\u011fi i\u00e7in \u00e7ok daha sade ve okunabilir olur.Karma\u015f\u0131k Mant\u0131k \u0130\u00e7in Uygun:<\/strong> Render edilecek i\u00e7eri\u011fi belirlemek i\u00e7in karma\u015f\u0131k if<\/code>\/else if<\/code> veya switch<\/code> mant\u0131\u011f\u0131n\u0131 kolayca uygulayabilirsiniz.Esneklik:<\/strong> Render edilecek eleman\u0131 bir de\u011fi\u015fkende tuttu\u011funuz i\u00e7in, onu render etmeden \u00f6nce \u00fczerinde ek i\u015flemler yapabilirsiniz.<\/p>\nDezavantajlar\u0131:<\/strong>Ek De\u011fi\u015fken:<\/strong> Basit ko\u015fullar i\u00e7in ekstra bir de\u011fi\u015fken tan\u0131mlamak biraz fazla gelebilir.Do\u011frudan JSX \u0130\u00e7i De\u011fil:<\/strong> Ko\u015fullu mant\u0131k hala JSX’in d\u0131\u015f\u0131nda yer al\u0131r.<\/p>\n6. Y\u00fcksek Dereceli Bile\u015fenler (Higher-Order Components – HOC’lar)<\/h3>\n Y\u00fcksek Dereceli Bile\u015fenler (HOC’lar), React’te bile\u015fen mant\u0131\u011f\u0131n\u0131 yeniden kullanmak i\u00e7in kullan\u0131lan geli\u015fmi\u015f bir tekniktir. Bir HOC, bir bile\u015feni girdi olarak alan ve geli\u015fmi\u015f \u00f6zelliklere sahip yeni bir bile\u015fen d\u00f6nd\u00fcren bir fonksiyondur. Ko\u015fullu render etme ba\u011flam\u0131nda, HOC’lar belirli bir ko\u015fula g\u00f6re sar\u0131l\u0131 bile\u015feni render edip etmeme veya yerine ba\u015fka bir \u015fey render etme mant\u0131\u011f\u0131n\u0131 soyutlamak i\u00e7in kullan\u0131labilir.<\/p>\n
Nas\u0131l Kullan\u0131l\u0131r:<\/strong>WrappedComponent<\/code> al\u0131r ve yeni bir bile\u015fen d\u00f6nd\u00fcr\u00fcr. Yeni bile\u015fen, belirli ko\u015fullar\u0131 kontrol eder ve ko\u015fula g\u00f6re WrappedComponent<\/code>‘i render eder, ba\u015fka bir bile\u015feni render eder veya hi\u00e7bir \u015fey render etmez.<\/p>\nimport React from 'react';\n\n\/\/ HOC tan\u0131m\u0131\nfunction withYetkilendirme(WrappedComponent, yetkiSeviyesi) {\n return function YetkiliBilesen(props) {\n const { kullaniciRol } = props; \/\/ props'tan kullan\u0131c\u0131 rol\u00fcn\u00fc al\u0131yoruz\n\n if (!kullaniciRol) {\n return Giri\u015f yapman\u0131z gerekiyor.<\/p>;\n }\n\n if (kullaniciRol !== yetkiSeviyesi && kullaniciRol !== 'admin') { \/\/ Admin her \u015feye eri\u015febilir varsay\u0131m\u0131\n return
Bu i\u00e7eri\u011fe eri\u015fim yetkiniz yok.<\/p>;\n }\n\n \/\/ Yetki varsa, sar\u0131l\u0131 bile\u015feni render et\n return
\n
Admin Paneli<\/h3>\n Ho\u015f geldiniz, {props.kullaniciRol}.<\/p>\n <\/div>\n );\n}\n\nfunction KullaniciAyarlari(props) {\n return (\n
\n
Kullan\u0131c\u0131 Ayarlar\u0131<\/h3>\n Kullan\u0131c\u0131 rol\u00fcn\u00fcz: {props.kullaniciRol}<\/p>\n <\/div>\n );\n}\n\n\/\/ HOC ile sar\u0131lm\u0131\u015f bile\u015fenler\nconst YetkiliAdminPaneli = withYetkilendirme(AdminPaneli, 'admin');\nconst YetkiliKullaniciAyarlari = withYetkilendirme(KullaniciAyarlari, 'kullanici');\n\n\/\/ Kullan\u0131m \u00d6rne\u011fi:\nfunction Uygulama() {\n const mevcutRol = 'kullanici'; \/\/ Bu de\u011fer ger\u00e7ek bir kimlik do\u011frulama sisteminden gelebilir\n\n return (\n
\n
Uygulama Ana Sayfas\u0131<\/h2>\n Admin olarak giri\u015f yap\u0131ld\u0131\u011f\u0131nda <\/em>\/}\n <\/div>\n );\n}\n\n\/\/ Ne Zaman Kullan\u0131l\u0131r:<\/strong>Avantajlar\u0131:<\/strong>Yeniden Kullan\u0131labilirlik:<\/strong> Ko\u015fullu mant\u0131\u011f\u0131 bir kez yazar ve bir\u00e7ok bile\u015fende kullan\u0131rs\u0131n\u0131z.Soyutlama:<\/strong> Bile\u015fenlerinizin kendi render mant\u0131\u011f\u0131na odaklanmas\u0131n\u0131 sa\u011flar, ko\u015fullu render etme sorumlulu\u011funu HOC’a devreder.Temiz Bile\u015fenler:<\/strong> Sar\u0131l\u0131 bile\u015fenler daha sade ve okunabilir olur.<\/p>\nDezavantajlar\u0131:<\/strong>Sarmalay\u0131c\u0131 Cehennemi (Wrapper Hell):<\/strong> Birden fazla HOC kullan\u0131ld\u0131\u011f\u0131nda, bile\u015fen a\u011fac\u0131nda \u00e7ok say\u0131da i\u00e7 i\u00e7e sarmalay\u0131c\u0131 bile\u015fen olu\u015fabilir, bu da hata ay\u0131klamay\u0131 zorla\u015ft\u0131rabilir.Prop \u00c7ak\u0131\u015fmalar\u0131:<\/strong> HOC’lar, sar\u0131l\u0131 bile\u015fenlere yeni prop’lar ekleyebilir ve bu, var olan prop isimleriyle \u00e7ak\u0131\u015fmalara yol a\u00e7abilir.Anla\u015f\u0131lmas\u0131 Zor:<\/strong> Yeni ba\u015flayanlar i\u00e7in HOC’lar\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak di\u011fer y\u00f6ntemlere g\u00f6re daha karma\u015f\u0131k olabilir.<\/p>\n7. \u00d6zel Hook’lar (Custom Hooks)<\/h3>\n React Hooks ile birlikte gelen \u00f6zel hook’lar, HOC’lara modern ve daha esnek bir alternatif sunar. \u00d6zel hook’lar, bile\u015fenler aras\u0131nda durum bilgisi olan mant\u0131\u011f\u0131 yeniden kullanman\u0131za olanak tan\u0131r. Ko\u015fullu render etme ba\u011flam\u0131nda, \u00f6zel hook’lar, bir bile\u015fenin ne render edece\u011fine karar vermek i\u00e7in gerekli olan ko\u015fullu mant\u0131\u011f\u0131 ve durumu kaps\u00fclleyebilir.<\/p>\n
Nas\u0131l Kullan\u0131l\u0131r:<\/strong>&&<\/code> operat\u00f6r\u00fc, \u00fc\u00e7l\u00fc operat\u00f6r veya if<\/code>\/else<\/code> gibi y\u00f6ntemlerle ko\u015fullu render etmeyi uygular.<\/p>\nimport React, { useState, useEffect } from 'react';\n\n\/\/ \u00d6zel Hook tan\u0131m\u0131: Bir \u00f6zelli\u011fin etkin olup olmad\u0131\u011f\u0131n\u0131 kontrol eder\nfunction useOzellikBayragi(ozellikAdi) {\n const [etkin, setEtkin] = useState(false);\n const [yukleniyor, setYukleniyor] = useState(true);\n\n useEffect(() => {\n \/\/ Ger\u00e7ek bir uygulamada bu, bir API'den veya yap\u0131land\u0131rma dosyas\u0131ndan gelebilir\n setTimeout(() => {\n const ozellikDurumlari = {\n 'yeni-profil-duzenleme': true,\n 'gelismis-arama': false,\n 'dark-mode': true,\n };\n setEtkin(ozellikDurumlari[ozellikAdi] || false);\n setYukleniyor(false);\n }, 500);\n }, [ozellikAdi]);\n\n return { etkin, yukleniyor };\n}\n\n\/\/ \u00d6rnek Bile\u015fenler\nfunction ProfilDuzenleyici() {\n const { etkin: profilDuzenlemeEtkin, yukleniyor } = useOzellikBayragi('yeni-profil-duzenleme');\n\n if (yukleniyor) {\n return \u00d6zellik durumu kontrol ediliyor...<\/p>;\n }\n\n return (\n
\n
Profil D\u00fczenleme<\/h3>\n {profilDuzenlemeEtkin ? (\n Yeni profil d\u00fczenleme aray\u00fcz\u00fc aktif.<\/p>\n ) : (\n
Eski profil d\u00fczenleme aray\u00fcz\u00fc kullan\u0131l\u0131yor.<\/p>\n )}\n Profili D\u00fczenle<\/button>\n <\/div>\n );\n}\n\nfunction AramaCubugu() {\n const { etkin: gelismisAramaEtkin } = useOzellikBayragi('gelismis-arama');\n\n return (\n \n
\n {gelismisAramaEtkin &&
Geli\u015fmi\u015f Arama<\/button>}\n <\/div>\n );\n}\n\n\/\/ Kullan\u0131m \u00d6rne\u011fi:\nfunction Uygulama() {\n return (\n \n
Uygulama Ana Sayfas\u0131<\/h2>\n Ne Zaman Kullan\u0131l\u0131r:<\/strong>Avantajlar\u0131:<\/strong>Yeniden Kullan\u0131labilirlik:<\/strong> HOC’lar gibi, \u00f6zel hook’lar da mant\u0131\u011f\u0131 bile\u015fenler aras\u0131nda payla\u015fmay\u0131 kolayla\u015ft\u0131r\u0131r.Temiz Bile\u015fenler:<\/strong> Bile\u015fenlerinizin render mant\u0131\u011f\u0131na odaklanmas\u0131n\u0131 sa\u011flarken, ko\u015fullu mant\u0131\u011f\u0131 hook’a devreder.Sarmalay\u0131c\u0131 Yok:<\/strong> Bile\u015fen a\u011fac\u0131na ek bir bile\u015fen katman\u0131 eklemez, bu da hata ay\u0131klamay\u0131 ve React DevTools’da incelemeyi kolayla\u015ft\u0131r\u0131r.React Paradigmas\u0131na Uygun:<\/strong> React’in modern geli\u015ftirme yakla\u015f\u0131m\u0131yla daha uyumludur.<\/p>\nDezavantajlar\u0131:<\/strong>Hooks Kurallar\u0131:<\/strong> useState<\/code>, useEffect<\/code> gibi di\u011fer hook’larla birlikte kullan\u0131ld\u0131\u011f\u0131ndan, Hooks’un kurallar\u0131na (\u00f6rne\u011fin, sadece React fonksiyonlar\u0131n\u0131n en \u00fcst seviyesinde \u00e7a\u011f\u0131rmak) uymak gerekir.\u00d6\u011frenme E\u011frisi:<\/strong> Hooks’a yeni ba\u015flayanlar i\u00e7in HOC’lar gibi, \u00f6zel hook’lar\u0131 anlamak ve do\u011fru kullanmak biraz zaman alabilir.<\/p>\nSonu\u00e7<\/h3>\n React uygulamalar\u0131nda ko\u015fullu render etme, dinamik ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri olu\u015fturman\u0131n temel bir par\u00e7as\u0131d\u0131r. Yukar\u0131da ele ald\u0131\u011f\u0131m\u0131z yedi y\u00f6ntem, her biri farkl\u0131 senaryolar ve karma\u015f\u0131kl\u0131k seviyeleri i\u00e7in optimize edilmi\u015f \u00e7e\u015fitli yakla\u015f\u0131mlar sunar:<\/p>\n
1. if<\/code>\/else<\/code> \u0130fadeleri:<\/strong> En temel ve anla\u015f\u0131l\u0131r y\u00f6ntem, \u00f6zellikle return<\/code> ifadesinden \u00f6nce karma\u015f\u0131k mant\u0131k ve erken \u00e7\u0131k\u0131\u015flar i\u00e7in idealdir.\u00dc\u00e7l\u00fc Operat\u00f6r (? :<\/code>):<\/strong> JSX i\u00e7inde iki durumlu, k\u0131sa ve \u00f6z ko\u015fullu render etme i\u00e7in m\u00fckemmeldir.Mant\u0131ksal &&<\/code> Operat\u00f6r\u00fc:<\/strong> Bir elementin sadece belirli bir ko\u015ful do\u011fru oldu\u011funda g\u00f6r\u00fcnmesi gerekti\u011fi tek y\u00f6nl\u00fc senaryolar i\u00e7in \u00e7ok k\u0131sad\u0131r.switch<\/code> \u0130fadeleri:<\/strong> Tek bir de\u011fi\u015fkene ba\u011fl\u0131 olarak birden fazla farkl\u0131 UI dal\u0131n\u0131 y\u00f6netmek i\u00e7in if<\/code>\/else if<\/code> zincirine g\u00f6re daha d\u00fczenli bir alternatif sunar.Element De\u011fi\u015fkenleri:<\/strong> Karma\u015f\u0131k ko\u015fullu mant\u0131\u011f\u0131 JSX’ten ay\u0131rarak return<\/code> ifadesini temiz tutmak ve render edilecek elementi \u00f6nceden haz\u0131rlamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.Y\u00fcksek Dereceli Bile\u015fenler (HOC’lar):<\/strong> Yeniden kullan\u0131labilir, soyutlanm\u0131\u015f ko\u015fullu render etme mant\u0131\u011f\u0131 i\u00e7in g\u00fc\u00e7l\u00fcd\u00fcr, ancak “sarmalay\u0131c\u0131 cehennemi” riski ta\u015f\u0131r.\u00d6zel Hook’lar:<\/strong> HOC’lara modern bir alternatif sunar, durum bilgisi olan ko\u015fullu mant\u0131\u011f\u0131 bile\u015fenler aras\u0131nda sarmalay\u0131c\u0131lar olmadan payla\u015fmay\u0131 sa\u011flar.<\/p>\nHangi y\u00f6ntemi se\u00e7ece\u011finiz, projenizin \u00f6zel ihtiya\u00e7lar\u0131na, ko\u015fulun karma\u015f\u0131kl\u0131\u011f\u0131na, kodun okunabilirli\u011fi gereksinimlerine ve yeniden kullan\u0131labilirlik hedeflerinize ba\u011fl\u0131d\u0131r. Genellikle, basit durumlar i\u00e7in \u00fc\u00e7l\u00fc operat\u00f6r veya &&<\/code> kullan\u0131l\u0131rken, daha karma\u015f\u0131k veya yeniden kullan\u0131labilir mant\u0131k i\u00e7in if<\/code>\/else<\/code>, element de\u011fi\u015fkenleri, switch<\/code>, HOC’lar veya \u00f6zel hook’lar tercih edilir. Bu y\u00f6ntemlerin her birini anlamak, React geli\u015ftiricisi olarak ara\u00e7 kutunuzu zenginle\u015ftirecek ve daha esnek, bak\u0131m\u0131 kolay ve performansl\u0131 uygulamalar olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu\nReact, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir k\u00fct\u00fcphanedir ve bile\u015fen taba","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-32116","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nReact Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu\" \/>\n<meta property=\"og:description\" content=\"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu React, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir k\u00fct\u00fcphanedir ve bile\u015fen taba\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-17T20:40:59+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu\",\"datePublished\":\"2025-10-17T20:40:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/\"},\"wordCount\":2420,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/\",\"name\":\"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-17T20:40:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/","og_locale":"tr_TR","og_type":"article","og_title":"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu","og_description":"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu React, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir k\u00fct\u00fcphanedir ve bile\u015fen taba","og_url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-17T20:40:59+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu","datePublished":"2025-10-17T20:40:59+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/"},"wordCount":2420,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/","url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/","name":"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-17T20:40:59+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-kosullu-render-etmenin-7-yolu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Uygulamalar\u0131nda Ko\u015fullu Render Etmenin 7 Yolu"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=32116"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32116\/revisions"}],"predecessor-version":[{"id":32117,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32116\/revisions\/32117"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}