Revised

ozcanzaferayan · ozcanzaferayan · commit 1a441c6e92b1 · 2019-02-27T00:21:40.000+03:00
diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
@@ -10,7 +10,7 @@ next: handling-events.html
 
 Bu sayfada, state kavramı ve React bileşlerinin yaşam döngüsü tanıtılacaktır. Bileşen API'si hakkında ayrıntılı bilgi için, [bu dokümana](/docs/react-component.html) bakabilirsiniz.
 
-Önceki bölümlerde bahsettiğimiz](/docs/rendering-elements.html#updating-the-rendered-element), analog saat örneğini ele alalım. [Elemetlerin Render Edilmesi](/docs/rendering-elements.html#rendering-an-element-into-the-dom) bölümünde, kullanıcı arayüzünün yalnızca tek yönlü güncellenmesine yer vermiştik. Bunu `ReactDOM.render()` metodu ile geçekleştirebiliyorduk:
+[Önceki bölümlerde bahsettiğimiz](/docs/rendering-elements.html#updating-the-rendered-element), analog saat örneğini ele alacağız. Hatırlayacağınız gibi, [elemetlerin Render Edilmesi](/docs/rendering-elements.html#rendering-an-element-into-the-dom) bölümünde, kullanıcı arayüzünün yalnızca tek yönlü güncellenmesine yer vermiştik. Bunu `ReactDOM.render()` metodu ile geçekleştirebiliyorduk:
 
 ```js{8-11}
 function tick() {
@@ -31,7 +31,7 @@ setInterval(tick, 1000);
 
 [**CodePen'de deneyin**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
-Bu bölümde ise, `Clock` bileşeninin nasıl tekrar kullanılabilir ve izole hale getireceğimize değineceğiz. Bu bileşen, kendi zamanlayıcısını başlatacak ve her saniye kendisini güncelleyecek. 
+Bu bölümde ise, `Clock` bileşenini nasıl sarmalayacağımıza ve tekrar kullanılabilir hale getireceğimize değineceğiz. Bu bileşen, kendi zamanlayıcısını başlatacak ve her saniye kendisini güncelleyecek. 
 
 Öncelikle Clock'u, ayrı bir bileşen halinde sarmalayarak görüntüleyelim:
 
@@ -57,9 +57,9 @@ setInterval(tick, 1000);
 
 [**CodePen'de deneyin**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
-Güzel görünüyor ancak kritik bir gereksinimi atladık: `Clock` kendi zamanlayıcısını ayarlaması ve her saniye kullanıcı arayüzünü güncellemesi işi Clock bileşeni içerisinde yer almalıydı.
+Güzel görünüyor ancak bu aşamada kritik bir gereksinimi atladık: `Clock`'un kendi zamanlayıcısını ayarlaması, ve her saniye kullanıcı arayüzünü güncellemesi işini kendi bünyesinde gerçekleştirmesi gerekiyordu.
 
-İdeal olarak aşağıdaki kodu bir kere yazdığımızda, `Clock`'un artık kendi kendisini güncellemesini istiyoruz:
+Aşağıdaki kodu bir kere yazdığımızda, `Clock`'un artık kendi kendisini güncellemesini istiyoruz:
 
 ```js{2}
 ReactDOM.render(
@@ -68,15 +68,15 @@ ReactDOM.render(
 );
 ```
 
-Bunu yapmak için, `Clock` bileşenine "state eklememiz gerekiyor.
+Bunu yapmak için, `Clock` bileşenine **state** eklememiz gerekiyor.
 
 State'ler, prop'larla benzerlik gösterir. Fakat sadece ilgili bileşene özeldir ve yalnızca o bileşen tarafından kontrol edilirler.
 
 Sınıf olarak oluşturulan bişeşenlerin, fonksiyon bileşenlerine göre bazı ek özelliklerinin bulunduğundan [bahsetmiştik](/docs/components-and-props.html#functional-and-class-components). Bahsettiğimiz ek özellik yerel state değişkenidir ve sadece sınıf bileşenlerine özgüdür.
 
 ## Bir Fonksiyonun Sınıfa Dönüştürülmesi {#converting-a-function-to-a-class}
 
-`Clock` gibi bir fonksiyon bileşenini aşağıdaki 5 adımda sınıf bileşenine dönüştürebilirsiniz:
+`Clock` gibi bir fonksiyon bileşenini 5 adımda sınıf bileşenine dönüştürebilirsiniz:
 
 1. Öncelikle, fonksiyon ismiyle aynı isimde bir [ES6 sınıfı](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) oluşturun. Ve bu sınıfı `React.Component`'tan türetin.
 
@@ -86,7 +86,7 @@ Sınıf olarak oluşturulan bişeşenlerin, fonksiyon bileşenlerine göre bazı
 
 4. `render()` metodu içerisindeki `props` yazan yerleri, `this.props` ile değiştirin.
 
-5. İçi boşaltılmış fonksiyonu silin.
+5. Son olarak, içi boşaltılmış fonksiyonu tamamen silin.
 
 ```js
 class Clock extends React.Component {
@@ -103,13 +103,13 @@ class Clock extends React.Component {
 
 [**CodePen'de deneyin**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
-Artık `Clock` bileşeni, fonksiyon yerine, bir sınıf bileşeni haline gelmiş oldu.
+Önceden fonksiyon bileşeni olan `Clock`, artık bir sınıf bileşeni haline gelmiş oldu.
 
-`render` metodu her güncelleme olduğunda çağrılacaktır. Fakat `<Clock />`'u aynı DOM düğümünde render ettiğimizden dolayı, `Clock` sınıfının yalnızca bir örneği kullanılacaktır.
+Bu kodda `render` metodumuz, her güncelleme olduğunda yeniden çağrılacaktır. Fakat `<Clock />` bileşenini aynı DOM düğümünde render ettiğimizden dolayı, `Clock` sınıfının yalnızca bir örneği kullanılacaktır.
 
 ## Bir Sınıfa Yerel State'in Eklenmesi {#adding-local-state-to-a-class}
 
-`date` değişkenini, props'tan state'e 3 adımda taşıyacağız:
+`date` değişkenini, props'tan state'e taşımamız gerekiyor. Bunu 3 adımda gerçekleştirebiliriz:
 
 1) `render()` metodundaki `this.props.date`'i `this.state.date` ile değiştirelim:
 
@@ -126,7 +126,7 @@ class Clock extends React.Component {
 }
 ```
 
-2) `state`'in ilk oluşturulacağı yer olan [sınıf constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor)'ını ekleyelim:
+2) `state`'in ilk kez oluşturulacağı yer olan [sınıf constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor)'ını ekleyelim:
 
 ```js{4}
 class Clock extends React.Component {
@@ -146,7 +146,7 @@ class Clock extends React.Component {
 }
 ```
 
-`props`'ı constructor içerisinde nasıl oluşturduğumuza dikkat edin:
+`props`'ı, constructor içerisinde nasıl oluşturduğumuza yakından bakalım:
 
 ```js{2}
   constructor(props) {
@@ -197,11 +197,11 @@ ReactDOM.render(
 
 ## Bir Sınıfın Yaşam Döngüsü Kodlarının Eklenmesi {#adding-lifecycle-methods-to-a-class}
 
-Birçok bileşene sahip uygulamalarda, bileşenler yok edildiğinde ilgili kaynakların boşaltılması çok önemlidir.
+Birçok bileşene sahip uygulamalarda, bileşenler yok edildiğinde ilgili kaynakların bırakılması çok önemlidir.
 
 `Clock` bileşeni ilk kez DOM'a render edildiğinde bir [zamanlayıcı](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) kurmak istiyoruz. React'te bu olaya "mounting" (değişkenin takılması) adı verilir.
 
-Ayrıca, `Clock` bileşeni DOM'dan çıkarıldığında silindiğinde zamanlayıcının da [temizlenmesini](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) istiyoruz. React'te bu olaya "unmounting" (değişkenin çıkarılması) adı verilir.
+Ayrıca, `Clock` bileşeni DOM'dan çıkarıldığında, zamanlayıcının da [temizlenmesini](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) istiyoruz. React'te bu olaya "unmounting" (değişkenin çıkarılması) adı verilir.
 
 `Clock` bileşeni takılıp çıkarıldığında bazı işleri gerçekleştirebilmek için özel metodlar tanımlayabiliriz:
 
@@ -244,9 +244,9 @@ Bileşenin çıktısı, DOM'a render edildikten sonra `componentDidMount()` meto
   }
 ```
 
-`this`'e zamanlayıcı ID'sini nasıl atadığımızı görebilirsiniz.
+`this`'e zamanlayıcı ID'sini nasıl atadığımızı inceleyebilirsiniz.
 
-Daha önce de belirttiğimiz gibi, `this.props` React tarafından yönetiliyor, ve `this.state`'in de özel bir yaşam döngüsü mevcut. Eğer `timerID` gibi veri akışına dahil olmayan değişkenleri saklamanız gerekiyorsa, bu örnekte yaptığımız gibi sınıf içerisinde değişkenler ekleyebilirsiniz.
+Daha önce de belirttiğimiz gibi, `this.props` React tarafından yönetiliyor, ve `this.state`'in de özel bir yaşam döngüsü var. Eğer `timerID` gibi veri akışına dahil olmayan değişkenleri saklamanız gerekiyorsa, bu örnekte yaptığımız gibi sınıf içerisinde değişkenler tanımlayabilirsiniz.
 
 Oluşturduğumuz zamanlayıcıyı `componentWillUnmount()` yaşam döngüsü metodu içerisinde `Clock` bileşeninden söküp çıkaralım:
 
@@ -256,7 +256,7 @@ Oluşturduğumuz zamanlayıcıyı `componentWillUnmount()` yaşam döngüsü met
   }
 ```
 
-Son olarak, `Clock` bileşeninin saniyede bir çalıştıracağı `tick()` fonksiyonunu implement edelim.
+Son olarak, `Clock` bileşeninin saniyede bir çalıştıracağı `tick()` fonksiyonunu kodlayalım.
 
 `tick()` fonksiyonu, `this.setState()`'i çağırarak `Clock` bileşeninin yerel state'ini güncelleyecektir:
 
@@ -306,23 +306,23 @@ Artık saat, her saniye başı tikleyerek mevcut zamanı görüntüleyecektir.
 
 Şimdi kısa bir özet geçerek neler yaptığımızı ve sırasıyla hangi metotların çağrıldığını kontrol edelim:
 
-1) `ReactDOM.render()` metoduna `<Clock />` aktarıldığı zaman React, `Clock` bileşeninin constructor'ını çağırır. `Clock` bileşeni, mevcut saati görüntülemesi gerektiğinden dolayı, `this.state`'e o anki zamanı atar. Daha sonra bu state'i güncelleyeceğiz.
+1) `ReactDOM.render()` metoduna `<Clock />` aktarıldığı zaman React, `Clock` bileşeninin constructor'ını çağırır. `Clock` bileşeni, mevcut saati görüntülemesi gerektiğinden dolayı, `this.state`'e o anki zamanı atar. Daha sonra bu state güncellenecektir.
 
-2) Daha sonra React, `Clock` bileşeninin `render()` metodunu çağırır. Bu sayede React, ekranda nelerin gösterilmesi gerektiğini bilir. Sonrasında React, `Clock`'un render edilmiş çıktısı ile eşleşmek için ilgili DOM güncellemelerini gerçekleştirir.
+2) Devamında React, `Clock` bileşeninin `render()` metodunu çağırır. Bu sayede React, ekranda nelerin gösterilmesi gerektiğini bilir. Sonrasında ise `Clock`'un render edilmiş çıktısı ile eşleşmek için ilgili DOM güncellemelerini gerçekleştirir.
 
-3) `Clock` bileşeninin çıktısı DOM'a eklendiğinde React, `componentDidMount()` yaşam döngüsü metodunu çağırır. Bu metodda `Clock` bileşeni, her saniyede bir `tick()` metodunun çalıştırılması gerektiğini tarayıcıya bildirir.
+3) `Clock` bileşeninin çıktısı DOM'a eklendiğinde, yaşam döngüsündeki `componentDidMount()` metodu çağrılır. Bu metodda `Clock` bileşeni, her saniyede bir `tick()` metodunun çalıştırılması gerektiğini tarayıcıya bildirir.
 
 4) Tarayıcı her saniyede bir `tick()` metodunu çağırır. `tick()` metodunda `Clock` bileşeni, kullanıcı arayüzünü güncellemek için `setState()` metodunu çağırır ve bu metoda mevcut tarih/saat değerini aktarır. `setState()`'in çağrılması sayesinde React, state'in değiştiğini anlar ve ekranda neyin görüntüleneceğini anlamak için tekrar `render()` metodunu çağırır. Artık `render()` metodundaki `this.state.date`'in değeri eski halinden farklı olduğundan dolayı, render çıktısı güncellenmiş zamanı içerecek demektir. Buna göre React, DOM'u ilgili şekilde günceller.
 
-5) Eğer `Clock` bileşeni, DOM'dan çıkarılırsa React, `componentWillUnmount()` yaşam döngüsü metodunu çağırır ve zamanlayıcı, tarayıcı tarafından durdurulmuş olur.
+5) Eğer `Clock` bileşeni, DOM'dan çıkarılırsa, yaşam döngüsündeki `componentWillUnmount()` metodu çağrılır ve tarayıcı tarafından zamanlayıcı durdurulmuş olur.
 
 ## State'in Doğru Kullanımı {#using-state-correctly}
 
 `setState()` hakkında bilmeniz gereken 3 şey bulunmaktadır.
 
 ### State'i Direkt Olarak Değiştirmeyiniz {#do-not-modify-state-directly}
 
-Aşağıdaki kod, bileşenin tekrar render edilmemesine neden olur:
+Aşağıdaki kod, bileşenin yeniden render edilmesini **gerçekleştirmez**:
 
 ```js
 // Yanlış kullanım
@@ -342,7 +342,7 @@ this.setState({comment: 'Hello'});
 
 React, çoklu `setState()` çağrılarını, performans için tekil bir güncellemeye dönüştürebilir.
 
-`this.props` ve `this.state` asenkron olarak güncellenebildiklerinden dolayı, sonraki state'i hesaplarken bu nesnelerin değerlerine **güvenmemelisiniz**.
+`this.props` ve `this.state`, asenkron olarak güncellenebildiklerinden dolayı, sonraki state'i hesaplarken bu nesnelerin mevcut değerlerine **güvenmemelisiniz**.
 
 Örneğin, aşağıdaki kod `counter`'ı güncellemeyebilir:
 
@@ -353,7 +353,7 @@ this.setState({
 });
 ```
 
-Bunu düzeltmek için, `setState()`'in ikinci formunu kullanmamız gerekiyor. Bu formda  `setState()` fonksiyonu, parametre olarak nesne yerine fonksiyon alıyor. Bu fonksiyon, ilk parametre olarak önceki state'i, ikinci parametre olarak da o anda güncellenen props değerini alıyor:
+Bunu düzeltmek için, `setState()`'in ikinci formunu kullanmamız gerekir. Bu formda  `setState()` fonksiyonu, parametre olarak nesne yerine fonksiyon alır. Bu fonksiyon, ilk parametre olarak önceki state'i, ikinci parametre olarak da o anda güncellenen props değerini alır:
 
 ```js
 // Doğru kullanım
@@ -375,9 +375,9 @@ this.setState(function(state, props) {
 
 ### State Güncellemeleri Birleştirilir {#state-updates-are-merged}
 
-`setState()`'i çağırdığınızda React, parametre olarak verdiğiniz nesneyi alıp, mevcut state'e birleştirir.
+React, `setState()`'i çağırdığınızda, parametre olarak verdiğiniz nesneyi alıp mevcut state'e aktarır.
 
-Örneğin, state'iniz birçok bağımsız değişken içerebilir:
+Örneğin, state'iniz aşağıdaki gibi birçok bağımsız değişkeni içerebilir:
 
 ```js{4,5}
   constructor(props) {
@@ -389,7 +389,7 @@ this.setState(function(state, props) {
   }
 ```
 
-Ve siz de bu değişkenleri `setState()` çağrıları ile güncellemek isteyebilirsiniz:
+Ve siz de bu değişkenleri, ayrı birer `setState()` çağrıları ile güncellemek isteyebilirsiniz:
 
 ```js{4,10}
   componentDidMount() {
@@ -407,13 +407,13 @@ Ve siz de bu değişkenleri `setState()` çağrıları ile güncellemek isteyebi
   }
 ```
 
-Birleşme işlemi yüzeysel olduğundan dolayı, `this.setState({comments})` çağrısı `this.state.posts` değişkenini değişmeden bırakırken, `this.state.comments`'i tamamıyla değiştirir.
+Birleşme işlemi yüzeysel olduğundan dolayı, `this.setState({comments})` çağrısı `this.state.posts` değişkenini değişmeden bırakırken, `this.state.comments`'i tamamıyla değiştirecektir.
 
 ## Verinin Alt Bileşenlere Aktarılması {#the-data-flows-down}
 
-Ne ebeveyn ne de alt bileşenler, belirli bir bileşenin durumlu (stateful) veya durumsuz (stateless) olduğunu bilemez. Ayrıca o bileşenin fonksiyon veya sınıf olarak tanımlanmasını da önemsemezler.
+Ne üst, ne de alt bileşenler, belirli bir bileşenin state'li veya state'siz olduğunu bilemez. Ayrıca o bileşenin fonksiyon veya sınıf olarak tanımlanmasını da önemsemezler.
 
-Bu nedenle state'e yerel state veya izole state denir. State, kendisine sahip olan ve kendisini ayarlayan bileşen haricinde hiçbir bileşen için erişilebilir değildir.
+Bu nedenle state'e, **yerel state** denir. State, kendisine sahip olan ve kendisini ayarlayan bileşen haricinde hiçbir bileşen için erişilebilir değildir.
 
 Bir bileşen kendi state'ini, prop'lar aracılığıyla alt bileşenlere aktarabilir:
 
@@ -427,7 +427,7 @@ Kullanıcı tanımlı bileşenler için de bu durum geçerlidir:
 <FormattedDate date={this.state.date} />
 ```
 
-`FormattedDate` bileşeni, `date` değişkenini props'tan alabilir. Ve bunu alırken `Clock`'un state'inden mi yoksa prop'undan mı geldiğini bilemez. Hatta `date` değişkeni, `Clock` bileşenine elle yazılmış bir değer de olabilir ve bunu bilmesine imkanı yoktur:
+`FormattedDate` bileşeni, `date` değişkenini props'tan alabilir. Ve bunu alırken `Clock`'un state'inden mi yoksa prop'undan mı geldiğini bilemez. Hatta `date` değişkeni, `Clock` bileşeni içerisinde state'ten harici olarak tanımlanmış bir değer de olabilir ve bunu da bilmesine imkanı yoktur:
 
 ```js
 function FormattedDate(props) {
