React.js, modern web aray\u00fczleri olu\u015fturmada pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Bu makalede React’in temel dinamiklerini, bile\u015fen yap\u0131s\u0131n\u0131 ve durum y\u00f6netimini uygulamal\u0131 \u00f6rneklerle ke\u015ffederek yolculu\u011funuza sa\u011flam ba\u015flay\u0131n.<\/p>\n
G\u00fcn\u00fcm\u00fcz web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimi hi\u00e7 olmad\u0131\u011f\u0131 kadar \u00f6nemlidir. Kullan\u0131c\u0131lar, h\u0131zl\u0131 y\u00fcklenen, etkile\u015fimli ve dinamik web siteleri beklerken, geli\u015ftiriciler de karma\u015f\u0131k aray\u00fczleri kolayca y\u00f6netebilecek ara\u00e7lar aramaktad\u0131r. \u0130\u015fte tam bu noktada, Meta (eski ad\u0131yla Facebook) taraf\u0131ndan geli\u015ftirilen ve a\u00e7\u0131k kaynakl\u0131 hale getirilen React.js sahneye \u00e7\u0131kar. React, \u00f6zellikle tek sayfa uygulamalar\u0131 (SPA) ve karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczleri (UI) olu\u015fturmak i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n
React’i bu kadar \u00f6zel ve pop\u00fcler yapan temel fikir, uygulamalar\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alara, yani “bile\u015fenlere” ay\u0131rmakt\u0131r. Bu bile\u015fen tabanl\u0131 mimari, geli\u015ftirme s\u00fcrecini sadele\u015ftirir, kodun bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r ve genel olarak daha \u00f6l\u00e7eklenebilir uygulamalar olu\u015fturmaya olanak tan\u0131r. Ayr\u0131ca, React’in performans\u0131 art\u0131ran Sanal DOM (Virtual DOM) kullan\u0131m\u0131 da \u00f6ne \u00e7\u0131kan bir \u00f6zelliktir. Sanal DOM, ger\u00e7ek DOM’un hafif bir kopyas\u0131d\u0131r. Bir bile\u015fenin durumu de\u011fi\u015fti\u011finde, React \u00f6nce bu de\u011fi\u015fikli\u011fi Sanal DOM \u00fczerinde uygular, ard\u0131ndan \u00f6nceki ve mevcut Sanal DOM aras\u0131ndaki farklar\u0131 hesaplayarak yaln\u0131zca gerekli de\u011fi\u015fiklikleri ger\u00e7ek DOM’a yans\u0131t\u0131r. Bu verimli g\u00fcncelleme mekanizmas\u0131, React uygulamalar\u0131n\u0131n h\u0131zla \u00e7al\u0131\u015fmas\u0131n\u0131 ve duyarl\u0131 bir kullan\u0131c\u0131 deneyimi sunmas\u0131n\u0131 sa\u011flar.<\/p>\n
<\/p>\n
React d\u00fcnyas\u0131na ad\u0131m atmak isteyen herkesin akl\u0131ndaki ilk soru genellikle “Nereden ba\u015flamal\u0131y\u0131m?” olur. Asl\u0131nda cevap olduk\u00e7a basittir: Temel JavaScript bilginizin sa\u011flam oldu\u011fundan emin olduktan sonra, React’in yap\u0131 ta\u015flar\u0131n\u0131 anlamaya odaklanmak en mant\u0131kl\u0131 yakla\u015f\u0131md\u0131r. React’in temeli, modern JavaScript (ES6+) \u00f6zelliklerine dayan\u0131r, bu y\u00fczden de\u011fi\u015fken tan\u0131mlamalar\u0131 ( React \u00f6\u011frenim yolculu\u011funuzda kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z ilk temel kavramlardan biri, hi\u00e7 \u015f\u00fcphesiz “Bile\u015fenler” (Components) olacakt\u0131r. React, her \u015feyi bir bile\u015fen olarak d\u00fc\u015f\u00fcnme felsefesini benimser. Bir web sayfas\u0131ndaki navigasyon \u00e7ubu\u011fu, bir buton, bir \u00fcr\u00fcn kart\u0131 veya hatta t\u00fcm sayfan\u0131n kendisi birer bile\u015fen olabilir. Bu bile\u015fenler, mant\u0131\u011f\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc kendi i\u00e7inde bar\u0131nd\u0131ran, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir kod bloklar\u0131d\u0131r. Modern React geli\u015ftirmesinde Fonksiyon Bile\u015fenleri, Hooks ile birlikte \u00e7ok daha yayg\u0131n ve tercih edilen bir y\u00f6ntem haline gelmi\u015ftir. Yeni ba\u015flayanlar i\u00e7in Fonksiyon Bile\u015fenleri ile ba\u015flamak, \u00f6\u011frenme e\u011frisini daha yumu\u015fak hale getirecektir. Bir bile\u015fen, temel olarak JavaScript kodu i\u00e7eren ve JSX (JavaScript XML) ad\u0131 verilen, HTML benzeri bir s\u00f6zdizimi d\u00f6nd\u00fcren bir fonksiyondur.<\/p>\n <\/p>\n React uygulamalar\u0131n\u0131n kalbinde bile\u015fenler yer al\u0131r. Adeta bir yapbozun par\u00e7alar\u0131 gibi, her bile\u015fen belirli bir kullan\u0131c\u0131 aray\u00fcz\u00fc par\u00e7as\u0131n\u0131 temsil eder ve kendi mant\u0131\u011f\u0131n\u0131, durumunu (state) ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc bar\u0131nd\u0131r\u0131r. Bu mod\u00fcler yap\u0131, geli\u015ftirme s\u00fcrecini basitle\u015ftirir, kodun yeniden kullan\u0131labilirli\u011fini art\u0131r\u0131r ve karma\u015f\u0131k aray\u00fczleri daha y\u00f6netilebilir hale getirir. \u00d6rne\u011fin, bir e-ticaret sitesinde bir ‘\u00dcr\u00fcn Kart\u0131’, ‘Sepet’ veya ‘Navigasyon Men\u00fcs\u00fc’ gibi her bir \u00f6\u011fe ayr\u0131 bir bile\u015fen olarak d\u00fc\u015f\u00fcn\u00fclebilir. Her bile\u015fen, d\u0131\u015f d\u00fcnyadan ald\u0131\u011f\u0131 verilerle (props) veya kendi i\u00e7 durum de\u011fi\u015fiklikleriyle (state) etkile\u015fime girer.<\/p>\n React’te bile\u015fenler genellikle fonksiyon bile\u015fenleri olarak tan\u0131mlan\u0131r. Bu bile\u015fenler, JavaScript fonksiyonlar\u0131d\u0131r ve d\u00f6nd\u00fcrd\u00fckleri JSX kodu ile taray\u0131c\u0131ya neyin render edilece\u011fini bildirirler. JSX i\u00e7erisindeki s\u00fcsl\u00fc parantezler ( <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte <\/p>\n React uygulamalar\u0131n\u0131n dinamik ve etkile\u015fimli olmas\u0131n\u0131 sa\u011flayan en temel mekanizmalardan biri, \"durum y\u00f6netimi\"dir (state management). Durum (state), bir bile\u015fenin zamanla de\u011fi\u015febilen ve kullan\u0131c\u0131 etkile\u015fimlerine veya d\u0131\u015f kaynaklardan gelen verilere ba\u011fl\u0131 olarak aray\u00fcz\u00fcn yeniden render edilmesini tetikleyen dahili verileridir. Basit\u00e7e ifade etmek gerekirse, uygulaman\u0131z\u0131n o anki \"anl\u0131k g\u00f6r\u00fcnt\u00fcs\u00fcd\u00fcr\". \u00d6rne\u011fin, bir formdaki giri\u015f de\u011feri, bir a\u00e7\u0131l\u0131r men\u00fcn\u00fcn a\u00e7\u0131k veya kapal\u0131 olmas\u0131, bir sayfan\u0131n y\u00fcklenme durumu gibi veriler, bir bile\u015fenin durumunu olu\u015fturur.<\/p>\n Durum y\u00f6netimi, React uygulamalar\u0131nda hayati bir rol oynar \u00e7\u00fcnk\u00fc UI'nin de\u011fi\u015fen verilere g\u00f6re g\u00fcncellenmesini sa\u011flar. React'in temel prensiplerinden biri, durum de\u011fi\u015fti\u011finde ilgili bile\u015fenin ve alt bile\u015fenlerinin otomatik olarak yeniden render edilmesidir. Bu reaktif yakla\u015f\u0131m, geli\u015ftiricilerin DOM'u manuel olarak manip\u00fcle etme zorunlulu\u011funu ortadan kald\u0131r\u0131r ve b\u00f6ylece kodun daha temiz, daha anla\u015f\u0131l\u0131r ve daha az hataya a\u00e7\u0131k olmas\u0131n\u0131 sa\u011flar. Do\u011fru durum y\u00f6netimi stratejileri, uygulaman\u0131n performans\u0131n\u0131 ve \u00f6l\u00e7eklenebilirli\u011fini do\u011frudan etkiler. Yanl\u0131\u015f y\u00f6netilen durum, \"prop drilling\" gibi sorunlara yol a\u00e7abilir, bu da kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r.<\/p>\n Modern React'te durum y\u00f6netimi genellikle \u015eu anki say\u0131: {sayi}<\/p>\n const<\/code>, let<\/code>), arrow fonksiyonlar, \u015fablon de\u011fi\u015fmezleri (template literals) ve dizi\/obje ayr\u0131\u015ft\u0131rma (destructuring) gibi konulara hakim olmak ba\u015flang\u0131\u00e7ta size b\u00fcy\u00fck avantaj sa\u011flayacakt\u0131r. Bu sayede React kodlar\u0131n\u0131 daha rahat anlayabilir ve yazabilirsiniz. Unutmay\u0131n ki React, bir framework de\u011fil, sadece kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) olu\u015fturmaya odaklanm\u0131\u015f bir k\u00fct\u00fcphanedir.<\/p>\nReact Bile\u015fenleri Nas\u0131l \u00c7al\u0131\u015f\u0131r ve Uygulamalar\u0131 Nas\u0131l \u015eekillendirir?<\/h3>\n
{}<\/code>), JavaScript ifadelerini do\u011frudan JSX i\u00e7ine g\u00f6mmemizi sa\u011flar. \u0130\u015fte basit bir fonksiyon bile\u015feni \u00f6rne\u011fi:<\/p>\n\nfunction Selamlama(props) {\n return Merhaba, {props.ad}!<\/h1>;\n}\n\/\/ Kullan\u0131m \u00f6rne\u011fi:
Selamlama<\/code> adl\u0131 fonksiyon bile\u015feni, props<\/code> ad\u0131nda bir arg\u00fcman al\u0131r ve bu arg\u00fcman arac\u0131l\u0131\u011f\u0131yla d\u0131\u015far\u0131dan ad<\/code> \u00f6zelli\u011fini kullan\u0131r. Fonksiyon bile\u015fenleri, Hooks'un (\u00f6zellikle useState<\/code> ve useEffect<\/code> gibi) ortaya \u00e7\u0131k\u0131\u015f\u0131yla birlikte React geli\u015ftirmede bask\u0131n hale gelmi\u015ftir, \u00e7\u00fcnk\u00fc daha temiz, daha anla\u015f\u0131l\u0131r ve genellikle daha az kodla ayn\u0131 i\u015flevselli\u011fi sunarlar. Bile\u015fen ya\u015fam d\u00f6ng\u00fcs\u00fc de useEffect<\/code> Hook'u ile y\u00f6netilir, bu da uygulaman\u0131n performans\u0131n\u0131 optimize etmek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\nDurum Y\u00f6netimi (State Management) React Uygulamalar\u0131nda Neden Kritikdir?<\/h3>\n
useState<\/code> Hook'u ile yap\u0131l\u0131r. useState<\/code>, fonksiyon bile\u015fenlerine durum eklememizi sa\u011flayan basit ama g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. \u0130\u015fte bir saya\u00e7 uygulamas\u0131nda useState<\/code> kullan\u0131m\u0131na dair bir \u00f6rnek:<\/p>\n\nimport React, { useState } from 'react';\n\nfunction Sayac() {\n const [sayi, setSayi] = useState(0);\n\n return (\n