{"id":37833,"date":"2026-01-16T15:01:30","date_gmt":"2026-01-16T12:01:30","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/"},"modified":"2026-01-16T15:01:30","modified_gmt":"2026-01-16T12:01:30","slug":"eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/","title":{"rendered":"Eski React Kodunu Anlamak: &#8220;Classy Weather&#8221; Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri"},"content":{"rendered":"<h2>Eski React Kodunu Anlamak: &#8220;Classy Weather&#8221; Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri<\/h2>\n<p>React, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri haline geldi. Ancak, teknolojinin h\u0131zl\u0131 evrimiyle birlikte, birka\u00e7 y\u0131l \u00f6nce yaz\u0131lm\u0131\u015f bir React projesi ile bug\u00fcn yaz\u0131lan bir proje aras\u0131nda \u00f6nemli farkl\u0131l\u0131klar g\u00f6rmek m\u00fcmk\u00fcn. \u00d6zellikle React Hooks&#8217;un hayat\u0131m\u0131za girmesinden \u00f6nce yaz\u0131lm\u0131\u015f, &#8220;s\u0131n\u0131f bile\u015fenleri&#8221; (class components) a\u011f\u0131rl\u0131kl\u0131 kod tabanlar\u0131, yeni nesil geli\u015ftiriciler i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. Bu makalede, eski React paradigmalar\u0131n\u0131 anlaman\u0131n \u00f6nemini, basit bir hava durumu uygulamas\u0131 olan &#8220;Classy Weather&#8221; projesini s\u0131n\u0131f bile\u015fenleriyle geli\u015ftirme deneyimim \u00fczerinden ele alaca\u011f\u0131z. Bu yolculuk, hem ge\u00e7mi\u015fi anlaman\u0131za hem de modern React&#8217;\u0131n de\u011ferini daha iyi kavraman\u0131za yard\u0131mc\u0131 olacak.<\/p>\n<h2>Neden Eski React Kodunu Anlamak \u00d6nemli?<\/h2>\n<p>G\u00fcn\u00fcm\u00fcz\u00fcn React ekosistemi b\u00fcy\u00fck \u00f6l\u00e7\u00fcde fonksiyonel bile\u015fenler ve Hooks etraf\u0131nda d\u00f6nse de, d\u00fcnya genelinde milyonlarca sat\u0131r eski React kodu aktif olarak kullan\u0131lmaya devam ediyor. B\u00fcy\u00fck \u00f6l\u00e7ekli kurumsal uygulamalar, mirasa dayal\u0131 projeler veya uzun s\u00fcredir bak\u0131m\u0131 yap\u0131lan sistemler genellikle s\u0131n\u0131f bile\u015fenleri \u00fczerine in\u015fa edilmi\u015ftir. Bu kod tabanlar\u0131n\u0131 anlamak, s\u00fcrd\u00fcrmek, hata ay\u0131klamak veya modern yap\u0131lara ge\u00e7i\u015f yapmak isteyen her geli\u015ftirici i\u00e7in kritik bir beceridir. &#8220;Classy Weather&#8221; gibi basit bir proje \u00fczerinden bu eski yap\u0131lar\u0131 \u00f6\u011frenmek, ger\u00e7ek d\u00fcnya senaryolar\u0131na haz\u0131rl\u0131k niteli\u011findedir.<\/p>\n<h3>Mevcut Projelerin Bak\u0131m\u0131 ve Geli\u015ftirilmesi<\/h3>\n<p>Bir\u00e7ok \u015firketin hala s\u0131n\u0131f bile\u015fenleri i\u00e7eren aktif projeleri bulunmaktad\u0131r. Yeni bir ekibe kat\u0131ld\u0131\u011f\u0131n\u0131zda veya mevcut bir projeyi devrald\u0131\u011f\u0131n\u0131zda, bu kod tabanlar\u0131n\u0131 okuyabilmek ve \u00fczerinde \u00e7al\u0131\u015fabilmek i\u015finizin temel bir par\u00e7as\u0131 olacakt\u0131r. Eski React kodu bilgisi, bu projelerde etkin bir \u015fekilde katk\u0131da bulunman\u0131z\u0131 sa\u011flar.<\/p>\n<h3>Ge\u00e7i\u015f S\u00fcre\u00e7lerini Y\u00f6netmek<\/h3>\n<p>Eski projeleri Hooks&#8217;a ge\u00e7irme karar\u0131 al\u0131nd\u0131\u011f\u0131nda, mevcut yap\u0131y\u0131 derinlemesine anlamak, ge\u00e7i\u015fin daha sorunsuz ve hatas\u0131z olmas\u0131n\u0131 sa\u011flar. Hangi s\u0131n\u0131f bile\u015feni metodunun hangi Hook&#8217;a kar\u015f\u0131l\u0131k geldi\u011fini bilmek, bu s\u00fcre\u00e7te size b\u00fcy\u00fck avantaj kazand\u0131r\u0131r.<\/p>\n<h3>React&#8217;\u0131n Evrimini Kavramak<\/h3>\n<p>React&#8217;\u0131n s\u0131n\u0131f bile\u015fenlerinden fonksiyonel bile\u015fenlere ve Hooks&#8217;a ge\u00e7i\u015fi, k\u00fct\u00fcphanenin felsefesini ve geli\u015fim y\u00f6n\u00fcn\u00fc g\u00f6steren \u00f6nemli bir d\u00f6n\u00fcm noktas\u0131d\u0131r. Bu evrimi anlamak, React&#8217;\u0131n neden belirli tasar\u0131m kararlar\u0131 ald\u0131\u011f\u0131n\u0131 ve gelecekteki olas\u0131 y\u00f6nelimlerini daha iyi kavraman\u0131za yard\u0131mc\u0131 olur.<\/p>\n<h2>Classy Weather Projesi: Bir Zaman Makinesi Yolculu\u011fu<\/h2>\n<p>&#8220;Classy Weather&#8221; projesi, basit bir hava durumu uygulamas\u0131d\u0131r. Kullan\u0131c\u0131n\u0131n konumuna g\u00f6re veya arama \u00e7ubu\u011funa girilen \u015fehre g\u00f6re hava durumu bilgilerini (s\u0131cakl\u0131k, nem, r\u00fczgar h\u0131z\u0131 vb.) g\u00f6sterir. Bu projeyi s\u0131n\u0131f bile\u015fenleri kullanarak s\u0131f\u0131rdan in\u015fa etmek, eski React kodunun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131na dair pratik bir bak\u0131\u015f a\u00e7\u0131s\u0131 sunar. Bu s\u00fcre\u00e7te, veri \u00e7ekme, durumu y\u00f6netme ve bile\u015fenler aras\u0131 ileti\u015fimi s\u0131n\u0131f bile\u015fenleri ile nas\u0131l sa\u011flad\u0131\u011f\u0131m\u0131z\u0131 deneyimleyece\u011fiz.<\/p>\n<h3>Proje Yap\u0131s\u0131 ve \u0130lk Bile\u015fen<\/h3>\n<p>Classy Weather projesinin temelinde, her biri bir s\u0131n\u0131f olarak tan\u0131mlanm\u0131\u015f bile\u015fenler bulunur. \u00d6rne\u011fin, ana uygulama bile\u015fenimiz \u015f\u00f6yle g\u00f6r\u00fcnebilir:<\/p>\n<pre><code class=\"language-jsx\">\nimport React from 'react';\nimport WeatherDisplay from '.\/WeatherDisplay';\nimport SearchBar from '.\/SearchBar';\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      weatherData: null,\n      location: 'Istanbul',\n      error: null,\n      loading: false,\n    };\n    this.handleSearch = this.handleSearch.bind(this);\n  }\n\n  handleSearch(city) {\n    this.setState({ location: city }, () => {\n      this.fetchWeatherData();\n    });\n  }\n\n  fetchWeatherData() {\n    \/\/ API \u00e7a\u011fr\u0131s\u0131 burada yap\u0131lacak\n  }\n\n  render() {\n    return (\n      <div className=\"app-container\">\n        <h1>Classy Weather<\/h1>\n        <SearchBar onSearch={this.handleSearch} \/>\n        {this.state.loading && <p>Y\u00fckleniyor...<\/p>}\n        {this.state.error && <p className=\"error\">Hata: {this.state.error}<\/p>}\n        {this.state.weatherData && <WeatherDisplay data={this.state.weatherData} \/>}\n      <\/div>\n    );\n  }\n}\n\nexport default App;\n<\/pre>\n<p><\/code><\/p>\n<h3>Durum Y\u00f6netimi: this.state ve setState()<\/h3>\n<p>S\u0131n\u0131f bile\u015fenlerinde durum (state), <code>this.state<\/code> objesi i\u00e7inde tutulur. Durumu g\u00fcncellemek i\u00e7in <code>this.setState()<\/code> metodu kullan\u0131l\u0131r. Bu metodun asenkron \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve do\u011frudan <code>this.state<\/code>'i de\u011fi\u015ftirmemeniz gerekti\u011fini unutmamak \u00f6nemlidir. Yukar\u0131daki \u00f6rnekte <code>handleSearch<\/code> metodu, <code>location<\/code> durumunu g\u00fcnceller ve bir geri \u00e7a\u011fr\u0131 (callback) ile hava durumu verisini \u00e7eker.<\/p>\n<h3>Ya\u015fam D\u00f6ng\u00fcs\u00fc Metotlar\u0131<\/h3>\n<p>S\u0131n\u0131f bile\u015fenlerinin en belirgin \u00f6zelliklerinden biri, bile\u015fenin farkl\u0131 ya\u015fam d\u00f6ng\u00fcs\u00fc evrelerinde \u00e7al\u0131\u015fan \u00f6zel metotlara sahip olmas\u0131d\u0131r. <code>Classy Weather<\/code> uygulamas\u0131nda en s\u0131k kullan\u0131lanlar \u015funlard\u0131r:<\/p>\n<ul>\n<li><code>componentDidMount()<\/code>: Bile\u015fen DOM'a ilk kez ba\u011fland\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r. Genellikle ilk veri \u00e7ekme i\u015flemleri burada yap\u0131l\u0131r.<\/li>\n<li><code>componentDidUpdate(prevProps, prevState)<\/code>: Bile\u015fen g\u00fcncellendi\u011finde (props veya state de\u011fi\u015fti\u011finde) \u00e7al\u0131\u015f\u0131r. \u00d6nceki props ve state de\u011ferlerine eri\u015fim sa\u011flar. Durum de\u011fi\u015fimlerine tepki vermek i\u00e7in idealdir.<\/li>\n<li><code>componentWillUnmount()<\/code>: Bile\u015fen DOM'dan kald\u0131r\u0131lmadan hemen \u00f6nce \u00e7al\u0131\u015f\u0131r. Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in temizlik i\u015flemleri (abonelikleri iptal etme, zamanlay\u0131c\u0131lar\u0131 temizleme) burada yap\u0131l\u0131r.<\/li>\n<\/ul>\n<h2>S\u0131n\u0131f Bile\u015fenlerinin Temelleri: State ve Lifecycle<\/h2>\n<p>S\u0131n\u0131f bile\u015fenlerinin kalbi, <code>state<\/code> y\u00f6netimi ve <code>lifecycle<\/code> metotlar\u0131d\u0131r. Bu iki kavram, bile\u015fenin davran\u0131\u015f\u0131n\u0131 ve DOM ile etkile\u015fimini belirler.<\/p>\n<h3>this.state ve setState'in Derinlikleri<\/h3>\n<p><code>this.state<\/code>, bir bile\u015fenin i\u00e7 durumunu tutan d\u00fcz bir JavaScript objesidir. <code>setState()<\/code> ise bu durumu g\u00fcvenli bir \u015fekilde g\u00fcncellemek i\u00e7in kullan\u0131lan tek yoldur. <code>setState()<\/code>'in iki farkl\u0131 kullan\u0131m \u015fekli vard\u0131r:<\/p>\n<ol>\n<li>Obje olarak g\u00fcncelleme: <code>this.setState({ key: 'yeni de\u011fer' })<\/code><\/li>\n<li>Fonksiyon olarak g\u00fcncelleme: \u00d6zellikle \u00f6nceki duruma ba\u011f\u0131ml\u0131 g\u00fcncellemelerde kullan\u0131l\u0131r.\n<pre><code class=\"language-jsx\">\nthis.setState((prevState) => ({\n  sayac: prevState.sayac + 1\n}));\n    <\/pre>\n<p><\/code>\n  <\/li>\n<\/ol>\n<p><code>setState()<\/code>'in asenkron do\u011fas\u0131, bir\u00e7ok yeni geli\u015ftiriciyi \u015fa\u015f\u0131rt\u0131r. G\u00fcncelleme sonras\u0131 bir i\u015flem yapmak istiyorsan\u0131z, ikinci parametre olarak bir geri \u00e7a\u011fr\u0131 fonksiyonu ge\u00e7melisiniz (yukar\u0131daki <code>handleSearch<\/code> \u00f6rne\u011finde oldu\u011fu gibi).<\/p>\n<h3>Ya\u015fam D\u00f6ng\u00fcs\u00fc Metotlar\u0131: Bile\u015fenin Hayat Hikayesi<\/h3>\n<p>Bir React bile\u015feninin hayat\u0131, \u00e7e\u015fitli evrelerden ge\u00e7er. Bu evrelerin her birinde belirli metotlar otomatik olarak \u00e7a\u011fr\u0131l\u0131r:<\/p>\n<ul>\n<li><strong>Mounting (Ba\u011flama):<\/strong> Bile\u015fenin ilk kez olu\u015fturulup DOM'a eklenmesi.\n<ul>\n<li><code>constructor()<\/code><\/li>\n<li><code>static getDerivedStateFromProps()<\/code><\/li>\n<li><code>render()<\/code><\/li>\n<li><code>componentDidMount()<\/code><\/li>\n<\/ul>\n<\/li>\n<li><strong>Updating (G\u00fcncelleme):<\/strong> Bile\u015fenin props veya state de\u011fi\u015fti\u011finde yeniden render edilmesi.\n<ul>\n<li><code>static getDerivedStateFromProps()<\/code><\/li>\n<li><code>shouldComponentUpdate()<\/code> (performans optimizasyonu i\u00e7in)<\/li>\n<li><code>render()<\/code><\/li>\n<li><code>getSnapshotBeforeUpdate()<\/code><\/li>\n<li><code>componentDidUpdate()<\/code><\/li>\n<\/ul>\n<\/li>\n<li><strong>Unmounting (Kald\u0131rma):<\/strong> Bile\u015fenin DOM'dan kald\u0131r\u0131lmas\u0131.\n<ul>\n<li><code>componentWillUnmount()<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Classy Weather uygulamas\u0131nda, hava durumu verisini ilk kez \u00e7ekerken <code>componentDidMount<\/code>, \u015fehir de\u011fi\u015fti\u011finde ise <code>componentDidUpdate<\/code> kullan\u0131r\u0131z:<\/p>\n<pre><code class=\"language-jsx\">\n\/\/ App.js i\u00e7inde\ncomponentDidMount() {\n  this.fetchWeatherData(); \/\/ Uygulama y\u00fcklendi\u011finde ilk veriyi \u00e7ek\n}\n\ncomponentDidUpdate(prevProps, prevState) {\n  if (prevState.location !== this.state.location) {\n    this.fetchWeatherData(); \/\/ \u015eehir de\u011fi\u015fti\u011finde yeni veriyi \u00e7ek\n  }\n}\n<\/pre>\n<p><\/code><\/p>\n<h2>Prop Drilling ve Context API'nin \u0130lk Ad\u0131mlar\u0131<\/h2>\n<p>Eski React projelerinde, veriyi \u00fcst bile\u015fenlerden alt bile\u015fenlere aktarmak i\u00e7in genellikle \"prop drilling\" ad\u0131 verilen bir y\u00f6ntem kullan\u0131l\u0131rd\u0131. Bu, verinin bir\u00e7ok ara bile\u015fen \u00fczerinden prop olarak manuel olarak ge\u00e7irilmesi anlam\u0131na geliyordu. Derin bir bile\u015fen a\u011fac\u0131nda bu durum, kodu okunaks\u0131z ve bak\u0131m\u0131 zor hale getirebilirdi.<\/p>\n<h3>Prop Drilling'in Zorluklar\u0131<\/h3>\n<p>Classy Weather uygulamas\u0131nda, ana <code>App<\/code> bile\u015feninden <code>WeatherDisplay<\/code> bile\u015fenine hava durumu verisini ge\u00e7irmek kolayd\u0131r. Ancak, e\u011fer <code>WeatherDisplay<\/code>'in i\u00e7inde ba\u015fka alt bile\u015fenler olsayd\u0131 ve bu alt bile\u015fenlerin de bu verilere ihtiyac\u0131 olsayd\u0131, prop drilling ka\u00e7\u0131n\u0131lmaz hale gelirdi.<\/p>\n<pre><code class=\"language-jsx\">\n\/\/ \u00d6rnek bir prop drilling senaryosu\n<App>\n  <ParentComponent data={this.state.data}>\n    <ChildComponent data={this.props.data}>\n      <GrandchildComponent data={this.props.data} \/>\n    <\/ChildComponent>\n  <\/ParentComponent>\n<\/App>\n<\/pre>\n<p><\/code><\/p>\n<p>Burada <code>data<\/code> prop'u, <code>ParentComponent<\/code> ve <code>ChildComponent<\/code> taraf\u0131ndan do\u011frudan kullan\u0131lmasa bile, <code>GrandchildComponent<\/code>'e ula\u015fmak i\u00e7in aradan ge\u00e7mek zorunda kal\u0131yor.<\/p>\n<h3>React Context API ile \u00c7\u00f6z\u00fcmler<\/h3>\n<p>Prop drilling sorununu \u00e7\u00f6zmek i\u00e7in React, Context API'yi tan\u0131tt\u0131. Context, belirli bir veri t\u00fcr\u00fcn\u00fc bile\u015fen a\u011fac\u0131n\u0131n derinliklerinde, prop ge\u00e7i\u015fine gerek kalmadan payla\u015fman\u0131n bir yoludur. Classy Weather uygulamas\u0131nda, \u00f6rne\u011fin tema ayarlar\u0131n\u0131 (a\u00e7\u0131k\/koyu mod) veya API anahtar\u0131n\u0131 global olarak payla\u015fmak i\u00e7in kullan\u0131labilirdi.<\/p>\n<pre><code class=\"language-jsx\">\n\/\/ Tema Context'i olu\u015fturma\nconst ThemeContext = React.createContext('light');\n\nclass App extends React.Component {\n  state = { theme: 'dark' }; \/\/ Tema durumunu App bile\u015feninde tut\n\n  render() {\n    return (\n      <ThemeContext.Provider value={this.state.theme}>\n        <Toolbar \/>\n      <\/ThemeContext.Provider>\n    );\n  }\n}\n\nclass Toolbar extends React.Component {\n  render() {\n    return (\n      <ThemedButton \/>\n    );\n  }\n}\n\nclass ThemedButton extends React.Component {\n  \/\/ Context'i t\u00fcketme\n  static contextType = ThemeContext;\n\n  render() {\n    return <button className={this.context}>Ben bir butonum<\/button>;\n  }\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, <code>ThemedButton<\/code> bile\u015feni, <code>App<\/code> bile\u015feninden gelen <code>theme<\/code> de\u011ferine do\u011frudan <code>this.context<\/code> \u00fczerinden eri\u015febilir, aradaki <code>Toolbar<\/code> bile\u015fenine prop ge\u00e7i\u015fi yapmaya gerek kalmaz.<\/p>\n<h2>Higher-Order Components (HOCs) ve Render Props: Yeniden Kullan\u0131m Desenleri<\/h2>\n<p>S\u0131n\u0131f bile\u015fenleri d\u00f6neminde, kod tekrar\u0131n\u0131 azaltmak ve bile\u015fen mant\u0131\u011f\u0131n\u0131 yeniden kullanmak i\u00e7in iki ana desen \u00f6ne \u00e7\u0131k\u0131yordu: Higher-Order Components (HOCs) ve Render Props.<\/p>\n<h3>Higher-Order Components (HOCs)<\/h3>\n<p>HOC, bir bile\u015fen alan ve yeni bir bile\u015fen d\u00f6nd\u00fcren bir fonksiyondur. Genellikle veri \u00e7ekme, yetkilendirme veya stil gibi ortak mant\u0131\u011f\u0131 payla\u015fmak i\u00e7in kullan\u0131l\u0131rlar. \u00d6rne\u011fin, Classy Weather uygulamas\u0131nda API'den veri \u00e7eken bir HOC olu\u015fturulabilirdi:<\/p>\n<pre><code class=\"language-jsx\">\nfunction withWeatherData(WrappedComponent, defaultCity = 'Ankara') {\n  return class extends React.Component {\n    constructor(props) {\n      super(props);\n      this.state = {\n        data: null,\n        loading: true,\n        error: null,\n        city: defaultCity,\n      };\n    }\n\n    componentDidMount() {\n      this.fetchData(this.state.city);\n    }\n\n    componentDidUpdate(prevProps, prevState) {\n      if (prevState.city !== this.state.city) {\n        this.fetchData(this.state.city);\n      }\n    }\n\n    fetchData = async (city) => {\n      this.setState({ loading: true, error: null });\n      try {\n        \/\/ API \u00e7a\u011fr\u0131s\u0131\n        const response = await fetch(<code>https:\/\/api.weatherapi.com\/v1\/current.json?key=YOUR_API_KEY&q=${city}<\/code>);\n        const data = await response.json();\n        this.setState({ data, loading: false });\n      } catch (error) {\n        this.setState({ error: error.message, loading: false });\n      }\n    };\n\n    render() {\n      return (\n        <WrappedComponent\n          {...this.props}\n          weatherData={this.state.data}\n          weatherLoading={this.state.loading}\n          weatherError={this.state.error}\n          setCity={(city) => this.setState({ city })}\n        \/>\n      );\n    }\n  };\n}\n\n\/\/ Kullan\u0131m:\nclass MyWeatherComponent extends React.Component {\n  render() {\n    const { weatherData, weatherLoading, weatherError, setCity } = this.props;\n    \/\/ Hava durumu verisini g\u00f6ster\n    return (\n      <div>\n        <input type=\"text\" onChange={(e) => setCity(e.target.value)} placeholder=\"\u015eehir girin\" \/>\n        {weatherLoading && <p>Y\u00fckleniyor...<\/p>}\n        {weatherError && <p>Hata: {weatherError}<\/p>}\n        {weatherData && <p>S\u0131cakl\u0131k: {weatherData.current.temp_c}\u00b0C<\/p>}\n      <\/div>\n    );\n  }\n}\n\nexport default withWeatherData(MyWeatherComponent);\n<\/pre>\n<p><\/code><\/p>\n<p>Bu HOC, <code>MyWeatherComponent<\/code>'e hava durumu verilerini ve ilgili durumlar\u0131 prop olarak enjekte eder. Bu sayede <code>MyWeatherComponent<\/code> sadece veriyi g\u00f6sterme i\u015fine odaklanabilir.<\/p>\n<h3>Render Props<\/h3>\n<p>Render Props deseni, bir bile\u015fenin ne render edece\u011fini bir prop arac\u0131l\u0131\u011f\u0131yla, genellikle bir fonksiyon olarak, dinamik olarak belirlemesine olanak tan\u0131r. Bu, HOC'lara bir alternatif olarak d\u00fc\u015f\u00fcn\u00fclebilir ve daha esnek bir bile\u015fen kompozisyonu sa\u011flar.<\/p>\n<pre><code class=\"language-jsx\">\nclass WeatherDataProvider extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: null,\n      loading: true,\n      error: null,\n      city: props.defaultCity || 'Ankara',\n    };\n  }\n\n  componentDidMount() {\n    this.fetchData(this.state.city);\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    if (prevState.city !== this.state.city) {\n      this.fetchData(this.state.city);\n    }\n  }\n\n  fetchData = async (city) => { \/* ... (HOC \u00f6rne\u011findeki fetch kodu) ... *\/ };\n  setCity = (city) => this.setState({ city });\n\n  render() {\n    return this.props.children({\n      weatherData: this.state.data,\n      weatherLoading: this.state.loading,\n      weatherError: this.state.error,\n      setCity: this.setCity,\n    });\n  }\n}\n\n\/\/ Kullan\u0131m:\nclass MyWeatherComponent extends React.Component {\n  render() {\n    return (\n      <WeatherDataProvider defaultCity=\"Izmir\">\n        {({ weatherData, weatherLoading, weatherError, setCity }) => (\n          <div>\n            <input type=\"text\" onChange={(e) => setCity(e.target.value)} placeholder=\"\u015eehir girin\" \/>\n            {weatherLoading && <p>Y\u00fckleniyor...<\/p>}\n            {weatherError && <p>Hata: {weatherError}<\/p>}\n            {weatherData && <p>S\u0131cakl\u0131k: {weatherData.current.temp_c}\u00b0C<\/p>}\n          <\/div>\n        )}\n      <\/WeatherDataProvider>\n    );\n  }\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Render Props deseni, mant\u0131\u011f\u0131 bir bile\u015fenden di\u011ferine \"ge\u00e7irme\" konusunda HOC'lardan daha a\u00e7\u0131k ve esnek bir yol sunar, \u00e7\u00fcnk\u00fc mant\u0131k do\u011frudan JSX i\u00e7inde bir fonksiyon olarak tan\u0131mlan\u0131r.<\/p>\n<h2>Eski React Kodunda Hata Ay\u0131klama ve Optimizasyon<\/h2>\n<p>Eski React kod tabanlar\u0131nda \u00e7al\u0131\u015f\u0131rken hata ay\u0131klama ve performans optimizasyonu, modern React'a g\u00f6re farkl\u0131 yakla\u015f\u0131mlar gerektirebilir.<\/p>\n<h3>Hata Ay\u0131klama Stratejileri<\/h3>\n<p>S\u0131n\u0131f bile\u015fenlerinde hata ay\u0131klarken:<\/p>\n<ul>\n<li><strong>React Developer Tools:<\/strong> Taray\u0131c\u0131 eklentisi, bile\u015fen a\u011fac\u0131n\u0131, prop'lar\u0131 ve state'i incelemek i\u00e7in vazge\u00e7ilmezdir. \u00d6zellikle <code>this.state<\/code> ve <code>this.props<\/code> de\u011ferlerini anl\u0131k olarak g\u00f6rmek \u00e7ok faydal\u0131d\u0131r.<\/li>\n<li><strong>console.log():<\/strong> Ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131n i\u00e7ine <code>console.log()<\/code> ekleyerek hangi evrenin ne zaman tetiklendi\u011fini ve state\/props de\u011ferlerinin nas\u0131l de\u011fi\u015fti\u011fini takip edebilirsiniz.<\/li>\n<li><strong>Hata S\u0131n\u0131rlar\u0131 (Error Boundaries):<\/strong> Uygulaman\u0131n bir k\u0131sm\u0131ndaki hatalar\u0131n t\u00fcm uygulamay\u0131 \u00e7\u00f6kertmesini \u00f6nlemek i\u00e7in s\u0131n\u0131f bile\u015fenleri kullan\u0131larak hata s\u0131n\u0131rlar\u0131 olu\u015fturulabilir.\n<pre><code class=\"language-jsx\">\nclass ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    console.error(\"Hata yakaland\u0131:\", error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return <h1>Bir \u015feyler ters gitti.<\/h1>;\n    }\n    return this.props.children;\n  }\n}\n    <\/pre>\n<p><\/code>\n  <\/li>\n<\/ul>\n<h3>Performans Optimizasyonlar\u0131<\/h3>\n<p>S\u0131n\u0131f bile\u015fenlerinde performans\u0131 art\u0131rmak i\u00e7in:<\/p>\n<ul>\n<li><strong>shouldComponentUpdate():<\/strong> Bu ya\u015fam d\u00f6ng\u00fcs\u00fc metodu, bile\u015fenin gereksiz yere yeniden render edilmesini engellemek i\u00e7in kullan\u0131labilir. <code>true<\/code> d\u00f6nerse bile\u015fen render edilir, <code>false<\/code> d\u00f6nerse edilmez.\n<pre><code class=\"language-jsx\">\nclass MyOptimizedComponent extends React.Component {\n  shouldComponentUpdate(nextProps, nextState) {\n    return nextProps.value !== this.props.value || nextState.count !== this.state.count;\n  }\n  \/\/ ...\n}\n    <\/pre>\n<p><\/code>\n  <\/li>\n<li><strong>React.PureComponent:<\/strong> <code>shouldComponentUpdate<\/code> metodunu props ve state'in y\u00fczeysel kar\u015f\u0131la\u015ft\u0131rmas\u0131n\u0131 yaparak otomatik olarak uygulayan bir temel s\u0131n\u0131ft\u0131r. Karma\u015f\u0131k obje veya dizi prop'lar\u0131 i\u00e7in dikkatli kullan\u0131lmal\u0131d\u0131r.<\/li>\n<li><strong>Memoization:<\/strong> <code>reselect<\/code> gibi k\u00fct\u00fcphanelerle t\u00fcretilmi\u015f verileri \u00f6nbelle\u011fe alarak gereksiz hesaplamalar\u0131 \u00f6nleyebilirsiniz.<\/li>\n<\/ul>\n<h2>Ge\u00e7i\u015f ve Modern React ile Kar\u015f\u0131la\u015ft\u0131rma<\/h2>\n<p>Eski React kodunu anlamak, modern React'\u0131n sundu\u011fu kolayl\u0131klar\u0131 ve avantajlar\u0131 daha iyi kavramam\u0131z\u0131 sa\u011flar. Hooks, s\u0131n\u0131f bile\u015fenlerinin karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 basitle\u015ftirerek ayn\u0131 i\u015flevselli\u011fi daha az ve daha okunabilir kodla yapmam\u0131z\u0131 sa\u011flar.<\/p>\n<h3>S\u0131n\u0131f Bile\u015fenlerinden Hooks'a<\/h3>\n<p>Classy Weather projesindeki <code>App<\/code> bile\u015fenini Hooks ile yeniden yazsayd\u0131k, <code>useState<\/code> ve <code>useEffect<\/code> gibi Hook'lar\u0131 kullan\u0131rd\u0131k:<\/p>\n<pre><code class=\"language-jsx\">\nimport React, { useState, useEffect } from 'react';\nimport WeatherDisplay from '.\/WeatherDisplay';\nimport SearchBar from '.\/SearchBar';\n\nfunction App() {\n  const [weatherData, setWeatherData] = useState(null);\n  const [location, setLocation] = useState('Istanbul');\n  const [error, setError] = useState(null);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    const fetchWeatherData = async () => {\n      setLoading(true);\n      setError(null);\n      try {\n        const response = await fetch(<code>https:\/\/api.weatherapi.com\/v1\/current.json?key=YOUR_API_KEY&q=${location}<\/code>);\n        if (!response.ok) {\n          throw new Error('Hava durumu verisi \u00e7ekilemedi.');\n        }\n        const data = await response.json();\n        setWeatherData(data);\n      } catch (err) {\n        setError(err.message);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchWeatherData();\n  }, [location]); \/\/ location de\u011fi\u015fti\u011finde tekrar \u00e7al\u0131\u015f\u0131r\n\n  const handleSearch = (city) => {\n    setLocation(city);\n  };\n\n  return (\n    <div className=\"app-container\">\n      <h1>Classy Weather (Hooks)<\/h1>\n      <SearchBar onSearch={handleSearch} \/>\n      {loading && <p>Y\u00fckleniyor...<\/p>}\n      {error && <p className=\"error\">Hata: {error}<\/p>}\n      {weatherData && <WeatherDisplay data={weatherData} \/>}\n    <\/div>\n  );\n}\n\nexport default App;\n<\/pre>\n<p><\/code><\/p>\n<p>G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, <code>useState<\/code> ile durum y\u00f6netimi basitle\u015firken, <code>useEffect<\/code> ile <code>componentDidMount<\/code>, <code>componentDidUpdate<\/code> ve <code>componentWillUnmount<\/code>'\u0131n i\u015flevleri tek bir yerde toplanm\u0131\u015ft\u0131r. Ba\u011f\u0131ml\u0131l\u0131k dizisi <code>[location]<\/code>, <code>location<\/code> de\u011fi\u015fti\u011finde <code>useEffect<\/code>'in tekrar \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar, bu da <code>componentDidUpdate<\/code>'teki ko\u015fullu kontrole benzer bir i\u015flev g\u00f6r\u00fcr.<\/p>\n<h3>Farkl\u0131l\u0131klar ve Avantajlar<\/h3>\n<p>A\u015fa\u011f\u0131daki tablo, s\u0131n\u0131f bile\u015fenleri ve Hooks aras\u0131ndaki temel farklar\u0131 \u00f6zetlemektedir:<\/p>\n<table>\n<thead>\n<tr>\n<th>\u00d6zellik<\/th>\n<th>S\u0131n\u0131f Bile\u015fenleri<\/th>\n<th>Fonksiyonel Bile\u015fenler (Hooks ile)<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Durum Y\u00f6netimi<\/td>\n<td><code>this.state<\/code>, <code>this.setState()<\/code><\/td>\n<td><code>useState()<\/code><\/td>\n<\/tr>\n<tr>\n<td>Ya\u015fam D\u00f6ng\u00fcs\u00fc<\/td>\n<td><code>componentDidMount()<\/code>, <code>componentDidUpdate()<\/code>, vb.<\/td>\n<td><code>useEffect()<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>this<\/code> Ba\u011flam\u0131<\/td>\n<td>Gereklidir, ba\u011flama (binding) sorunlar\u0131 olabilir.<\/td>\n<td>Gerekli de\u011fil, fonksiyonel yap\u0131.<\/td>\n<\/tr>\n<tr>\n<td>Mant\u0131k Payla\u015f\u0131m\u0131<\/td>\n<td>HOCs, Render Props<\/td>\n<td>\u00d6zel Hook'lar (Custom Hooks)<\/td>\n<\/tr>\n<tr>\n<td>Kod Uzunlu\u011fu<\/td>\n<td>Genellikle daha uzun ve daha karma\u015f\u0131k.<\/td>\n<td>Daha k\u0131sa ve daha okunabilir.<\/td>\n<\/tr>\n<tr>\n<td>\u00d6\u011frenme E\u011frisi<\/td>\n<td><code>this<\/code> ve ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131 nedeniyle daha dik olabilir.<\/td>\n<td>Daha d\u00fcz, JavaScript fonksiyonlar\u0131na yak\u0131n.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Sonu\u00e7: Eskiye Sayg\u0131, Gelece\u011fe Haz\u0131rl\u0131k<\/h2>\n<p>\"Classy Weather\" uygulamas\u0131n\u0131 s\u0131n\u0131f bile\u015fenleriyle geli\u015ftirmek, eski React kod tabanlar\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131na dair paha bi\u00e7ilmez bir bak\u0131\u015f a\u00e7\u0131s\u0131 sunuyor. <code>this.state<\/code>'ten ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131na, prop drilling'den HOC'lara kadar bir\u00e7ok eski deseni deneyimlemek, modern React'\u0131n neden bu kadar pop\u00fcler oldu\u011funu ve Hooks'un ne kadar b\u00fcy\u00fck bir kolayl\u0131k getirdi\u011fini daha iyi anlamam\u0131z\u0131 sa\u011fl\u0131yor. Eski kodu anlamak, sadece ge\u00e7mi\u015fe sayg\u0131 duymakla kalmaz, ayn\u0131 zamanda mevcut projelerde etkin bir \u015fekilde \u00e7al\u0131\u015fman\u0131z\u0131 ve gelecekteki ge\u00e7i\u015f s\u00fcre\u00e7lerini daha bilin\u00e7li y\u00f6netmenizi sa\u011flar. React ekosisteminin s\u00fcrekli evrim ge\u00e7irdi\u011fini unutmay\u0131n; hem eskiyi bilmek hem de yeniyi takip etmek, sizi daha yetkin ve \u00e7ok y\u00f6nl\u00fc bir geli\u015ftirici yapacakt\u0131r.<\/p>\n<h2>SSS (S\u0131k Sorulan Sorular)<\/h2>\n<h3>1. Neden hala s\u0131n\u0131f bile\u015fenleri \u00f6\u011frenmeliyim?<\/h3>\n<p>Milyonlarca sat\u0131r eski React kodu hala aktif olarak kullan\u0131l\u0131yor ve bak\u0131m\u0131 yap\u0131l\u0131yor. Bu kod tabanlar\u0131n\u0131 anlayabilmek, mevcut projelerde \u00e7al\u0131\u015fmak, hata ay\u0131klamak veya modern yap\u0131lara ge\u00e7i\u015f yapmak i\u00e7in kritik bir beceridir. Ayr\u0131ca, React'\u0131n evrimini ve Hooks'un neden ortaya \u00e7\u0131kt\u0131\u011f\u0131n\u0131 daha iyi anlaman\u0131za yard\u0131mc\u0131 olur.<\/p>\n<h3>2. S\u0131n\u0131f bile\u015fenlerinde <code>this.setState()<\/code> neden asenkrondur?<\/h3>\n<p><code>setState()<\/code>'in asenkron olmas\u0131, React'\u0131n performans optimizasyonlar\u0131 yapmas\u0131na olanak tan\u0131r. Birden fazla <code>setState()<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131 tek bir render d\u00f6ng\u00fcs\u00fcnde birle\u015ftirerek (batching) gereksiz yeniden render'lar\u0131 \u00f6nler. Durum g\u00fcncellendikten sonra bir i\u015flem yapmak istiyorsan\u0131z, <code>setState()<\/code>'in ikinci parametresi olarak bir geri \u00e7a\u011fr\u0131 fonksiyonu kullanmal\u0131s\u0131n\u0131z.<\/p>\n<h3>3. <code>componentDidMount<\/code> ve <code>useEffect<\/code> aras\u0131ndaki temel fark nedir?<\/h3>\n<p><code>componentDidMount<\/code>, s\u0131n\u0131f bile\u015fenlerinde bile\u015fen DOM'a ilk kez ba\u011fland\u0131\u011f\u0131nda yaln\u0131zca bir kez \u00e7al\u0131\u015f\u0131r. <code>useEffect<\/code> ise fonksiyonel bile\u015fenlerde hem ilk ba\u011fland\u0131\u011f\u0131nda (mount) hem de ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde (update) \u00e7al\u0131\u015fabilir. <code>useEffect<\/code>'in ikinci parametresi olan ba\u011f\u0131ml\u0131l\u0131k dizisi, ne zaman tekrar \u00e7al\u0131\u015faca\u011f\u0131n\u0131 kontrol etmenizi sa\u011flar.<\/p>\n<h3>4. Prop drilling sorununu s\u0131n\u0131f bile\u015fenlerinde nas\u0131l \u00e7\u00f6zeriz?<\/h3>\n<p>S\u0131n\u0131f bile\u015fenlerinde prop drilling sorununu \u00e7\u00f6zmek i\u00e7in React Context API veya Higher-Order Components (HOCs) ve Render Props gibi desenler kullan\u0131labilir. Context API, belirli bir veri t\u00fcr\u00fcn\u00fc bile\u015fen a\u011fac\u0131n\u0131n derinliklerinde do\u011frudan eri\u015filebilir k\u0131lar. HOCs ve Render Props ise bile\u015fenler aras\u0131 mant\u0131k ve veri payla\u015f\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<h3>5. Eski bir React projesini Hooks'a ge\u00e7irmek zor mudur?<\/h3>\n<p>Eski bir React projesini Hooks'a ge\u00e7irmek, projenin b\u00fcy\u00fckl\u00fc\u011f\u00fcne ve karma\u015f\u0131kl\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011fi\u015febilir. K\u00fc\u00e7\u00fck projeler i\u00e7in nispeten kolay olabilirken, b\u00fcy\u00fck ve karma\u015f\u0131k projeler i\u00e7in dikkatli bir planlama ve a\u015famal\u0131 bir ge\u00e7i\u015f stratejisi gerektirebilir. Ancak, Hooks'un sundu\u011fu avantajlar (daha temiz kod, daha kolay mant\u0131k payla\u015f\u0131m\u0131) genellikle bu \u00e7abaya de\u011ferdir.<\/p>\n","protected":false},"excerpt":{"rendered":"React, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri haline geldi. Ancak, teknolojinin h\u0131zl\u0131 evrimiyle birlikte, birka\u00e7 y\u0131l \u00f6nce yaz\u0131lm\u0131\u015f bir Re&#8230;","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-37833","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Eski React Kodunu Anlamak: &quot;Classy Weather&quot; Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri - 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\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Eski React Kodunu Anlamak: &quot;Classy Weather&quot; Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri\" \/>\n<meta property=\"og:description\" content=\"React, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri haline geldi. Ancak, teknolojinin h\u0131zl\u0131 evrimiyle birlikte, birka\u00e7 y\u0131l \u00f6nce yaz\u0131lm\u0131\u015f bir Re...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-16T12:01:30+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\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Eski React Kodunu Anlamak: &#8220;Classy Weather&#8221; Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri\",\"datePublished\":\"2026-01-16T12:01:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/\"},\"wordCount\":2395,\"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\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/\",\"name\":\"Eski React Kodunu Anlamak: \\\"Classy Weather\\\" Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-16T12:01:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Eski React Kodunu Anlamak: &#8220;Classy Weather&#8221; Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri\"}]},{\"@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":"Eski React Kodunu Anlamak: \"Classy Weather\" Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri - 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\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/","og_locale":"tr_TR","og_type":"article","og_title":"Eski React Kodunu Anlamak: \"Classy Weather\" Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri","og_description":"React, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri haline geldi. Ancak, teknolojinin h\u0131zl\u0131 evrimiyle birlikte, birka\u00e7 y\u0131l \u00f6nce yaz\u0131lm\u0131\u015f bir Re...","og_url":"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-16T12:01:30+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\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Eski React Kodunu Anlamak: &#8220;Classy Weather&#8221; Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri","datePublished":"2026-01-16T12:01:30+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/"},"wordCount":2395,"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\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/","url":"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/","name":"Eski React Kodunu Anlamak: \"Classy Weather\" Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-16T12:01:30+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/eski-react-kodunu-anlamak-classy-weather-uygulamasini-gelistirmenin-ogrettikleri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Eski React Kodunu Anlamak: &#8220;Classy Weather&#8221; Uygulamas\u0131n\u0131 Geli\u015ftirmenin \u00d6\u011frettikleri"}]},{"@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\/37833","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=37833"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37833\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}