Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Translate Hook State page #107

Merged
merged 5 commits into from
Apr 14, 2019
Merged

Translate Hook State page #107

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3e42dfc
Translate Hook State page
hakanbakacak Apr 10, 2019
51f96ec
resolve some mistakes
hakanbakacak Apr 10, 2019
a9b913c
Update hook-state.md
hakanbakacak Apr 10, 2019
708eb5e
Update hook-state.md
hakanbakacak Apr 11, 2019
7e49ab8
Update hooks-state.md
hakanbakacak Apr 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions content/docs/hooks-state.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ prev: hooks-overview.html
import React, { useState } from 'react';

function Example() {
// count adında yeni bir state değişkeni tanımlayın.
// "count" adında yeni bir state değişkeni tanımlayın.
const [count, setCount] = useState(0);

return (
Expand All @@ -28,7 +28,7 @@ function Example() {
}
```

Bu kodu, eşdeğeri olan sınıf koduyla karşılaştırarak Hook'lari öğrenmeye başlayacağız.
Bu kodu, eşdeğeri olan sınıf koduyla karşılaştırarak Hook'ları öğrenmeye başlayacağız.

## Eşdeğer Sınıf Örneği {#equivalent-class-example}

Expand Down Expand Up @@ -61,7 +61,7 @@ State `{ count: 0 }` olarak başlar ve kullanıcı her tıkladığında `this.se

>Not
>
>Neden daha gerçekçi bir örnek yerine sayaç kullandığımızı merak ediyor olabilirsiniz. Bu, Hook'lar ile ilk adımlarınızı atarken API'ye odaklanmanıza yardımcı olacaktır.
>Neden daha gerçekçi bir örnek yerine sayaç kullandığımızı merak ediyor olabilirsiniz. Bu, Hook'lar ile ilk adımlarınızı atarken API'a odaklanmanıza yardımcı olacaktır.

## Hook'lar ve Fonksiyon Bileşenleri {#hooks-and-function-components}

Expand All @@ -83,7 +83,7 @@ function Example(props) {
}
```

Yukarıdakileri "durumsuz(stateless) bileşenler" olarak biliyor olabilirsiniz. Şimdi bunlarla React state kullanma özelliğini getiriyoruz; bu yüzden bunlara "fonksiyon bileşenleri" demeyi tercih ediyoruz.
Yukarıdakileri "durumsuz (stateless) bileşenler" olarak biliyor olabilirsiniz. Şimdi bu bileşenlere React state'ini kullanma özelliğini getiriyoruz; bu yüzden bunlara "fonksiyon bileşenleri" demeyi tercih ediyoruz.

Hook'lar sınıfların içinde **çalışmazlar** fakat onları sınıf yazmadan da kullanabilirsiniz.

Expand All @@ -102,17 +102,17 @@ function Example() {
**Hook Nedir?** Hook, React özelliklerini "bağlamanıza" izin veren özel bir fonksiyondur. Örneğin `useState`, React state'ini fonksiyon bileşenlerine eklemenize izin veren bir Hook'tur. Yakında diğer Hook'ları da öğreneceğiz.


**Ne zaman bir Hook kullanmalıyım?** Eğer bir fonksiyon bileşeni yazarsanız ve ona biraz state eklemeniz gerektiğini farkederseniz, bundan önce o fonksiyonu bir sinifa (class) dönüştürmeniz gerekiyordu. Fakat şimdi, varolan fonksiyon bileşenlerinin içinde Hook kullanabilirsiniz. Şimdi tam olarak da bunu yapacağız!
**Ne zaman bir Hook kullanmalıyım?** Eğer bir fonksiyon bileşeni yazarsanız ve ona biraz state eklemeniz gerektiğini farkederseniz, bundan önce o fonksiyonu bir sınıfa (class) dönüştürmeniz gerekiyordu. Fakat şimdi, varolan fonksiyon bileşenlerinin içinde Hook kullanabilirsiniz. Şimdi tam olarak bunu yapacağız!


>Not:
>
>Hook'ları bileşenlerin içinde kullanıp kullanamayacağımız hakkında birkaç özel kural vardır. Bunları [Hook Kuralları](/docs/hooks-rules.html) burada öğreneceğiz.
>Hook'ları bileşenlerin içinde kullanıp kullanamayacağımız hakkında birkaç özel kural vardır. Bunları [Hook Kuralları](/docs/hooks-rules.html) sayfasında öğreneceğiz.


## Bir State Değişkeni Tanımlamak {#declaring-a-state-variable}

sınıfın içinde `count` state'ini constructor (yapıcı fonksiyon) içinde `this.state`'i `{ count: 0 }`'a eşitleyerek `0` olarak başlatıyoruz.
Bir sınıfın içinde `count` state'ini constructor (yapıcı fonksiyon) içinde `this.state`'i `{ count: 0 }`'a eşitleyerek `0` olarak başlatıyoruz.

```js{4-6}
class Example extends React.Component {
Expand All @@ -124,41 +124,41 @@ class Example extends React.Component {
}
```

fonksiyon bileşenlerinde `this` yoktur bu yüzden `this.state` değer ataması veya okuma yapamıyoruz. Bunun yerine bileşenimizin içinde direkt olarak `useState` hook'unu çağırıyoruz.
fonksiyon bileşenlerinde `this` yoktur bu yüzden `this.state`'e değer ataması veya okuma yapamıyoruz. Bunun yerine bileşenimizin içinde direkt olarak `useState` hook'unu çağırıyoruz.
hakanbakacak marked this conversation as resolved.
Show resolved Hide resolved

```js{4,5}
import React, { useState } from 'react';

function Example() {
// "count" adında yeni bir state değişkeni tanımlıyoruz.
// "count" adında yeni bir state değişkeni tanımlayın.
const [count, setCount] = useState(0);
```

**`useState`'i çağırmak ne işe yarar?** Bu yeni bir "state değişkeni" tanımlar. Değişkenimizin adı `count` fakat farklı bir şekilde çağırabiliriz örneğin `banana`. Bu yöntemle fonksiyon çağrıları arasında verilerinizi koruyabilirsiniz. — `useState` ise `this.state`'in sınıfta sağladığı özellikleri kullanmanın yeni bir yoludur. Normalde değikenler fonksiyon bitiminde kaybolur fakat state değişkenleri React tarafından korunur.
**`useState`'i çağırmak ne işe yarar?** Bu yeni bir "state değişkeni" tanımlar. Değişkenimizin adı `count` fakat farklı bir şekilde( örneğin `banana`) çağırabilirdik. Bu yöntemle fonksiyon çağrıları arasında verilerinizi koruyabilirsiniz. — `useState` ise `this.state`'in sınıfta sağladığı özellikleri kullanmanın yeni bir yoludur. Normalde değişkenler fonksiyon bitiminde kaybolur fakat state değişkenleri React tarafından korunur.

**`useState`'e argüman olarak ne atarız?** `useState()` Hook için tek argüman initial (başlangıç) state argümanıdır. Sınıfların aksine, state, nesneye sahip olmak zorunda değildir. Sayı ya da string tutabiliriz. Örneğimizde kullanıcının tıklama sayısı için bir sayı istedik bu yüzden değişkenimizin başlangıç değeri `0` olarak atandı. (eğer state'in içinde iki farklı tutmak isteseydik, `useState()`'i iki kere çağırmamız gerekecekti.)
**`useState`'e argüman olarak ne atarız?** `useState()` Hook'u için tek argüman initial (başlangıç) state argümanıdır. Sınıfların aksine, state bir nesne olmak zorunda değildir. Sayı ya da string tutabiliriz. Örneğimizde kullanıcının tıklama sayısı için bir sayı istedik bu yüzden değişkenimizin başlangıç değeri `0` olarak atandı. (eğer state'in içinde iki farklı değer tutmak isteseydik, `useState()`'i iki kere çağırmamız gerekecekti.)

**`useState` geriye ne döndürür?** `useState` geriye iki tane değer döndürür: şimdiki state ve güncelleyen fonksiyon. Bu, `const [count, setCount] = useState()` yazmamızın sebebidir. Bu, bir sınıftaki `this.state.count` ve `this.setState`'e benzer. Eğer bizim kullandığımız söz dizimi size tanıdık değilse, bunun için geri döneceğiz. [bu sayfanın alt kısmında](/docs/hooks-state.html#tip-what-do-square-brackets-mean).
**`useState` geriye ne döndürür?** `useState` geriye iki tane değer döndürür: şimdiki state ve o state'i güncelleyen fonksiyon. Bu, `const [count, setCount] = useState()` yazmamızın sebebidir. Bu, bir sınıftaki `this.state.count` ve `this.setState`'e benzer. Eğer bizim kullandığımız söz dizimi size tanıdık gelmediyse, [bu sayfanın alt kısmında](/docs/hooks-state.html#tip-what-do-square-brackets-mean) bu konuya tekrar döneceğiz.

Şimdi `useState` Hook'un ne olduğunu biliyoruz, örneğimiz daha anlamlı olacak.
Şimdi `useState` Hook'unun ne yaptığını bildiğimize göre, örneğimiz daha mantıklı bir hale gelecektir.

```js{4,5}
import React, { useState } from 'react';

function Example() {
// "count" adında yeni bir state değişkeni tanımlıyoruz.
// "count" adında yeni bir state değişkeni tanımlayın.
const [count, setCount] = useState(0);
```


`count` adında state değişkeni tanımladık ve `0`'a eşitledik. React, yeniden render edilenler arasındaki mevcut değerini hatırlayacak ve fonksiyonumuza en yeni değeri verecektir. Eğer şuanki `count` değerini değiştirmek isterseniz `setCount` çağırabilirsiniz.
`count` adında bir state değişkeni tanımladık ve `0`'a eşitledik. React, tekrar eden render işlemleri arasında değişkenin mevcut değerini hatırlayacak ve fonksiyonumuza en yeni değeri verecektir. Eğer şu anki `count` değerini değiştirmek isterseniz `setCount` çağırabilirsiniz.


>Not
>
>`useState` 'in isminin neden `createState` olmadığını merak ediyor olabilirsiniz.
>
>"Create" oldukça doğru olmazdı çünkü state, sadece ilk kez bileşenimizi render ettiğimizde oluşturulur. Sonraki renderlarda `useState` bize o anki state'i verir. Aksi takdirde bu "state" olmazdı. Aynı zamanda hook'ların isimlerinin neden *hep* `use` ile başlamasının nedeni de var. Bunu daha sonra [Rules of Hooks](/docs/hooks-rules.html) bölümünde öğreneceğiz.
>"Create" tam olarak doğru olmazdı. Çünkü state; sadece bileşenimizi ilk kez render ettiğimizde oluşturulur. Sonraki renderlarda `useState` bize o anki state'i verir. Aksi takdirde bu "state" olmazdı. Aynı zamanda hook'ların isimlerinin neden *hep* `use` ile başlamasının nedeni de var. Bunu daha sonra [Rules of Hooks](/docs/hooks-rules.html) bölümünde öğreneceğiz.

## State Okuma {#reading-state}

Expand Down Expand Up @@ -195,7 +195,7 @@ Fonksiyonda zaten değişken olarak `setCount` ve `count`'a sahibiz, bu yüzden

## Özet {#recap}

Hadi şimdi **öğrendiklerimize göz atalım**
Hadi şimdi **Şimdi de baştan sona öğrendiklerimizin üzerinden geçelim ve anlayıp anlamadığımızı kontrol edelim.**

<!--
I'm not proud of this line markup. Please somebody fix this.
Expand All @@ -218,8 +218,8 @@ Hadi şimdi **öğrendiklerimize göz atalım**
14: }
```

* **Satır 1:** React'dan `useState` Hook'u ekliyoruz. Bu, yerel state'i fonksiyon bileşeninde tutmamıza izin verecek.
* **Satır 4:** `Example` bileşeninin içinde `useState` Hook'u çağırarak yeni bir state değişkeni tanımlıyoruz. Bu, isimlerini bizim verdiğimiz bir çift değer döndürür. Değişkenimizin adı `count` çünkü tıklama sayısını tutuyor.`useState`e `0` yollayarak `count`'u `0`sıfırdan başlatıyoruz. İkinci döndürülen değerin kendisi bir fonksiyondur. Bu, bize `count`'u güncellemek için izin verir. Bu yüzden onu `setCount` diye isimlendirdik.
* **Satır 1:** React'ten `useState` Hook'unu ekliyoruz. Bu, yerel state'i fonksiyon bileşeninde tutmamıza izin verecek.
* **Satır 4:** `Example` bileşeninin içinde `useState` Hook'unu çağırarak yeni bir state değişkeni tanımlıyoruz. Bu, isimlerini bizim verdiğimiz bir çift değer döndürür. Değişkenimizin adı `count` çünkü tıklama sayısını tutuyor.`useState`e `0` yollayarak `count`'u `0`sıfırdan başlatıyoruz. İkinci döndürülen değerin kendisi bir fonksiyondur. Bu, bize `count`'u güncellemek için izin verir. Bu yüzden onu `setCount` diye isimlendirdik.
* **Satır 9:** Kullanıcı her tıkladığında, `setCount`'u yeni bir değerle çağırırız. React, `Example` bileşenini tekrar render edip, ona yeni `count` değerini atar.

İlk bakışta öğrenecek çok fazla şey varmış gibi görünebilir. Acele etmeyin! Açıklamalar arasında kaybolduysanız, yukarıdaki koda tekrar bakın ve baştan sona tekrar okumaya çalışın. State'in sınıflarda nasıl çalıştığını unutup bu koda meraklı gözlerle tekrar baktığınızda, söz veriyoruz, daha anlamlı gelecek.
Expand All @@ -233,13 +233,13 @@ State değişkenlerini tanımlarken köşeli parantezleri fark etmiş olabilirsi
const [count, setCount] = useState(0);
```

Soldaki isimler React API'inin bir parçası değildir.. State değişkeninizi isimlendirebilirsiniz:
Soldaki isimler React API'inin bir parçası değildir. State değişkeninizi isimlendirebilirsiniz:

```js
const [fruit, setFruit] = useState('banana');
```

Bu JavaScript sözdizimi ["array destructuring"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) olarak adlandırılır.`fruit` ve `setFruit` diye iki yeni değişken oluşturduğumuz anlamına gelir.Burada `fruit` ve `useState` döndürür ve `setFruit` tarafından dönen ilk değere; `setFruit` ise ikinci değere atanır bu kod eşdeğerdir.
Bu JavaScript sözdizimi ["array destructuring"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) olarak adlandırılır.`fruit` ve `setFruit` diye iki yeni değişken oluşturduğumuz anlamına gelir.Burada `fruit`, `useState` tarafından dönen ilk değere; `setFruit` ise ikinci değere atanır bu kod ile eşdeğerdir.


```js
Expand All @@ -252,11 +252,11 @@ Bu JavaScript sözdizimi ["array destructuring"](https://developer.mozilla.org/e

>Not
>
>this gibi bir şey iletmediğimiz için, React'in useState'in hangi bileşene denk geldiğini nasıl bildiğini merak ediyor olabilirsiniz. Bu soruyu ve bunun gibi daha bir coğunu S.S.S. kısmında cevaplıyoruz.
>this gibi bir şey iletmediğimiz için, React'in useState'in hangi bileşene denk geldiğini nasıl bildiğini merak ediyor olabilirsiniz. [Bu soruyu](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components) ve bunun gibi daha bir coğunu S.S.S. kısmında cevaplıyoruz.

### İpucu: Çoklu State Değişkeni Kullanımı {#tip-using-multiple-state-variables}

Ayrıca; birden fazla state kullanmak istediğimiz durumlarda, farklı state değişkenlerine farklı adlar vermemize izin verdiği için, state değişkenlerini bir çift olarak ([something, setSomething]) tanımlamak kullanışlıdır.
Ayrıca; birden fazla state kullanmak istediğimiz durumlarda, farklı state değişkenlerine farklı adlar vermemize izin verdiği için, state değişkenlerini bir çift olarak `([something, setSomething])` tanımlamak kullanışlıdır.

```js
function ExampleWithManyStates() {
Expand All @@ -275,16 +275,16 @@ Yukarıdaki bileşende, `age`, `fruit` ve `todos` adında yerel değişkenlerimi
}
```

birden fazla state değişkeni **kullanmak zorunda değilsiniz**. State değişkenleri, nesneleri ve dizileri gayet güzel bir şekilde tutabilir; böylece ilgili verileri birlikte tutabilirsiniz fakat sınıftaki `this.setState`'ın aksine state değişkenini güncellemek, birleştirmek(merge) yerine *değiştirir*.
birden fazla state değişkeni **kullanmak zorunda değilsiniz**. State değişkenleri, nesneleri ve dizileri gayet güzel bir şekilde tutabilir; böylece ilgili verileri birlikte tutabilirsiniz fakat sınıftaki `this.setState`'ın aksine state değişkenini güncellemek, birleştirmek (merge) yerine var olan ile *değiştirir*.

Bağımsız değişkenleri bölme konusunda daha çok fazla öneriye [bu bölümden](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables)ulaşabilirsiniz.
Bağımsız state değişkenlerini ayırma konusunda daha fazla öneriye [bu bölümden](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables) ulaşabilirsiniz.


## Sonraki Adımlar {#next-steps}

Bu sayfada React tarafından sağlanan Hook'lardan birini, `useState`'i, öğrendik.Bazen bundan "State Hook'u" olarak da bahsedecegiz. Bu, ilk kez yapmış olduğumuz, React'in fonksiyon bileşenlerine yerel state eklememize imkân sağlıyor.
Bu sayfada React tarafından sağlanan Hook'lardan birini, `useState`'i, öğrendik.Bazen bundan "State Hook" olarak da bahsedecegiz. Bu, ilk kez yapmış olduğumuz, React'in fonksiyon bileşenlerine yerel state eklememize imkân sağlıyor.

Aynı zamanda Hook'lar hakkında bir şeyler öğrendik. Hooklar, React özelliklerini fonksiyon bileşenlerine bağlamamızı sağlayan fonksiyonlardir. İsimleri her zaman use ile başlar ve henüz öğrenmediğimiz Hook'lar vardır.
Aynı zamanda Hook'lar hakkında bir şeyler öğrendik. Hooklar, React özelliklerini fonksiyon bileşenlerine bağlamamızı sağlayan fonksiyonlardir. İsimleri her zaman `use` ile başlar ve henüz öğrenmediğimiz Hook'lar vardır.


**Hadi şimdi bir sonraki hook olarak [useEffect'i öğrenerek : `useEffect`.](/docs/hooks-effect.html) devam edelim.** useEffect, bileşenler üzerinde yan etkiler gerçekleştirmenize izin verir ve sınıflardaki yaşam döngüsü (lifecycle) metotlarına benzer.
**Hadi şimdi bir sonraki hook olarak [`useEffect` öğrenerek](/docs/hooks-effect.html) devam edelim.** useEffect, bileşenler üzerinde yan etkiler gerçekleştirmenize izin verir ve sınıflardaki yaşam döngüsü (lifecycle) metotlarına benzer.