Skip to content

Commit facc765

Browse files
committed
fix: requested changes
1 parent a49f1e8 commit facc765

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

src/content/learn/conditional-rendering.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@ title: Koşullu Olarak Render Etmek
44

55
<Intro>
66

7-
React bileşenlerinizde çoğu zaman farklı koşullar altında farklı şeyler render etmek isteyeceksiniz. React'de, `if` ifadesi, `&&`, ve `? :` gibi JavaScript syntax'ine ait operatörleri kullanarak koşullu olarak JSX render edebilirsiniz.
7+
React bileşenlerinizde çoğu zaman farklı koşullar altında farklı şeyler render etmek isteyeceksiniz. React'te, `if` ifadesi, `&&`, ve `? :` gibi JavaScript sözdizimine (syntax) ait operatörleri kullanarak koşullu olarak JSX render edebilirsiniz.
88

99
</Intro>
1010

1111
<YouWillLearn>
1212

1313
* Bir koşula bağlı olarak farklı JSX nasıl döndürülür
1414
* Koşullu olarak bir JSX parçası nasıl dahil edilir veya hariç tutulur
15-
* React kod tabanında karşınıza çıkacak yaygın kullanılan kısayol koşul syntax'leri
15+
* React kod tabanında karşınıza çıkacak yaygın kullanılan kısayol koşul sözdizimleri
1616

1717
</YouWillLearn>
1818

1919
## Koşullu olarak JSX döndürmek {/*conditionally-returning-jsx*/}
2020

21-
Diyelim ki elinizde birden çok `Item` render eden bir `PackingList` bileşeni var, ve `Item`'lar bavula konulup konulmadıklarına göre işaret almışlar:
21+
Diyelim ki elinizde bir `PackingList` bileşeni var. Bu bilesen, bavula konulup konulmadıklarına göre işaretlenebilen, `Item`' bileşeninden birkaç tane render ediyor:
2222

2323
<Sandpack>
2424

@@ -168,7 +168,7 @@ bu iki ifade birbirine çok benzemekte
168168
<li className="item">{name}</li>
169169
```
170170

171-
Her iki koşulda `<li className="item">...</li>` ifadesini döndürmekte:
171+
Her iki koşul da `<li className="item">...</li>` ifadesini döndürmekte:
172172

173173
```js
174174
if (isPacked) {
@@ -181,7 +181,7 @@ Bu tekrarlamalar zararlı olmasa bile yazdığınız kodu idame ettirmek zorlaş
181181
182182
### Koşullu (ternary) operatörü (`? :`) {/*conditional-ternary-operator--*/}
183183
184-
JavaScript, koşullu bir ifade yazmak için kompakt bir syntax'e sahiptir -- [koşullu operatör](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) ya da "ternary operatörü".
184+
JavaScript, koşullu bir ifade yazmak için kompakt bir sözdizimine sahiptir -- [koşullu operatör](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) ya da "ternary operatörü".
185185
186186
Böyle yazmak yerine:
187187
@@ -202,13 +202,13 @@ return (
202202
);
203203
```
204204
205-
Bu kodu şöyle okuyabilirsiniz: *"eğer `isPacked` prop'u true (doğru) ise, o zaman (`?`) `name + ' ✔'` render et, aksi halde (`:`) `name` render et"*.
205+
Bu kodu şöyle okuyabilirsiniz: *"eğer `isPacked` prop'u true (doğru) ise, o zaman (`?`) `name + ' ✔'` render et, aksi halde (`:`) `name` render et"*.
206206
207207
<DeepDive>
208208
209209
#### Bu iki örnek tamamen eşdeğer mi? {/*are-these-two-examples-fully-equivalent*/}
210210
211-
Obje tabanlı bir programlama geçmişiniz varsa, yukarıdaki iki örneğin biraz farklı olduğunu çünkü birinin iki farklı `<li>` kopyası oluşturabileceğini düşünebilirsiniz. Ancak JSX öğeleri herhangi bir dahili state'e sahip olmadıkları ve gerçek DOM node'u olmadıkları için bir "kopya" değildir. JSX öğeleri aynı blueprint'ler (kılavuz) gibi tanımlardır. Yani bu iki örnek birbiriyle **tamamen** aynıdır. [State'i korumak ve sıfırlamak](/learn/preserving-and-resetting-state) bunun nasıl çalıştığını ayrıntılı bir şekilde anlatmaktadır.
211+
Nesne yönelimli programlama geçmişiniz varsa, yukarıdaki iki örneğin biraz farklı olduğunu çünkü birinin iki farklı `<li>` kopyası oluşturabileceğini düşünebilirsiniz. Ancak JSX öğeleri herhangi bir dahili state'e sahip olmadıkları ve gerçek DOM node'u olmadıkları için bir "kopya" değildir. JSX öğeleri aynı blueprint'ler (kılavuz) gibi tanımlardır. Yani bu iki örnek birbiriyle **tamamen** aynıdır. [State'i korumak ve sıfırlamak](/learn/preserving-and-resetting-state) bunun nasıl çalıştığını ayrıntılı bir şekilde anlatmaktadır.
212212
213213
</DeepDive>
214214
@@ -348,7 +348,7 @@ if (isPacked) {
348348
</li>
349349
```
350350

351-
Bu syntax en ayrıntılı ama aynı zamanda en esnek olanıdır. Aşağıda nasıl çalıştığını görebilirsiniz:
351+
Bu yöntem en ayrıntılı ama aynı zamanda en esnek olanıdır. Aşağıda nasıl çalıştığını görebilirsiniz:
352352

353353
<Sandpack>
354354

@@ -436,7 +436,7 @@ export default function PackingList() {
436436

437437
</Sandpack>
438438

439-
Eğer JavaScript diline aşina değilseniz, bu çeşitli syntax'ler ilk başta kafa karıştırıcı olabilir. Ancak bunları öğrenmek, sadece React bileşenleri değil, herhangi bir JavaScript kodunu okumanıza ve yazmanıza yardımcı olacaktır! Başlangıçta tercih ettiğiniz syntax ile devam edin ve diğer syntax'lerin nasıl çalıştığını unuttuğunuzda bu sayfadan örneklere bakabilirsiniz.
439+
Eğer JavaScript diline aşina değilseniz, bu yöntem çeşitliliği ilk başta kafa karıştırıcı olabilir. Ancak bunları öğrenmek, sadece React bileşenleri değil, herhangi bir JavaScript kodunu okumanıza ve yazmanıza yardımcı olacaktır! Başlangıçta tercih ettiğiniz sözdizimi ile devam ederek, diğer sözdizimlerin nasıl çalıştığını unuttuğunuz zaman bu sayfayı referans olarak kullanabilirsiniz.
440440

441441
<Recap>
442442

@@ -453,7 +453,7 @@ Eğer JavaScript diline aşina değilseniz, bu çeşitli syntax'ler ilk başta k
453453

454454
<Challenges>
455455

456-
#### Bavula konmamış eşyalar için `? :` syntax'i kullanarak bir ikon göster {/*show-an-icon-for-incomplete-items-with--*/}
456+
#### Bavula konmamış eşyalar için `? :` sözdizimini kullanarak bir ikon göster {/*show-an-icon-for-incomplete-items-with--*/}
457457

458458
Koşul operatörünü (`cond ? a : b`) kullanarak eğer `isPacked` prop'u `true` (`doğru`) değilse ❌ render et.
459459

@@ -535,7 +535,7 @@ export default function PackingList() {
535535

536536
#### Eşyanın importance (önemini) `&&` operatörü ile göster {/*show-the-item-importance-with-*/}
537537

538-
Bu örnekte, herbir `Item` sayısal bir `importance` prop'u almaktadır. `&&` operatörünü kullanarak "importance" (önem) değeri 0'dan büyük olanların yanında italik olarak "_(Importance: X)_" render edebilirsiniz. Eşyalarınızın listesinin son hali şu şekilde olmalıdır:
538+
Bu örnekte, her bir `Item` sayısal bir `importance` prop'u almaktadır. `&&` operatörünü kullanarak "importance" (önem) değeri 0'dan büyük olanların yanında italik olarak "_(Importance: X)_" render edebilirsiniz. Eşyalarınızın listesinin son hali şu şekilde olmalıdır:
539539

540540
* Space suit _(Importance: 9)_
541541
* Helmet with a golden leaf
@@ -629,7 +629,7 @@ Bu çözümde, eşyanın ismi ve importance (önem) yazısı arasına boşluk ko
629629

630630
</Solution>
631631

632-
#### Bir dizi `? :` operatörünü `if` ifadesi ve değişkenler ile değiştir {/*refactor-a-series-of---to-if-and-variables*/}
632+
#### Bir dizi `? :` sözdizimini `if` ifadesi ve değişkenler ile değiştir {/*refactor-a-series-of---to-if-and-variables*/}
633633

634634
`Drink` bileşeni, `name` prop'unun `"tea"` ya da `"coffee"` olduğuna bağlı olarak farklı bilgiler göstermek için bir dizi ? : koşulunu kullanır. Buradaki sorun her içecek hakkındaki bilgilerin birden fazla koşula bağlı olmasıdır. Bu kodu üç tane `? :` koşulu yerine tek bir `if` ifadesi kullanacak şekilde yeniden düzenleyin.
635635

0 commit comments

Comments
 (0)