fix: some changes

Author: serkanisyapan

src/content/learn/conditional-rendering.md

@@ -4,7 +4,7 @@ title: Koşullu Olarak Render Etmek
 
 <Intro>
 
-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.
+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.
 
 </Intro>
 
@@ -52,7 +52,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-Bazı `Item` bileşenlerinin `isPacked` prop'unun `false` yerine `true` olduğuna dikkat edin. Eğer bileşen prop'u `isPacked={true}` ise eşyaların yanında bir tik (✔) işareti olmalı. 
+Bazı `Item` bileşenlerinin `isPacked` prop'unun `false` (`yanlış`) yerine `true` (`doğru`) olduğuna dikkat edin. Eğer bileşen prop'u `isPacked={true}` ise eşyaların yanında bir tik (✔) işareti olmalı. 
 
 Bunu bir [`if`/`else` ifadesi](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) olarak şöyle yazabilirsiniz:
 
@@ -63,7 +63,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-Eğer `isPacked` prop'u `true` ise, bu kod **farklı bir JSX ağacı döndürür.** Bu değişiklikle birlikte, bazı eşya isimleri yanına tik işareti gelir:
+Eğer `isPacked` prop'u `true` ise, bu kod **farklı bir JSX ağacı döndürür.** Bu değişiklikle birlikte, bazı eşya isimlerinin yanına tik işareti gelir:
 
 <Sandpack>
 
@@ -102,11 +102,11 @@ export default function PackingList() {
 
 Her iki durumda da döndürülenleri düzenlemeyi deneyin ve sonucun nasıl değiştiğini görün!
 
-JavaScript'in `if` ve `return` ifadeleriyle nasıl dallanma mantığı yarattığınıza dikkat edin. React'te kontrol akışı (koşullar gibi) JavaScript tarafından gerçekleştirilir.
+JavaScript'in `if` ve `return` ifadeleriyle nasıl branching (dallanma) mantığı yarattığınıza dikkat edin. React'te kontrol akışı (koşullar gibi) JavaScript tarafından gerçekleştirilir.
 
 ### `null` ile koşullu olarak hiçbir şey döndürmemek {/*conditionally-returning-nothing-with-null*/}
 
-Bazı durumlarda hiçbir şey render etmemek isteyeceksiniz. Örneğin, bavula konmuş eşyaların listenizde görünmesini istemiyorsunuz. Bir bileşen bir şey döndürmek zorundadır. Bu durumda `null` döndürebilirsiniz:
+Bazı durumlarda hiçbir şey render etmemek isteyebilirsiniz. Örneğin, bavula konmuş eşyaların listenizde görünmesini istemiyorsunuz ancak bir bileşen bir şey döndürmek zorundadır. Bu durumda `null` döndürebilirsiniz:
 
 ```js
 if (isPacked) {
@@ -115,7 +115,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
- Eğer `isPacked` true (doğru) ise, bileşen hiçbir şey yani `null` döndürecek. Aksi takdirde, render etmek için JSX'i döndürecek.
+ Eğer `isPacked` prop'u true (doğru) ise, bileşen hiçbir şey yani `null` döndürecektir. Aksi takdirde, render etmek için JSX'i döndürecektir.
 
 <Sandpack>
 
@@ -152,7 +152,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-Uygulamada, bir bileşenin `null` döndürmesi yaygın olarak kullanılan bir şey değildir çünkü bileşeni render etmek isteyen başka bir geliştiricinin şaşırtabilir. Daha sık olarak, bir bileşeni üst bileşeninin JSX'ine koşullu olarak dahil eder veya hariç tutarsınız. Şimdi bunu nasıl yapacağımızı öğrenelim!
+Uygulamada, bir bileşenin `null` döndürmesi yaygın olarak kullanılan bir şey değildir çünkü bileşeni render etmek isteyen başka bir geliştiriciyi şaşırtabilir. Daha sık olarak, bir bileşeni üst bileşeninin JSX'ine koşullu olarak dahil eder veya hariç tutarsınız. Şimdi bunu nasıl yapacağımızı öğrenelim!
 
 ## JSX'i koşullu olarak dahil etmek {/*conditionally-including-jsx*/}
 
@@ -177,13 +177,13 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-Bu tekrarlamalar zararlı olmasa bile yazdığınız kodu idame ettirmek zorlaşacaktır. Ya `className`'i değiştirmek isterseniz? Bu işlemi kodunuzda iki yerde yapmak zorundasınız! Bu gibi durumlarda, kodunuz daha [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) (Tekrar Etme Kendini) hale getirmek için koşullu olarak küçük bir JSX ekleyebilirsiniz.
+Bu tekrarlamalar zararlı olmasa bile yazdığınız kodu idame ettirmek zorlaşacaktır. Ya `className`'i değiştirmek isterseniz? Bu işlemi kodunuzda iki yerde yapmak zorundasınız! Bu gibi durumlarda, kodunuz daha [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) (Tekrar Etme Kendini - TEK) hale getirmek için koşullu olarak küçük bir JSX ekleyebilirsiniz.
 
 ### Koşullu (ternary) operatörü (`? :`) {/*conditional-ternary-operator--*/}
 
 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ü".
 
-Bunun yerine:
+Böyle yazmak yerine:
 
 ```js
 if (isPacked) {
@@ -202,13 +202,13 @@ return (
 );
 ```
 
- Bu kodu şöyle okuyabilirsiniz: *"eğer `isPacked` true (doğru) ise, o zaman (`?`) `name + ' ✔'` render et, aksi halde (`:`) `name` render et"*.
+ Bu kodu şöyle okuyabilirsiniz: *"eğer `isPacked` prop'u true (doğru) ise, o zaman (`?`) `name + ' ✔'` render et, aksi halde (`:`) `name` render et"*.
 
 <DeepDive>
 
 #### Bu iki örnek tamamen eşdeğer mi? {/*are-these-two-examples-fully-equivalent*/}
 
-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ı kılavuzlar 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.
+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.
 
 </DeepDive>
 
@@ -256,11 +256,11 @@ export default function PackingList() {
 
 </Sandpack>
 
-Kodunuzu bu şekilde yazmak basit koşullu ifadeler için güzel çalışmakta ancak dikkatli kullanmakta fayda var.  Eğer bileşenleriniz iç içe geçmiş çok fazla koşullu ifadeden oluşuyorsa, ifadeyi temizlemek için yeni bir alt bileşen oluşturabilirsiniz. React'te, biçimlendirme kodunuzun bir parçasıdır dolayısıyla karmaşık ifadeleri düzenlemek için değişkenler ve fonksiyonlar gibi araçları kullanabilirsiniz.
+Kodunuzu bu şekilde yazmak basit koşullu ifadeler için güzel çalışmakta ancak dikkatli kullanmakta fayda vardır.  Eğer bileşenleriniz iç içe geçmiş çok fazla koşullu ifadeden oluşuyorsa, ifadeyi temizlemek için yeni bir alt bileşen oluşturabilirsiniz. React'te, biçimlendirme kodunuzun bir parçasıdır dolayısıyla karmaşık ifadeleri düzenlemek için değişkenler ve fonksiyonlar gibi araçları kullanabilirsiniz.
 
 ### Mantıksal AND (VE) operatörü (`&&`) {/*logical-and-operator-*/}
 
-Karşınıza sıkça çıkacak bir diğer kısayol ise [JavaScript mantıksal AND (VE) (`&&`) operatörüdür.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Bu operatör React bileşeni içinde genellikle koşul doğru olduğunda bir kısım JSX'i render etmek **aksi halde hiçbir şey render etmemek** istediğinizde karşınıza çıkar. `&&` ifadesi ile, yalnızca `isPacked` prop'u `true (doğru)` ise tik işaretini eşyanın isminin yanına koyabilirsiniz.
+Karşınıza sıkça çıkacak bir diğer kısayol ise [JavaScript mantıksal AND (VE) (`&&`) operatörüdür.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Bu operatör React bileşeni içinde genellikle koşul doğru olduğunda bir kısım JSX'i render etmek **aksi halde hiçbir şey render etmemek** istediğiniz durumlarda kullanılır. `&&` ifadesi ile, yalnızca `isPacked` prop'u `true (doğru)` ise tik işaretini eşyanın isminin yanına koyabilirsiniz.
 
 ```js
 return (
@@ -310,7 +310,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-[JavaScript && operatörü](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) eğer ifademizin sol tarafı (koşulumuz) `true` (`doğru`) ise ifadenin sağ tarafındaki değeri döndürür. Ama koşulumuz `false` (`yanlış`) ise, bütün ifademiz `false` (`yanlış`) olur. React, `false`'u JSX ağacında tıpkı `null` ya da `undefined` gibi bir "delik" olarak kabul eder ve geriye hiçbir şey döndürmez.
+[JavaScript && operatörü](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) eğer ifademizin sol tarafı (koşulumuz) `true (doğru)`ise ifadenin sağ tarafındaki değeri döndürür. Ama koşulumuz `false (yanlış)` ise, bütün ifademiz `false (yanlış)` olur. React, `false`'u JSX ağacında tıpkı `null` ya da `undefined` gibi bir "delik" olarak kabul eder ve geriye hiçbir şey döndürmez.
 
 <Pitfall>
 
@@ -320,7 +320,7 @@ JavaScript koşulu test etmek için operatörün sol tarafını otomatik olarak
 
 Örneğin, `messageCount && <p>New messages</p>` gibi bir kod yazmak yaygın bir hatadır. `messageCount` `0` olduğunda hiçbir şey render etmediğini varsaymak kolaydır ancak React gerçekte `0` render etmektedir.
 
-Bu durumu düzeltmek için sol tarafı boole çevirmek gereklidir: `messageCount > 0 && <p>New messages</p>`.
+Bu durumu düzeltmek için sol tarafı boolean'a (boole) çevirmek gereklidir: `messageCount > 0 && <p>New messages</p>`.
 
 </Pitfall>
 
@@ -332,7 +332,7 @@ Kısayollar düz kod yazmanın önüne geçtiği zaman, bir `if` ifadesi ve bir
 let itemContent = name;
 ```
 
-Eğer `isPacked` `true` (`doğru`) ise, bir JSX ifadesini `itemContent`'e tekrardan atamak için bir `if` ifadesi kullanın:
+Eğer `isPacked` `true (doğru)` ise, bir JSX ifadesini `itemContent`'e tekrardan atamak için bir `if` ifadesi kullanın:
 
 ```js
 if (isPacked) {
@@ -348,7 +348,7 @@ if (isPacked) {
 </li>
 ```
 
-Bu syntax en ayrıntılı ama aynı zaman en esnek olanıdır. Aşağıda nasıl çalıştığını görebilirsiniz:
+Bu syntax en ayrıntılı ama aynı zamanda en esnek olanıdır. Aşağıda nasıl çalıştığını görebilirsiniz:
 
 <Sandpack>
 
@@ -443,9 +443,9 @@ Eğer JavaScript diline aşina değilseniz, bu çeşitli syntax'ler ilk başta k
 * React'te, branching (dallanma) mantığını JavaScript ile kontrol edersiniz.
 * `if` ifadesini kullanarak koşullu olarak bir JSX ifadesi döndürebilirsiniz.
 * Bir JSX ifadesini koşullu olarak bir değişkene atayabilir ve süslü parantez kullanarak ("{}") başka bir JSX'in içine dahil edebilirsiniz.
-* JSX'te, `{cond ? <A /> : <B />}` ifadesi şu anlama gelmektedir: *"eğer `cond` ise, `<A />`'yı render et, aksi halde `<B />`'yi render et"*.
-* JSX'te, `{cond && <A />}` ifadesi şu anlama gelmektedir: *"eğer `cond` ise, `<A />`'yı render et, aksi halde hiçbir şey render etme"*.
-* Kod tabanlarında bu kısayolları görmek yaygındır, ancak düz `if` ifadesini tercih ederseniz kısayolları kullanmak zorunda değilsiniz.
+* JSX'te, `{cond ? <A /> : <B />}` ifadesi şu anlama gelmektedir: *"eğer `cond` varsa, `<A />`'yı render et, aksi halde `<B />`'yi render et"*.
+* JSX'te, `{cond && <A />}` ifadesi şu anlama gelmektedir: *"eğer `cond` varsa, `<A />`'yı render et, aksi halde hiçbir şey render etme"*.
+* Kod tabanlarında bu kısayolları görmek yaygındır, ancak kendiniz düz `if` ifadesini tercih edebilirsiniz. 
 
 </Recap>
 
@@ -533,15 +533,15 @@ export default function PackingList() {
 
 </Solution>
 
-#### Eşyanın önemini `&&` ile göster {/*show-the-item-importance-with-*/}
+#### Eşyanın importance (önemini) `&&` operatörü ile göster {/*show-the-item-importance-with-*/}
 
 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:
 
 * Space suit _(Importance: 9)_
 * Helmet with a golden leaf
 * Photo of Tam _(Importance: 6)_
 
-İki label (etiket) arasına boşluk koymayı unutmayın!
+İkisi arasına boşluk koymayı unutmayın!
 
 <Sandpack>
 
@@ -625,11 +625,11 @@ export default function PackingList() {
 
 `importance && ...` yerine `importance > 0 && ...` yazmanız gerektiğini unutmayın. Böylelikle `importance` prop'u `0` olanlar render edilmemiş olacaktır.
 
-Bu çözümde, eşyanın ismi ve importance yazısı arasına boşluk koyabilmek için iki farklı koşul kullanılmalıdır. Alternatif olarak, zaten boşluğu olan bir fragment `importance > 0 && <> <i>...</i></>` kullanabilir ya da `<i>` içine bir boşluk ekleyebilirsiniz `importance > 0 && <i> ...</i>`.
+Bu çözümde, eşyanın ismi ve importance (önem) yazısı arasına boşluk koyabilmek için iki farklı koşul kullanılmalıdır. Alternatif olarak, zaten boşluğu olan bir fragment `importance > 0 && <> <i>...</i></>` kullanabilir ya da `<i>` içine bir boşluk ekleyebilirsiniz `importance > 0 && <i> ...</i>`.
 
 </Solution>
 
-#### Bir dizi `? :` ifadesini `if` syntax'i ve değişkenler ile değiştir {/*refactor-a-series-of---to-if-and-variables*/}
+#### Bir dizi `? :` operatörünü `if` ifadesi ve değişkenler ile değiştir {/*refactor-a-series-of---to-if-and-variables*/}
 
 `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.