{"id":35342,"date":"2025-11-28T15:01:07","date_gmt":"2025-11-28T12:01:07","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-nedir-ve-modern-web-gelistirmede-neden-vazgecilmezdir\/"},"modified":"2025-11-28T15:01:07","modified_gmt":"2025-11-28T12:01:07","slug":"react-nedir-ve-modern-web-gelistirmede-neden-vazgecilmezdir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-nedir-ve-modern-web-gelistirmede-neden-vazgecilmezdir\/","title":{"rendered":"React Nedir ve Modern Web Geli\u015ftirmede Neden Vazge\u00e7ilmezdir?"},"content":{"rendered":"

<\/p>\n

Modern web geli\u015ftirmenin dinamik d\u00fcnyas\u0131nda, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc ve esnek ara\u00e7lar aray\u0131\u015f\u0131 hi\u00e7 bitmiyor. React, Facebook taraf\u0131ndan geli\u015ftirilen a\u00e7\u0131k kaynakl\u0131 bir JavaScript k\u00fct\u00fcphanesi olarak, bu aray\u0131\u015fa sundu\u011fu etkili \u00e7\u00f6z\u00fcmlerle \u00f6n plana \u00e7\u0131kmaktad\u0131r. Tek sayfa uygulamalar\u0131ndan karma\u015f\u0131k interaktif aray\u00fczlere kadar geni\u015f bir yelpazede kullan\u0131lan React, geli\u015ftiricilere h\u0131zl\u0131, \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay web uygulamalar\u0131 in\u015fa etme imkan\u0131 sunar. Bu makalede React’in temel prensiplerini, pratik uygulamalar\u0131n\u0131 ve ileri d\u00fczey \u00f6zelliklerini ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. <\/p>\n

Web Uygulamalar\u0131 Geli\u015ftirmede Kar\u015f\u0131la\u015f\u0131lan Zorluklar ve React’in \u00c7\u00f6z\u00fcmleri Nelerdir?<\/h2>\n

G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131, sadece bilgi sunman\u0131n \u00f6tesine ge\u00e7erek kullan\u0131c\u0131larla s\u00fcrekli etkile\u015fim halinde olan dinamik deneyimler sunmay\u0131 hedeflemektedir. Ancak bu karma\u015f\u0131k ve interaktif kullan\u0131c\u0131 aray\u00fczlerini (UI) s\u0131f\u0131rdan in\u015fa etmek, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli projelerde ciddi zorluklar\u0131 beraberinde getirir. Veri ak\u0131\u015f\u0131n\u0131 y\u00f6netmek, UI g\u00fcncellemelerini verimli bir \u015fekilde yapmak, kodun tekrar kullan\u0131labilirli\u011fini sa\u011flamak ve performans\u0131 en \u00fcst d\u00fczeyde tutmak gibi konular, geli\u015ftiricilerin en \u00e7ok kar\u015f\u0131la\u015ft\u0131\u011f\u0131 engellerdendir. Geleneksel yakla\u015f\u0131mlarla bu zorluklar\u0131n \u00fcstesinden gelmek, zaman zaman spagetti koda ve bak\u0131m kabuslar\u0131na yol a\u00e7abilmektedir. \u0130\u015fte tam bu noktada React, kendine \u00f6zg\u00fc mimarisi ve yakla\u015f\u0131m\u0131yla modern web geli\u015ftiricilerine g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcmler sunar. React, geli\u015ftiricilerin sadece UI’\u0131n nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcyle de\u011fil, ayn\u0131 zamanda veriler de\u011fi\u015ftik\u00e7e UI’\u0131n nas\u0131l g\u00fcncellenece\u011fiyle de ilgilenmesini kolayla\u015ft\u0131r\u0131r. <\/p>\n

React’in sundu\u011fu temel \u00e7\u00f6z\u00fcmlerden biri, uygulaman\u0131n par\u00e7alar\u0131n\u0131 izole, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir birimler halinde d\u00fc\u015f\u00fcnmeye olanak tan\u0131yan bile\u015fen tabanl\u0131 yakla\u015f\u0131md\u0131r. Bu sayede, karma\u015f\u0131k bir uygulamay\u0131 daha k\u00fc\u00e7\u00fck, y\u00f6netilebilir par\u00e7alara ay\u0131rabilir ve her bir par\u00e7ay\u0131 ayr\u0131 ayr\u0131 geli\u015ftirip test edebiliriz. Ayr\u0131ca React, performans sorunlar\u0131na kar\u015f\u0131 Sanal DOM (Virtual DOM) ad\u0131 verilen ak\u0131ll\u0131 bir mekanizma kullan\u0131r. Ger\u00e7ek DOM \u00fczerinde do\u011frudan manip\u00fclasyon yapmak yerine, React \u00f6nce de\u011fi\u015fiklikleri Sanal DOM \u00fczerinde yapar, ard\u0131ndan sadece gerekli olan minimum de\u011fi\u015fiklikleri ger\u00e7ek DOM’a uygular. Bu i\u015flem, \u00f6zellikle s\u0131k g\u00fcncellenen aray\u00fczlerde performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. T\u00fcm bu \u00f6zellikler bir araya geldi\u011finde, React, geli\u015ftiricilere hem \u00fcretkenli\u011fi art\u0131ran hem de nihai kullan\u0131c\u0131ya daha iyi bir deneyim sunan ara\u00e7lar sa\u011flar.<\/p>\n

Bile\u015fen Tabanl\u0131 Mimari: Neden Bu Kadar G\u00fc\u00e7l\u00fc?<\/h3>\n

React’in kalbinde “bile\u015fen” kavram\u0131 yatar. Bir bile\u015fen, kendi mant\u0131\u011f\u0131na ve g\u00f6r\u00fcn\u00fcm\u00fcne sahip, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir bir kod par\u00e7as\u0131d\u0131r. Web sayfan\u0131zdaki her bir \u00f6\u011feyi (bir d\u00fc\u011fme, bir navigasyon \u00e7ubu\u011fu, bir \u00fcr\u00fcn kart\u0131 vb.) bir bile\u015fen olarak d\u00fc\u015f\u00fcnebilirsiniz. Bu yakla\u015f\u0131m, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131 k\u00fc\u00e7\u00fck, y\u00f6netilebilir par\u00e7alara ay\u0131rmay\u0131 sa\u011flar. \u00d6rne\u011fin, bir e-ticaret sitesi d\u00fc\u015f\u00fcnelim: \u00dcr\u00fcn listesi, \u00fcr\u00fcn kart\u0131, sepete ekle butonu, filtreleme paneli gibi her bir b\u00f6l\u00fcm ayr\u0131 birer React bile\u015feni olabilir. Bu par\u00e7alar\u0131 ayr\u0131 ayr\u0131 geli\u015ftirip test etmek ve sonra bir araya getirmek, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve hatalar\u0131 azalt\u0131r. Dahas\u0131, bir bile\u015feni projenin farkl\u0131 yerlerinde veya ba\u015fka projelerde kolayca yeniden kullanabilirsiniz, bu da kod tekrar\u0131n\u0131 en aza indirir ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi art\u0131r\u0131r. React bile\u015fenleri, genellikle JavaScript fonksiyonlar\u0131 veya s\u0131n\u0131flar\u0131 \u015feklinde yaz\u0131l\u0131r ve JSX ad\u0131 verilen, JavaScript i\u00e7inde HTML benzeri bir s\u00f6zdizimi kullanarak aray\u00fczlerini tan\u0131mlarlar. Bu sayede, hem bile\u015fenin mant\u0131\u011f\u0131 hem de g\u00f6r\u00fcn\u00fcm\u00fc tek bir yerde toplanm\u0131\u015f olur, bu da kodun okunabilirli\u011fini ve y\u00f6netilebilirli\u011fini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r. <\/p>\n

Sanal DOM (Virtual DOM): Performans\u0131n S\u0131rr\u0131 Ne?<\/h3>\n

Web uygulamalar\u0131n\u0131n performans\u0131n\u0131 etkileyen en kritik fakt\u00f6rlerden biri, taray\u0131c\u0131n\u0131n Document Object Model (DOM) \u00fczerinde yapt\u0131\u011f\u0131 i\u015flemlerdir. Ger\u00e7ek DOM manip\u00fclasyonlar\u0131, \u00f6zellikle s\u0131k ve kapsaml\u0131 de\u011fi\u015fiklikler yap\u0131ld\u0131\u011f\u0131nda olduk\u00e7a pahal\u0131ya mal olabilir ve uygulaman\u0131n yava\u015flamas\u0131na neden olabilir. React, bu problemi Sanal DOM ad\u0131 verilen ak\u0131ll\u0131 bir mekanizma ile \u00e7\u00f6zer. Sanal DOM, ger\u00e7ek DOM’un hafif bir kopyas\u0131d\u0131r. Bir React uygulamas\u0131nda bir durum (state) veya \u00f6zellik (props) de\u011fi\u015fti\u011finde, React \u00f6nce t\u00fcm kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc Sanal DOM \u00fczerinde yeniden olu\u015fturur. Ancak bu yeniden olu\u015fturma i\u015flemi, ger\u00e7ek DOM’a g\u00f6re \u00e7ok daha h\u0131zl\u0131d\u0131r \u00e7\u00fcnk\u00fc do\u011frudan taray\u0131c\u0131 d\u00fczenini ve boyama i\u015flemlerini tetiklemez. <\/p>\n

Daha sonra React, Sanal DOM’un yeni halini, eski Sanal DOM haliyle kar\u015f\u0131la\u015ft\u0131r\u0131r. Bu kar\u015f\u0131la\u015ft\u0131rma i\u015flemine “fark bulma” (diffing) denir. React, bu fark bulma algoritmas\u0131n\u0131 kullanarak, sadece ger\u00e7ek DOM \u00fczerinde hangi minimum de\u011fi\u015fikliklerin yap\u0131lmas\u0131 gerekti\u011fini belirler. \u00d6rne\u011fin, bir listedeki tek bir \u00f6\u011fenin metni de\u011fi\u015ftiyse, React sadece o \u00f6\u011fenin metnini g\u00fcnceller, t\u00fcm listeyi veya sayfan\u0131n geri kalan\u0131n\u0131 yeniden \u00e7izmez. Bu optimizasyon s\u00fcreci, “uzla\u015ft\u0131rma” (reconciliation) olarak adland\u0131r\u0131l\u0131r. Bu sayede, gereksiz DOM manip\u00fclasyonlar\u0131ndan ka\u00e7\u0131n\u0131l\u0131r ve uygulaman\u0131n performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131l\u0131r. Kullan\u0131c\u0131, ekrandaki g\u00fcncellemeleri \u00e7ok daha h\u0131zl\u0131 ve ak\u0131c\u0131 bir \u015fekilde deneyimler, bu da genel kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/p>\n

\n Uzman \u0130pucu:<\/strong> Sanal DOM, \u00f6zellikle \u00e7ok say\u0131da \u00f6\u011fenin s\u0131k\u00e7a g\u00fcncellendi\u011fi kompleks aray\u00fczlerde fark yarat\u0131r. React’in bu \u00f6zelli\u011fi sayesinde, geli\u015ftiriciler performans endi\u015fesi duymadan dinamik UI’lar tasarlayabilirler.\n <\/div>\n

React ile \u0130lk Uygulamam\u0131z\u0131 Ad\u0131m Ad\u0131m Nas\u0131l Geli\u015ftiririz?<\/h2>\n

React’in teorik temellerini anlad\u0131ktan sonra, pratik bir \u00f6rnekle bu bilgileri peki\u015ftirelim. Yeni bir React uygulamas\u0131 olu\u015fturmak ve temel bile\u015fenleri, \u00f6zellikleri (props) ve durumu (state) nas\u0131l y\u00f6netece\u011fimizi ad\u0131m ad\u0131m g\u00f6rece\u011fiz. Bu b\u00f6l\u00fcm, React d\u00fcnyas\u0131na yeni ad\u0131m atanlar i\u00e7in kapsaml\u0131 bir ba\u015flang\u0131\u00e7 noktas\u0131 sunmay\u0131 hedeflemektedir. \u0130lk olarak, bir React projesi ba\u015flatmak i\u00e7in gerekli ara\u00e7lar\u0131 kurmam\u0131z gerekiyor. Genellikle create-react-app<\/code> arac\u0131 bu s\u00fcre\u00e7te bize b\u00fcy\u00fck kolayl\u0131k sa\u011flar. Bu ara\u00e7, React projesi i\u00e7in gerekli t\u00fcm yap\u0131land\u0131rmalar\u0131 ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 otomatik olarak kurar, b\u00f6ylece biz do\u011frudan kod yazmaya odaklanabiliriz. Projemizi olu\u015fturduktan sonra, temel bir bile\u015fen tan\u0131mlayacak, bu bile\u015fene d\u0131\u015far\u0131dan veri aktarman\u0131n yolu olan props<\/code>‘lar\u0131 \u00f6\u011frenecek ve bile\u015fenin kendi i\u00e7 durumunu y\u00f6netmek i\u00e7in state<\/code> kavram\u0131n\u0131 ke\u015ffedece\u011fiz. Her ad\u0131m\u0131 a\u00e7\u0131klay\u0131c\u0131 kod \u00f6rnekleri ile destekleyerek, React’in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 somut bir \u015fekilde kavraman\u0131za yard\u0131mc\u0131 olaca\u011f\u0131z.<\/p>\n

Bir React projesi ba\u015flatmak i\u00e7in \u00f6ncelikle bilgisayar\u0131n\u0131zda Node.js ve npm (Node Package Manager) kurulu olmal\u0131d\u0131r. E\u011fer y\u00fckl\u00fc de\u011fillerse, resmi Node.js web sitesinden indirip kurabilirsiniz. Kurulum tamamland\u0131ktan sonra, komut istemcisini veya terminali a\u00e7arak a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n

\nnpx create-react-app ilk-react-uygulamam\n    <\/pre>\n
<\/code><\/p>\n
Bu komut, \"ilk-react-uygulamam\" ad\u0131nda yeni bir React projesi olu\u015fturacakt\u0131r. Proje olu\u015fturulduktan sonra, proje dizinine ge\u00e7in:<\/p>\n
\ncd ilk-react-uygulamam\n    <\/pre>\n
<\/code><\/p>\n
Ve uygulamay\u0131 ba\u015flatmak i\u00e7in:<\/p>\n
\nnpm start\n    <\/pre>\n
<\/code><\/p>\n
Uygulaman\u0131z varsay\u0131lan taray\u0131c\u0131n\u0131zda http:\/\/localhost:3000<\/code> adresinde a\u00e7\u0131lacakt\u0131r. \u015eimdi src\/App.js<\/code> dosyas\u0131n\u0131 d\u00fczenleyerek kendi bile\u015fenimizi olu\u015ftural\u0131m. Ba\u015flang\u0131\u00e7ta olduk\u00e7a karma\u015f\u0131k g\u00f6r\u00fcnebilen bu dosyay\u0131, daha anla\u015f\u0131l\u0131r bir hale getirece\u011fiz. Temel olarak, her React uygulamas\u0131 bir veya daha fazla bile\u015fenden olu\u015fur ve App.js<\/code> genellikle ana bile\u015fenimizdir. Bu dosyay\u0131 a\u00e7t\u0131\u011f\u0131n\u0131zda g\u00f6rece\u011finiz JSX yap\u0131s\u0131n\u0131 de\u011fi\u015ftirece\u011fiz.<\/p>\n
Bile\u015fen Olu\u015fturma ve \u00d6zellikleri (Props) Kullan\u0131m\u0131<\/h3>\n
React'te bir bile\u015fen, genellikle bir JavaScript fonksiyonu olarak tan\u0131mlan\u0131r ve geriye JSX d\u00f6nd\u00fcr\u00fcr. Bu JSX, taray\u0131c\u0131n\u0131n yorumlayabilece\u011fi HTML benzeri yap\u0131y\u0131 temsil eder. \u015eimdi basit bir Merhaba<\/code> bile\u015feni olu\u015ftural\u0131m ve onu App.js<\/code> i\u00e7inde kullanal\u0131m. src<\/code> klas\u00f6r\u00fcn\u00fcn alt\u0131na components<\/code> ad\u0131nda yeni bir klas\u00f6r olu\u015ftural\u0131m ve i\u00e7ine Merhaba.js<\/code> dosyas\u0131n\u0131 ekleyelim. <\/p>\n
\n\/\/ src\/components\/Merhaba.js\nimport React from 'react';\n\nfunction Merhaba(props) {\n  return (\n    
\n      
Merhaba, {props.isim}!<\/h3>\n      
{props.mesaj}<\/p>\n    <\/div>\n  );\n}\n\nexport default Merhaba;\n    <\/pre>\n
<\/code><\/p>\n
Bu Merhaba<\/code> bile\u015feni, props<\/code> ad\u0131nda bir arg\u00fcman al\u0131yor. props<\/code>, bile\u015fenlere d\u0131\u015far\u0131dan veri aktarmak i\u00e7in kullan\u0131lan bir JavaScript nesnesidir. \u015eimdi bu bile\u015feni App.js<\/code> i\u00e7inde nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 g\u00f6relim ve isim<\/code> ile mesaj<\/code> \u00f6zelliklerini nas\u0131l g\u00f6nderece\u011fimizi anlayal\u0131m.<\/p>\n
\n\/\/ src\/App.js\nimport React from 'react';\nimport '.\/App.css';\nimport Merhaba from '.\/components\/Merhaba'; \/\/ Merhaba bile\u015fenimizi import ettik\n\nfunction App() {\n  return (\n    
\n      
\n        
React \u00d6\u011freniyorum<\/h1>\n        \n        \n      <\/header>\n    <\/div>\n  );\n}\n\nexport default App;\n    <\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, Merhaba<\/code> bile\u015fenini iki farkl\u0131 \u015fekilde, farkl\u0131 isim<\/code> ve mesaj<\/code> prop'lar\u0131 ile kulland\u0131k. Bu, bile\u015fenlerin nas\u0131l yeniden kullan\u0131labilir oldu\u011funu ve farkl\u0131 verilerle nas\u0131l yap\u0131land\u0131r\u0131labilece\u011fini g\u00f6sterir. props<\/code>'lar, React'te veri ak\u0131\u015f\u0131n\u0131n tek y\u00f6nl\u00fc (\u00fcstten alta) olmas\u0131n\u0131 sa\u011flar, bu da uygulaman\u0131n veri y\u00f6netimini daha \u00f6ng\u00f6r\u00fclebilir hale getirir.<\/p>\n
Durum (State) Y\u00f6netimi: Kullan\u0131c\u0131 Etkile\u015fimlerini Nas\u0131l Yakalar\u0131z?<\/h3>\n
Uygulamalar sadece statik i\u00e7erik g\u00f6stermez, ayn\u0131 zamanda kullan\u0131c\u0131 etkile\u015fimlerine de yan\u0131t verir. Bir d\u00fc\u011fmenin t\u0131klanmas\u0131yla metnin de\u011fi\u015fmesi, bir formun doldurulmas\u0131yla verilerin g\u00fcncellenmesi gibi durumlar, bile\u015fenin i\u00e7indeki verilerin zamanla de\u011fi\u015fti\u011fi anlam\u0131na gelir. \u0130\u015fte bu de\u011fi\u015fen verilere \"durum\" (state) ad\u0131n\u0131 veriyoruz. React'te useState<\/code> Hook'u, fonksiyonel bile\u015fenlerde durum y\u00f6netimi i\u00e7in kullan\u0131l\u0131r. \u015eimdi bir say\u0131c\u0131 bile\u015feni olu\u015fturarak useState<\/code>'in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6relim.<\/p>\n
\n\/\/ src\/components\/Sayac.js\nimport React, { useState } from 'react';\n\nfunction Sayac() {\n  \/\/ useState Hook'u ile bir 'sayi' durumu ve onu g\u00fcncelleyecek 'setSayi' fonksiyonu tan\u0131mlad\u0131k.\n  \/\/ Ba\u015flang\u0131\u00e7 de\u011feri 0.\n  const [sayi, setSayi] = useState(0);\n\n  const artir = () => {\n    setSayi(sayi + 1); \/\/ Say\u0131y\u0131 bir art\u0131r\u0131r\n  };\n\n  const azalt = () => {\n    setSayi(sayi - 1); \/\/ Say\u0131y\u0131 bir azalt\u0131r\n  };\n\n  return (\n    
\n      
Say\u0131: {sayi}<\/h4>\n