{"id":34510,"date":"2025-11-18T01:31:13","date_gmt":"2025-11-17T22:31:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/kendi-react-sablonunuzu-olusturmanin-adim-adim-rehberi-verimli-gelistirme-ipuclari\/"},"modified":"2025-11-18T01:31:13","modified_gmt":"2025-11-17T22:31:13","slug":"kendi-react-sablonunuzu-olusturmanin-adim-adim-rehberi-verimli-gelistirme-ipuclari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/kendi-react-sablonunuzu-olusturmanin-adim-adim-rehberi-verimli-gelistirme-ipuclari\/","title":{"rendered":"Kendi React \u015eablonunuzu Olu\u015fturman\u0131n Ad\u0131m Ad\u0131m Rehberi: Verimli Geli\u015ftirme \u0130pu\u00e7lar\u0131"},"content":{"rendered":"<\/p>\n
React uygulamalar\u0131 geli\u015ftirirken kar\u015f\u0131la\u015f\u0131lan tekrar eden kurulum s\u00fcre\u00e7leri, proje ba\u015flang\u0131c\u0131n\u0131 s\u0131kl\u0131kla yava\u015flat\u0131r. Bu makale, kendi \u00f6zel React \u015fablonunuzu (template) olu\u015fturman\u0131n neden \u00f6nemli oldu\u011funu, geli\u015ftirme s\u00fcrecinizi nas\u0131l h\u0131zland\u0131raca\u011f\u0131n\u0131 ve modern frontend projelerinde verimlilik arayan herkes i\u00e7in nas\u0131l kapsaml\u0131 bir rehber olaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m anlatmaktad\u0131r. Haz\u0131rlad\u0131\u011f\u0131n\u0131z \u015fablon, sadece zaman kazand\u0131rmakla kalmayacak, ayn\u0131 zamanda projeleriniz aras\u0131nda tutarl\u0131l\u0131\u011f\u0131 da sa\u011flayacakt\u0131r.<\/p>\n
Her yeni React projesine s\u0131f\u0131rdan ba\u015flamak, bir\u00e7ok geli\u015ftiricinin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 ortak bir sorundur. Paket ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kurmak, temel dosya yap\u0131s\u0131n\u0131 olu\u015fturmak, linter ve formatlay\u0131c\u0131lar\u0131 ayarlamak, routing ve state y\u00f6netimi \u00e7\u00f6z\u00fcmlerini entegre etmek gibi tekrarlayan g\u00f6revler, de\u011ferli geli\u015ftirme s\u00fcresini t\u00fcketebilir. Bu durum, \u00f6zellikle birden fazla proje \u00fczerinde \u00e7al\u0131\u015fan ekipler veya ajanslar i\u00e7in ciddi bir verimlilik kayb\u0131na yol a\u00e7ar. \u0130\u015fte tam da bu noktada, kendi \u00f6zel React \u015fablonunuzun devreye girmesi kritik bir avantaj sa\u011flar. Bir React \u015fablonu, her yeni projede kullan\u0131labilecek \u00f6nceden yap\u0131land\u0131r\u0131lm\u0131\u015f bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\n
Kendi \u015fablonunuzu olu\u015fturman\u0131n en belirgin faydas\u0131, \u015f\u00fcphesiz zaman tasarrufudur. Temel bir \u015fablonla, projeye ba\u015flama s\u00fcresi saatlerden dakikalara, hatta saniyelere inebilir. Bu, geli\u015ftiricilerin hemen i\u015fin \u00f6z\u00fcne, yani uygulaman\u0131n benzersiz \u00f6zelliklerini geli\u015ftirmeye odaklanmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, bir \u015fablon kullanmak, projeler aras\u0131nda tutarl\u0131l\u0131k yarat\u0131r. Ayn\u0131 dosya yap\u0131s\u0131, kodlama standartlar\u0131, ba\u011f\u0131ml\u0131l\u0131k versiyonlar\u0131 ve geli\u015ftirme yakla\u015f\u0131mlar\u0131, farkl\u0131 geli\u015ftiricilerin ayn\u0131 proje \u00fczerinde veya farkl\u0131 projeler aras\u0131nda sorunsuz ge\u00e7i\u015f yapabilmesini kolayla\u015ft\u0131r\u0131r. Bu tutarl\u0131l\u0131k, \u00f6zellikle b\u00fcy\u00fck ekiplerde veya uzun vadeli projelerde bak\u0131m maliyetlerini d\u00fc\u015f\u00fcr\u00fcr ve yeni ekip \u00fcyelerinin projeye adaptasyonunu h\u0131zland\u0131r\u0131r.<\/p>\n
Uzman \u0130pucu: Proje ba\u015flang\u0131\u00e7 maliyetlerini minimize etmek ve standartlar\u0131 y\u00fckseltmek i\u00e7in \u015fablonunuzu npm paket olarak yay\u0131nlayabilir veya bir Git deposunda saklayarak herkesin kolayca eri\u015fmesini sa\u011flayabilirsiniz. Bu, \u00f6zellikle b\u00fcy\u00fck ekiplerde entegrasyonu h\u0131zland\u0131r\u0131r.<\/div>\n
Vaka analizi olarak, orta \u00f6l\u00e7ekli bir web geli\u015ftirme ajans\u0131n\u0131 d\u00fc\u015f\u00fcnelim. Bu ajans, her ay ortalama \u00fc\u00e7 yeni m\u00fc\u015fteri projesi al\u0131yor. Daha \u00f6nce, her projeye “create-react-app” ile ba\u015fl\u0131yor, ard\u0131ndan Tailwind CSS, Redux Toolkit, React Router DOM, Jest ve Eslint gibi temel k\u00fct\u00fcphaneleri manuel olarak kurup yap\u0131land\u0131r\u0131yorlard\u0131. Bu s\u00fcre\u00e7, her yeni proje i\u00e7in ortalama 4-6 saatlerini al\u0131yordu. Y\u0131l sonunda, sadece kurulum a\u015famalar\u0131na harcanan zaman\u0131n yakla\u015f\u0131k 150-200 saate ula\u015ft\u0131\u011f\u0131n\u0131 fark ettiler. Bu, iki hafta veya daha fazla s\u00fcren bir geli\u015ftiricinin tam zamanl\u0131 \u00e7al\u0131\u015fma s\u00fcresi anlam\u0131na geliyordu. Bu durum, geli\u015ftiricilerin motivasyonunu d\u00fc\u015f\u00fcr\u00fcyor ve teslim tarihlerini riske at\u0131yordu. Ajans, bu sorunu \u00e7\u00f6zmek i\u00e7in bir hafta harcayarak kendi React \u015fablonunu olu\u015fturmaya karar verdi. \u015eablonlar\u0131na en s\u0131k kulland\u0131klar\u0131 k\u00fct\u00fcphaneleri, \u00f6nceden tan\u0131mlanm\u0131\u015f bir dosya yap\u0131s\u0131n\u0131, \u00f6zel Eslint kurallar\u0131n\u0131 ve tema ayarlar\u0131n\u0131 eklediler. Sonu\u00e7 olarak, yeni bir projeye ba\u015flama s\u00fcresi 15-20 dakikaya d\u00fc\u015ft\u00fc. Bu, y\u0131lda y\u00fczlerce saatlik bir tasarruf ve geli\u015ftiricilerin daha yarat\u0131c\u0131 i\u015flere odaklanmas\u0131n\u0131 sa\u011flayan \u00f6nemli bir geli\u015fmeydi. K\u0131sacas\u0131, kendi React \u015fablonunuz, yaln\u0131zca bir kolayl\u0131k de\u011fil, ayn\u0131 zamanda verimli ve s\u00fcrd\u00fcr\u00fclebilir yaz\u0131l\u0131m geli\u015ftirme prati\u011finin temel bir par\u00e7as\u0131d\u0131r.<\/p>\n
Bir React \u015eablonunda Temel Bile\u015fenler Neler Olmal\u0131?<\/h2>\n
Etkili bir React \u015fablonu olu\u015ftururken, projenizin gelecekteki ihtiya\u00e7lar\u0131n\u0131 ve geli\u015ftirme s\u00fcrecinizi en iyi \u015fekilde destekleyecek temel bile\u015fenleri do\u011fru se\u00e7mek hayati \u00f6nem ta\u015f\u0131r. Bu bile\u015fenler, yaln\u0131zca uygulaman\u0131z\u0131n \u00e7ekirdek \u00f6zelliklerini de\u011fil, ayn\u0131 zamanda kod kalitesini, s\u00fcrd\u00fcr\u00fclebilirli\u011fi ve geli\u015ftirici deneyimini de etkiler. \u0130\u015fte bir React \u015fablonunda mutlaka bulunmas\u0131 gereken temel bile\u015fenler ve bu bile\u015fenlerin neden \u00f6nemli oldu\u011funa dair detayl\u0131 bir bak\u0131\u015f:<\/p>\n
Proje Yap\u0131s\u0131 ve Mod\u00fclerlik Nas\u0131l Sa\u011flan\u0131r?<\/h3>\n
\u015eablonunuzun kalbi, iyi d\u00fc\u015f\u00fcn\u00fclm\u00fc\u015f bir klas\u00f6r ve dosya yap\u0131s\u0131d\u0131r. Mod\u00fclerlik, kodunuzu daha okunabilir, bak\u0131m\u0131 kolay ve \u00f6l\u00e7eklenebilir hale getirir. Tipik bir yap\u0131 \u015f\u00f6yle olabilir:<\/p>\n
\n
src\/components<\/code>: Tekrar kullan\u0131labilir UI bile\u015fenleri (Button, Input, Card vb.).<\/li>\n
src\/pages<\/code>: Uygulaman\u0131z\u0131n ana g\u00f6r\u00fcn\u00fcmleri veya sayfalar\u0131 (HomePage, AboutPage, DashboardPage).<\/li>\n
src\/assets<\/code>: Resimler, ikonlar, fontlar gibi statik dosyalar.<\/li>\n
src\/styles<\/code>: Global stiller, tema de\u011fi\u015fkenleri.<\/li>\n
src\/context<\/code> veya src\/store<\/code>: State y\u00f6netimiyle ilgili dosyalar.<\/li>\n<\/ul>\n
Bu yap\u0131, projenin b\u00fcy\u00fckl\u00fc\u011f\u00fcne g\u00f6re geni\u015fletilebilir veya daralt\u0131labilir, ancak temel bir ba\u015flang\u0131\u00e7 noktas\u0131 sunar. \u00d6zellikle b\u00fcy\u00fck projelerde, mod\u00fclerlik sayesinde farkl\u0131 ekiplerin e\u015f zamanl\u0131 \u00e7al\u0131\u015fmas\u0131 kolayla\u015f\u0131r ve ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimi basitle\u015fir.<\/p>\n
State Y\u00f6netimi ve Routing \u00c7\u00f6z\u00fcmleri: Hangi Yakla\u015f\u0131mlar En \u0130yisidir?<\/h3>\n
Uygulaman\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131na ba\u011fl\u0131 olarak farkl\u0131 state y\u00f6netimi \u00e7\u00f6z\u00fcmleri tercih edilebilir. Basit projeler i\u00e7in React’\u0131n kendi Context API’si yeterli olabilirken, daha karma\u015f\u0131k ve b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar i\u00e7in Redux Toolkit, Zustand, Jotai veya Recoil gibi k\u00fct\u00fcphaneler daha uygun olabilir. \u015eablonunuzda, en az\u0131ndan bir basit Context API \u00f6rne\u011fi veya tercih etti\u011finiz state y\u00f6netim k\u00fct\u00fcphanesinin temel kurulumu bulunmal\u0131d\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131 kimlik do\u011frulama durumu i\u00e7in Context API nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 g\u00f6steren bir yap\u0131.<\/p>\n
Routing, modern tek sayfa uygulamalar\u0131n\u0131n (SPA) temelidir. React Router DOM, React ekosisteminde de facto standartt\u0131r ve \u015fablonunuzda temel rota tan\u0131mlamalar\u0131, i\u00e7 i\u00e7e rotalar (nested routes) ve parametre y\u00f6netimi i\u00e7in bir yap\u0131land\u0131rma \u00f6rne\u011fi i\u00e7ermelidir. Bu, uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmleri aras\u0131nda sorunsuz gezinmeyi sa\u011flar.<\/p>\n
Styling Yakla\u015f\u0131mlar\u0131: Entegrasyon ve En \u0130yi Uygulamalar<\/h3>\n
G\u00f6rsel tutarl\u0131l\u0131k ve geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc bir stil y\u00f6netimi \u00e7\u00f6z\u00fcm\u00fc se\u00e7mek \u00f6nemlidir. Pop\u00fcler se\u00e7enekler aras\u0131nda \u015funlar bulunur:<\/p>\n
\n
Tailwind CSS:<\/strong> Yard\u0131mc\u0131 s\u0131n\u0131f (utility-first) yakla\u015f\u0131m\u0131yla h\u0131zl\u0131 UI geli\u015ftirme sa\u011flar. \u015eablonunuzda Tailwind yap\u0131land\u0131rma dosyas\u0131 ve temel kullan\u0131m \u00f6rnekleri bulunabilir.<\/li>\n
Styled Components \/ Emotion:<\/strong> CSS-in-JS yakla\u015f\u0131m\u0131yla bile\u015fen tabanl\u0131 stillendirme sunar. Temal\u0131 tasar\u0131mlar ve dinamik stiller i\u00e7in idealdir.<\/li>\n
SASS\/LESS:<\/strong> Geleneksel CSS \u00f6n i\u015flemcileri, daha organize ve yeniden kullan\u0131labilir stiller yazmay\u0131 sa\u011flar.<\/li>\n<\/ul>\n
\u015eablonunuzda tercih etti\u011finiz stil yakla\u015f\u0131m\u0131n\u0131n temel kurulumunu ve birka\u00e7 \u00f6rnek bile\u015feni stillendirme bi\u00e7imini g\u00f6stermek faydal\u0131 olacakt\u0131r. Mobil uyumlu (responsive) tasar\u0131m prensiplerini de \u015fablonunuza entegre etmeyi unutmay\u0131n.<\/p>\n
Kod Kalitesi ve Bak\u0131m \u0130\u00e7in Linting, Prettier ve Testing<\/h3>\n
S\u00fcrd\u00fcr\u00fclebilir bir \u015fablonun vazge\u00e7ilmezleri kod kalitesi ara\u00e7lar\u0131d\u0131r:<\/p>\n
\n
ESLint:<\/strong> Kodunuzu belirli kurallara g\u00f6re denetler, potansiyel hatalar\u0131 ve stil ihlallerini tespit eder. \u015eablonunuzda \u00f6nceden yap\u0131land\u0131r\u0131lm\u0131\u015f bir ESLint kural seti (\u00f6rne\u011fin, Airbnb veya kendi \u00f6zel setiniz) bulunmal\u0131d\u0131r.<\/li>\n
Prettier:<\/strong> Otomatik kod formatlay\u0131c\u0131d\u0131r. ESLint ile birlikte \u00e7al\u0131\u015farak kodunuzun her zaman tutarl\u0131 bir bi\u00e7imde kalmas\u0131n\u0131 sa\u011flar, b\u00f6ylece kod incelemelerinde stil tart\u0131\u015fmalar\u0131n\u0131 ortadan kald\u0131r\u0131r.<\/li>\n
Testing (Jest, React Testing Library):<\/strong> Birim ve entegrasyon testleri, uygulaman\u0131z\u0131n g\u00fcvenilirli\u011fini sa\u011flar. \u015eablonunuz, temel bir test ortam\u0131 kurulumu ve birka\u00e7 \u00f6rnek test dosyas\u0131 i\u00e7ermelidir. Bu, geli\u015ftiricileri test yazmaya te\u015fvik eder ve hatalar\u0131n erken a\u015famada yakalanmas\u0131na yard\u0131mc\u0131 olur.<\/li>\n<\/ul>\n
Bu temel bile\u015fenler, kendi React \u015fablonunuzun temelini olu\u015fturur ve her yeni projenizde size sa\u011flam bir ba\u015flang\u0131\u00e7 noktas\u0131 sunar. Bir sonraki b\u00f6l\u00fcmde, bu bile\u015fenleri ad\u0131m ad\u0131m nas\u0131l entegre edece\u011finizi ve \u015fablonunuzu nas\u0131l ba\u015flataca\u011f\u0131n\u0131z\u0131 inceleyece\u011fiz.<\/p>\n
Ad\u0131m Ad\u0131m Kendi React \u015eablonunuzu Nas\u0131l Ba\u015flat\u0131rs\u0131n\u0131z?<\/h2>\n
Kendi React \u015fablonunuzu olu\u015fturmaya ba\u015flamak, ilk ba\u015fta karma\u015f\u0131k g\u00f6r\u00fcnebilir, ancak do\u011fru ad\u0131mlar\u0131 izledi\u011finizde olduk\u00e7a basit ve \u00f6d\u00fcllendirici bir s\u00fcre\u00e7tir. Bu b\u00f6l\u00fcmde, \u015fablonunuz i\u00e7in sa\u011flam bir temel olu\u015fturmak amac\u0131yla ad\u0131m ad\u0131m bir rehber sunaca\u011f\u0131z. Modern React geli\u015ftirme i\u00e7in create-react-app<\/code> yerine Vite gibi daha hafif ve h\u0131zl\u0131 ara\u00e7lar\u0131 tercih etmek, geli\u015ftirme deneyiminizi \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir.<\/p>\n
Ba\u015flang\u0131\u00e7 Noktas\u0131: Vite ile Yeni Bir Proje Olu\u015fturma<\/h3>\n
Vite, \u00e7ok daha h\u0131zl\u0131 geli\u015ftirme sunucusu ve daha optimize edilmi\u015f \u00fcretim derlemeleri sa\u011flayan yeni nesil bir build arac\u0131d\u0131r. Ba\u015flamak i\u00e7in terminalinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
Bu komut, my-react-template<\/code> ad\u0131nda TypeScript destekli bir React projesi olu\u015fturur. TypeScript, b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda tip g\u00fcvenli\u011fi sa\u011flayarak hatalar\u0131 azalt\u0131r ve kodun anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. Projeniz olu\u015ftuktan sonra, dizine girin ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyin:<\/p>\n
\ncd my-react-template\nnpm install\n <\/pre>\n
<\/code><\/p>\n
\u015eimdi temel React projeniz haz\u0131r. Ancak bu, hen\u00fcz ki\u015fiselle\u015ftirilmi\u015f bir \u015fablon de\u011fil. S\u0131radaki ad\u0131m, gereksiz dosyalar\u0131 temizlemek ve kendi yap\u0131land\u0131rmalar\u0131m\u0131z\u0131 eklemek olacak.<\/p>\n
Gereksiz Dosyalar\u0131 Temizleme ve Temel Klas\u00f6r Yap\u0131s\u0131 Olu\u015fturma<\/h3>\n
Vite'\u0131n veya create-react-app'in olu\u015fturdu\u011fu varsay\u0131lan projede baz\u0131 \u00f6rnek dosyalar ve logolar bulunur. \u015eablonunuzu sadele\u015ftirmek ve gelecekteki projeleriniz i\u00e7in temiz bir ba\u015flang\u0131\u00e7 noktas\u0131 sunmak ad\u0131na bunlar\u0131 temizlemek iyi bir ad\u0131md\u0131r. Genellikle a\u015fa\u011f\u0131daki dosyalar silinebilir veya d\u00fczenlenebilir:<\/p>\n
\n
src\/App.css<\/code>, src\/index.css<\/code> (e\u011fer kendi stil sisteminizi kuracaksan\u0131z)<\/li>\n
src\/assets\/react.svg<\/code><\/li>\n
src\/App.tsx<\/code> (i\u00e7eri\u011fini bo\u015falt\u0131n veya kendi basit bile\u015feninizi ekleyin)<\/li>\n<\/ul>\n
Temizledikten sonra, daha \u00f6nce bahsetti\u011fimiz mod\u00fcler proje yap\u0131s\u0131n\u0131 uygulamaya ba\u015flay\u0131n. src<\/code> klas\u00f6r\u00fcn\u00fczde a\u015fa\u011f\u0131daki dizinleri olu\u015fturun:<\/p>\n
\nsrc\/\n\u251c\u2500\u2500 components\/ # Yeniden kullan\u0131labilir UI bile\u015fenleri\n\u251c\u2500\u2500 pages\/ # Ana sayfa bile\u015fenleri\n\u251c\u2500\u2500 hooks\/ # \u00d6zel React hook'lar\u0131\n\u251c\u2500\u2500 services\/ # API veya di\u011fer servis etkile\u015fimleri\n\u251c\u2500\u2500 utils\/ # Yard\u0131mc\u0131 fonksiyonlar\n\u251c\u2500\u2500 styles\/ # Global stiller veya tema dosyalar\u0131\n\u251c\u2500\u2500 context\/ # Global state i\u00e7in Context API\n\u251c\u2500\u2500 App.tsx # Ana uygulama bile\u015feni\n\u251c\u2500\u2500 main.tsx # Uygulaman\u0131n ba\u015flang\u0131\u00e7 noktas\u0131\n\u2514\u2500\u2500 vite-env.d.ts # Vite'a \u00f6zel TypeScript tip tan\u0131mlar\u0131\n <\/pre>\n
<\/code><\/p>\n
Bu yap\u0131, projenizin organizasyonunu ve \u00f6l\u00e7eklenebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r.<\/p>\n
TypeScript Entegrasyonu ve Yap\u0131land\u0131rmas\u0131<\/h3>\n
Yukar\u0131daki ba\u015flang\u0131\u00e7 komutu zaten TypeScript'i entegre etmi\u015fti. Ancak, projenizin b\u00fcy\u00fckl\u00fc\u011f\u00fcne g\u00f6re tsconfig.json<\/code> dosyas\u0131nda baz\u0131 ince ayarlar yapmak isteyebilirsiniz. \u00d6rne\u011fin, yol takma adlar\u0131 (path aliases) eklemek, uzun g\u00f6receli yollar\u0131 k\u0131saltarak kodun okunabilirli\u011fini art\u0131r\u0131r:<\/p>\n
Bu yap\u0131land\u0131rma ile, bir bile\u015feni i\u00e7e aktar\u0131rken ..\/..\/components\/Button<\/code> yerine import Button from '@components\/Button';<\/code> yazabilirsiniz. Bu, \u00f6zellikle derin klas\u00f6r yap\u0131s\u0131na sahip projelerde geli\u015ftirici deneyimini iyile\u015ftirir.<\/p>\n
Paket Y\u00f6netimi ve Temel Ba\u011f\u0131ml\u0131l\u0131klar<\/h3>\n
\u015eablonunuzun package.json<\/code> dosyas\u0131nda, her yeni projede kullanmay\u0131 d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fcz temel ba\u011f\u0131ml\u0131l\u0131klar\u0131n (\u00f6rne\u011fin, react-router-dom<\/code>, axios<\/code>, se\u00e7ti\u011finiz state y\u00f6netim k\u00fct\u00fcphanesi) listelenmesi gerekir. Bu, yeni bir projeye ba\u015flad\u0131\u011f\u0131n\u0131zda npm install<\/code> komutunun t\u00fcm gerekli k\u00fct\u00fcphaneleri otomatik olarak y\u00fcklemesini sa\u011flar.<\/p>\n
Bu ad\u0131mlar\u0131 tamamlad\u0131\u011f\u0131n\u0131zda, kendi React \u015fablonunuz i\u00e7in sa\u011flam ve ki\u015fiselle\u015ftirilmi\u015f bir temel atm\u0131\u015f olacaks\u0131n\u0131z. Bir sonraki b\u00f6l\u00fcmde, state y\u00f6netimi ve routing gibi \u00f6nemli entegrasyonlara daha yak\u0131ndan bakaca\u011f\u0131z.<\/p>\n
State Y\u00f6netimi ve Routing Entegrasyonu Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
Modern React uygulamalar\u0131n\u0131n kalbinde, uygulaman\u0131n durumunu (state) etkili bir \u015fekilde y\u00f6netme ve kullan\u0131c\u0131lar\u0131n farkl\u0131 g\u00f6r\u00fcn\u00fcmler aras\u0131nda kolayca gezinmesini sa\u011flama yetene\u011fi yatar. Bu b\u00f6l\u00fcmde, kendi React \u015fablonunuzda state y\u00f6netimi ve routing'i nas\u0131l entegre edece\u011finizi, b\u00f6ylece hem basit hem de karma\u015f\u0131k senaryolar i\u00e7in g\u00fc\u00e7l\u00fc bir temel olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
React Context API ile Basit Global State Y\u00f6netimi<\/h3>\n
Daha k\u00fc\u00e7\u00fck uygulamalar veya basit global state ihtiya\u00e7lar\u0131 i\u00e7in Redux gibi harici k\u00fct\u00fcphanelere ba\u011f\u0131ml\u0131 olmak yerine React'\u0131n kendi Context API'sini kullanmak harika bir \u00e7\u00f6z\u00fcmd\u00fcr. Context API, prop drilling (prop'lar\u0131n bir\u00e7ok bile\u015fen katman\u0131ndan ge\u00e7irilmesi) sorununu \u00e7\u00f6zerek verileri do\u011frudan ihtiyac\u0131 olan bile\u015fenlere iletmenizi sa\u011flar. \u015eablonunuzda, bir kimlik do\u011frulama ba\u011flam\u0131 veya tema ayarlar\u0131 gibi global bir durumu y\u00f6netmek i\u00e7in bir \u00f6rnek bulundurabilirsiniz.<\/p>\n
\u00d6rnek olarak, bir tema ba\u011flam\u0131 olu\u015ftural\u0131m:<\/p>\n
Bu ba\u011flam\u0131 uygulaman\u0131z\u0131n ana bile\u015fenine sararak (genellikle src\/main.tsx<\/code> veya src\/App.tsx<\/code>'te), t\u00fcm uygulama genelinde tema durumuna eri\u015febilir ve de\u011fi\u015ftirebilirsiniz:<\/p>\n
\n\/\/ src\/main.tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport App from '.\/App.tsx';\nimport { ThemeProvider } from '@context\/ThemeContext'; \/\/ Yol takma ad\u0131n\u0131 kulland\u0131k\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n \n <\/ThemeProvider>\n <\/React.StrictMode>,\n);\n <\/pre>\n
<\/code><\/p>\n
Herhangi bir bile\u015fenden tema durumuna eri\u015fmek i\u00e7in useTheme<\/code> custom hook'unu kullanabilirsiniz:<\/p>\n