Skip to content

Commit 38d7771

Browse files
authored
fix typos and translation inconsistencies in thinking-in-react
- fix typos: "Uygulumanız", "uyguamanızdaki", "desteklenmeniz gerekemktedir" - translate Step 3, 4, 5 headings to "Adım" - replace "model" with "tasarım taslağı" where used as mockup (3 places) - replace "onChange handler" with "onChange işleyicisi" (2 places) - remove duplicate "(one-way data flow)" reference in Step 4
1 parent a694e37 commit 38d7771

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

src/content/learn/thinking-in-react.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ React baktığınız tasarımlar ve oluşturduğunuz uygulamalar hakkında düş
1010

1111
## Bir Örnekle Başlayın {/*start-with-the-mockup*/}
1212

13-
Öncelikle, bir JSON API'mızın ve tasarımcımızdan gelen bir modelimizin olduğunu hayal edin.
13+
Öncelikle, bir JSON API'mızın ve tasarımcımızdan gelen bir tasarım taslağımızın olduğunu hayal edin.
1414

1515
JSON API şöyle bir veri döndürüyor:
1616

@@ -25,7 +25,7 @@ JSON API şöyle bir veri döndürüyor:
2525
]
2626
```
2727

28-
Tasarımımız da şöyle:
28+
Tasarım taslağımız da şöyle:
2929

3030
<img src="/images/docs/s_thinking-in-react_ui.png" width="300" style={{margin: '0 auto'}} />
3131

@@ -62,7 +62,7 @@ Bu ekranın beş bileşeni var:
6262

6363
`ProductTable` (lavanta) öğesine bakarsanız, tablo başlığının ("İsim" ve "Fiyat" etiketlerini içeren kısım) kendi bileşeni olmadığını görürsünüz. Bu bir tercih meselesidir ve her iki şekilde de yapılabilir. Bu örnekte, başlık kısmı `ProductTable`'ın bir parçasıdır, çünkü `ProductTable` listesinin içinde görünüyor. Ancak, bu başlık kısmı karmaşık hale gelirse (örneğin, sıralama özelliği eklerseniz), onu kendi `ProductTableHeader` bileşenine taşıyabilirsiniz.
6464

65-
Tasarım modelinizdeki bileşenleri tanımladığınıza göre, bunları bir hiyerarşi içinde düzenleyin. Modelde başka bir bileşen içinde görünen bileşenler, hiyerarşide bir alt öğe olarak görünmelidir:
65+
Tasarım taslağınızdaki bileşenleri tanımladığınıza göre, bunları bir hiyerarşi içinde düzenleyin. Tasarım taslağında başka bir bileşen içinde görünen bileşenler, hiyerarşide bir alt öğe olarak görünmelidir:
6666

6767
* `FilterableProductTable`
6868
* `SearchBar`
@@ -204,7 +204,7 @@ Bu noktada, herhangi bir state değeri kullanmamalısınız. Onun için bir sonr
204204

205205
</Pitfall>
206206

207-
## Step 3: Arayüzün minimal (ancak eksiksiz) halini belirleme {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/}
207+
## Adım 3: Arayüzün minimal (ancak eksiksiz) halini belirleme {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/}
208208

209209
Kullanıcı arayüzünüzü etkileşimli hale getirmek için, kullanıcılarınızın temel veri modelinizi değiştirmesine izin vermeniz gerekir. Bunun için *state* kullanacaksınız.
210210

@@ -247,11 +247,11 @@ Prop'lar ve state farklıdır, ancak birlikte çalışırlar. Bir üst bileşen
247247

248248
</DeepDive>
249249

250-
## Step 4: State’inizin barınacağı yeri belirleyin {/*step-4-identify-where-your-state-should-live*/}
250+
## Adım 4: State’inizin barınacağı yeri belirleyin {/*step-4-identify-where-your-state-should-live*/}
251251

252252
Uygulamanızın minimum state verisini belirledikten sonra, bu state'i değiştirmekten sorumlu olan veya state'e *sahip olan* bileşeni belirlemeniz gerekir. Unutmayın: React, veriyi yukarıdan aşağıya doğru tek yönlü olarak (one-way data flow) aktarır. Bu yüzden, hangi bileşenin hangi state'i sahipleneceği hemen net olmayabilir. Bu konseptle yeni tanışıyorsanız bu zor olabilir, ancak aşağıdaki adımları takip ederek çözebilirsiniz!
253253

254-
Uyguamanızdaki her state parçası için:
254+
Uygulamanızdaki her state parçası için:
255255

256256
1. State'e bağlı olarak bir şeyler render eden *her* bileşeni belirleyin.
257257
2. O bileşenlere en yakın ortak üst bileşeni bulun (Hiyerarşide hepsinin üstünde olan bir bileşen).
@@ -446,7 +446,7 @@ You provided a \`value\` prop to a form field without an \`onChange\` handler. T
446446
447447
<ConsoleBlock level="error">
448448
449-
Bir form alanına \`value\` prop'u verdiniz; ancak bir \`onChange\` handler'ı sağlamadınız. Bu salt-okunur bir form alanı oluşturacaktır.
449+
Bir form alanına \`value\` prop'u verdiniz; ancak bir \`onChange\` işleyicisi sağlamadınız. Bu salt-okunur bir form alanı oluşturacaktır.
450450
451451
</ConsoleBlock>
452452
@@ -466,9 +466,9 @@ function SearchBar({ filterText, inStockOnly }) {
466466
467467
Ancak henüz kullanıcı eylemlerine (yazmak gibi) yanıt vermek için herhangi bir kod eklemediniz. Bu da son adımınız olacak.
468468
469-
## Step 5: Ters veri akışı ekleyin {/*step-5-add-inverse-data-flow*/}
469+
## Adım 5: Ters veri akışı ekleyin {/*step-5-add-inverse-data-flow*/}
470470
471-
Uygulumanız şu anda, prop'lar ve state'in hiyerarşi boyunca aşağı doğru akmasıyla, doğru bir şekilde render ediliyor. Ancak kullanıcı girdisine göre state'i değiştirmek için, ters istikametteki veri akışını da desteklenmeniz gerekemktedir. Hiyerarşinin derinliklerindeki form bileşenlerinin `FilterableProductTable` bileşenindeki state'i güncellemesi gerekecek.
471+
Uygulamanız şu anda, prop'lar ve state'in hiyerarşi boyunca aşağı doğru akmasıyla, doğru bir şekilde render ediliyor. Ancak kullanıcı girdisine göre state'i değiştirmek için, ters istikametteki veri akışını da desteklemeniz gerekecektir. Hiyerarşinin derinliklerindeki form bileşenlerinin `FilterableProductTable` bileşenindeki state'i güncellemesi gerekecek.
472472
473473
React bu veri akışını açıkça yapar, ancak iki-yönlü veri bağlamaya göre biraz daha fazla kod yazmanızı gerektirir. Yukarıdaki örnekte yazı yazmaya veya kutuyu işaretlemeye çalışırsanız, React girdinizi görmezden gelir. Bu kasıtlıdır. `<input value={filterText} />` yazarak, `input`'un `value` prop'unu her zaman `FilterableProductTable`'dan iletilem `filterText` state'ine eşit olarak ayarladınız. `filterText` state'i hiçbir zaman değişmediği için, input hiçbir zaman değişmez.
474474

0 commit comments

Comments
 (0)