{"id":37421,"date":"2026-01-04T03:40:46","date_gmt":"2026-01-04T00:40:46","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37421"},"modified":"2026-01-04T03:40:46","modified_gmt":"2026-01-04T00:40:46","slug":"reactte-sinif-bilesenlerine-genel-bakis","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-sinif-bilesenlerine-genel-bakis\/","title":{"rendered":"React’te S\u0131n\u0131f Bile\u015fenlerine Genel Bak\u0131\u015f"},"content":{"rendered":"

<\/p>\n

React’te S\u0131n\u0131f Bile\u015fenlerine Genel Bak\u0131\u015f<\/h2>\n

React, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 mimarisi sayesinde karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini y\u00f6netilebilir, yeniden kullan\u0131labilir par\u00e7alara ay\u0131rmay\u0131 kolayla\u015ft\u0131r\u0131r. React’in ilk zamanlar\u0131ndan itibaren temel yap\u0131 ta\u015flar\u0131ndan biri olan s\u0131n\u0131f bile\u015fenleri (Class Components), \u00f6zellikle uygulaman\u0131n durumu (state) ve ya\u015fam d\u00f6ng\u00fcs\u00fc (lifecycle) y\u00f6netimi konusunda merkezi bir rol oynam\u0131\u015ft\u0131r. Her ne kadar React Hooks’un ortaya \u00e7\u0131k\u0131\u015f\u0131yla fonksiyonel bile\u015fenler daha pop\u00fcler hale gelmi\u015f olsa da, s\u0131n\u0131f bile\u015fenlerini anlamak, React’in temel prensiplerini kavramak, eski kod tabanlar\u0131n\u0131 s\u00fcrd\u00fcrmek veya hata s\u0131n\u0131rlar\u0131 (error boundaries) gibi \u00f6zel durumlar\u0131 ele almak i\u00e7in hala b\u00fcy\u00fck \u00f6nem ta\u015f\u0131maktad\u0131r.<\/p>\n

Bu makalede, React s\u0131n\u0131f bile\u015fenlerinin ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, temel yap\u0131lar\u0131n\u0131, durum ve \u00f6zellik (props) y\u00f6netimini, ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131, olay y\u00f6netimini, referanslar\u0131 ve Context API ile kullan\u0131m\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Ayr\u0131ca, s\u0131n\u0131f bile\u015fenlerinin avantaj ve dezavantajlar\u0131n\u0131 tart\u0131\u015farak, modern React geli\u015ftirme d\u00fcnyas\u0131ndaki yerini de\u011ferlendirece\u011fiz.<\/p>\n

S\u0131n\u0131f Bile\u015fenlerinin Temel Yap\u0131s\u0131<\/h3>\n

React’te bir s\u0131n\u0131f bile\u015feni olu\u015fturmak i\u00e7in ES6 (ECMAScript 2015) s\u0131n\u0131f s\u00f6zdizimini kullan\u0131r\u0131z. Temel olarak, React.Component<\/code> s\u0131n\u0131f\u0131n\u0131 geni\u015fleten bir JavaScript s\u0131n\u0131f\u0131d\u0131r. Bu miras alma i\u015flemi, bile\u015fenimize React’in sundu\u011fu \u00f6zel yetenekleri (state, lifecycle metotlar\u0131 vb.) kazand\u0131r\u0131r.<\/p>\n

Bile\u015fen Tan\u0131mlama<\/h4>\n

Bir s\u0131n\u0131f bile\u015feninin en temel yap\u0131s\u0131 \u015fu \u015fekildedir:<\/p>\n

import React, { Component } from 'react';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      
\n        \n        
Bu benim render metodumdan d\u00f6nen i\u00e7erik.<\/p>\n      <\/div>\n    );\n  }\n}\n\nexport default MyComponent;<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte:
\n*   import React, { Component } from 'react';<\/code>: React k\u00fct\u00fcphanesini ve Component<\/code> s\u0131n\u0131f\u0131n\u0131 i\u00e7e aktar\u0131yoruz. Component<\/code> s\u0131n\u0131f\u0131, React.Component<\/code> yerine daha k\u0131sa bir yaz\u0131m sa\u011flar.
\n*   class MyComponent extends Component { ... }<\/code>: MyComponent<\/code> ad\u0131nda yeni bir s\u0131n\u0131f tan\u0131ml\u0131yoruz ve bu s\u0131n\u0131f\u0131 Component<\/code> s\u0131n\u0131f\u0131ndan t\u00fcretiyoruz.
\n*   render() { ... }<\/code>: Bu metot, s\u0131n\u0131f bile\u015fenlerinin mutlaka<\/strong> sahip olmas\u0131 gereken tek metottur. Bile\u015fenin kullan\u0131c\u0131 aray\u00fcz\u00fcnde ne g\u00f6sterece\u011fini belirten JSX (JavaScript XML) kodunu d\u00f6nd\u00fcrmekle sorumludur. render()<\/code> metodu her \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda (genellikle durum veya \u00f6zellikler de\u011fi\u015fti\u011finde), React sanal DOM’u g\u00fcnceller ve gerekli de\u011fi\u015fiklikleri ger\u00e7ek DOM’a yans\u0131t\u0131r.
\n*   export default MyComponent;<\/code>: Bile\u015fenimizin ba\u015fka dosyalardan i\u00e7e aktar\u0131labilmesini sa\u011flar.<\/p>\n
Durum (State) Y\u00f6netimi<\/h3>\n
Durum (state), bir bile\u015fenin zaman i\u00e7inde de\u011fi\u015febilen ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc etkileyen verilerini temsil eder. S\u0131n\u0131f bile\u015fenlerinde durum, bile\u015fenin kendi i\u00e7inde y\u00f6netilir ve bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca de\u011fi\u015febilir.<\/p>\n
Ba\u015flang\u0131\u00e7 Durumu Tan\u0131mlama<\/h4>\n
Bir s\u0131n\u0131f bile\u015feninin ba\u015flang\u0131\u00e7 durumunu tan\u0131mlamak i\u00e7in constructor<\/code> metodunu kullan\u0131r\u0131z. constructor<\/code> metodu, bir s\u0131n\u0131f\u0131n bir \u00f6rne\u011fi olu\u015fturuldu\u011funda ilk \u00e7a\u011fr\u0131lan \u00f6zel bir metottur.<\/p>\n
import React, { Component } from 'react';\n\nclass Counter extends Component {\n  constructor(props) {\n    super(props); \/\/ \u00dcst s\u0131n\u0131f\u0131n yap\u0131land\u0131r\u0131c\u0131s\u0131n\u0131 \u00e7a\u011f\u0131rmak zorunludur.\n    this.state = {\n      count: 0,\n      message: \"Say\u0131c\u0131 Uygulamas\u0131\"\n    };\n  }\n\n  render() {\n    return (\n      
\n        
{this.state.message}<\/h2>\n        
Mevcut Say\u0131: {this.state.count}<\/p>\n      <\/div>\n    );\n  }\n}\n\nexport default Counter;<\/code><\/pre>\n
*   constructor(props)<\/code>: Yap\u0131land\u0131r\u0131c\u0131 metot, bile\u015fen olu\u015fturuldu\u011funda \u00e7al\u0131\u015f\u0131r. props<\/code> arg\u00fcman\u0131n\u0131 al\u0131r.
\n*   super(props)<\/code>: Bu \u00e7a\u011fr\u0131, t\u00fcretilen s\u0131n\u0131f\u0131n yap\u0131land\u0131r\u0131c\u0131s\u0131nda this<\/code> anahtar kelimesini kullanmadan \u00f6nce mutlaka<\/strong> yap\u0131lmal\u0131d\u0131r. \u00dcst s\u0131n\u0131f\u0131n (Component<\/code>) yap\u0131land\u0131r\u0131c\u0131s\u0131n\u0131 \u00e7a\u011f\u0131r\u0131r ve bile\u015fenin props<\/code>‘lar\u0131n\u0131 do\u011fru \u015fekilde ba\u015flat\u0131r.
\n*   this.state = { ... };<\/code>: Bile\u015fenin ba\u015flang\u0131\u00e7 durumunu tan\u0131mlad\u0131\u011f\u0131m\u0131z yerdir. state<\/code>, her zaman bir JavaScript nesnesi olmal\u0131d\u0131r.<\/p>\n
Durumu G\u00fcncelleme: this.setState()<\/code><\/h4>\n
Durumu do\u011frudan this.state.count = 1;<\/code> gibi atamalarla asla<\/strong> de\u011fi\u015ftirmemelisiniz. Durumu g\u00fcncellemek i\u00e7in her zaman this.setState()<\/code> metodunu kullanmal\u0131s\u0131n\u0131z. this.setState()<\/code>, React’e bile\u015fenin durumunun de\u011fi\u015fti\u011fini ve aray\u00fcz\u00fcn yeniden render edilmesi gerekti\u011fini bildirir.<\/p>\n
import React, { Component } from 'react';\n\nclass Counter extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0\n    };\n    \/\/ Metotlar\u0131 ba\u011flama (binding) - detaylar olay y\u00f6netimi b\u00f6l\u00fcm\u00fcnde\n    this.increment = this.increment.bind(this);\n  }\n\n  increment() {\n    \/\/ this.setState() asenkron \u00e7al\u0131\u015f\u0131r ve durum nesnesini birle\u015ftirir (merge).\n    \/\/ \u00d6nceki duruma ba\u011fl\u0131 g\u00fcncellemeler i\u00e7in fonksiyonel formunu kullanmak daha g\u00fcvenlidir.\n    this.setState((prevState) => ({\n      count: prevState.count + 1\n    }));\n  }\n\n  render() {\n    return (\n      
\n        
Mevcut Say\u0131: {this.state.count}<\/p>\n