reactjs · anilcanboga · Jan 19, 2025 · Jan 19, 2025 · Jan 19, 2025 · Jan 19, 2025
diff --git a/TRANSLATION.md b/TRANSLATION.md
@@ -12,7 +12,7 @@ Bölümlerin başlıkları aşağıdaki gibi süslü parantezler içerisinde yer
 ## Try React {#try-react}
 ```
 
-**Bu tanımlayıcıları çevirmeyiniz**. Çünkü bu tanımlayıcılar link mantığında çalışırlar ve sayfalar arası gezinme için kullanılırlar. Bu nedenle harici olarak oluşturulurlarsa düzgün çalışmazlar. 
+**Bu tanımlayıcıları çevirmeyiniz**. Çünkü bu tanımlayıcılar link mantığında çalışırlar ve sayfalar arası gezinme için kullanılırlar. Bu nedenle harici olarak oluşturulurlarsa düzgün çalışmazlar.
 
 ✅ Doğru:
 
@@ -30,9 +30,10 @@ Bu kullanım, yukarıdaki bağlantının çalışmamasına neden olur.
 
 ## Kod Bloklarındaki Metin
 
-Metindeki yorumlar haricinde yer alan kod bloklarını çevirmeyiniz. İsteğe bağlı olarak HTML'de görüntülenecek metinleri çevirebilirsiniz, ancak değişken, fonksiyon adı, sınıf ismi, DOM elemanı id'si gibi kodun çalışmasını direkt olarak etkileyen kısımları çevirmeyiniz. 
+Metindeki yorumlar haricinde yer alan kod bloklarını çevirmeyiniz. İsteğe bağlı olarak HTML'de görüntülenecek metinleri çevirebilirsiniz, ancak değişken, fonksiyon adı, sınıf ismi, DOM elemanı id'si gibi kodun çalışmasını direkt olarak etkileyen kısımları çevirmeyiniz.
 
 Örnek:
+
 ```js
 // Example
 const element = <h1>Hello, world</h1>;
@@ -62,7 +63,7 @@ ReactDOM.render(element, document.getElementById('root'));
 const element = <h1>Merhaba dünya</h1>;
 // "root", DOM'da yer alan bir elemanın id'sini ifade eder.
 // Çevirmeyiniz
-ReactDOM.render (element, document.getElementById ('kök'));
+ReactDOM.render(element, document.getElementById('kök'));
 ```
 
 ❌ Kesinlikle yanlış:
@@ -75,11 +76,11 @@ ReactDOM.işle(bileşen, document.idKullanarakElemanıGetir('kök'));
 
 ## Dış Bağlantılar
 
-Sayfada yer alan [MDN] veya [Wikipedia] gibi harici bağlantılar diğer bir makaleye yönelikse ve bu makalenin Türkçe dilinde kabul edilebilir kalitede bir sürümü varsa, bağlantıyı bu sürümünkiyle değiştirmeyi düşününüz. 
+Sayfada yer alan [MDN] veya [Wikipedia] gibi harici bağlantılar diğer bir makaleye yönelikse ve bu makalenin Türkçe dilinde kabul edilebilir kalitede bir sürümü varsa, bağlantıyı bu sürümünkiyle değiştirmeyi düşününüz.
 
-[MDN]: https://developer.mozilla.org/en-US/
-[Wikipedia]: https://en.wikipedia.org/wiki/Main_Page
-[EksiSozluk]: https://eksisozluk.com/
+[mdn]: https://developer.mozilla.org/en-US/
+[wikipedia]: https://en.wikipedia.org/wiki/Main_Page
+[eksisozluk]: https://eksisozluk.com/
 
 Örnek:
 
@@ -103,46 +104,46 @@ Tutarlılığı korumak ve okura saygı ve incelik ile hitap etmek için, you ke
 
 Bu tür teknik belgelerde yaygın olarak kullanılan terimlerin çevirisi için bazı öneriler aşağıdaki şekilde alfabetik olarak sıralanmıştır.
 
-| Orijinal kelime / terim   | Öneri |
-| ------------------------- | ---------- |
-| array                     | dizi |
-| arrow function            | ok fonksiyonu |
-| attribute                 | özellik |
-| bug                       | hata |
-| bundler                   | paketleyici |
-| callback                  | callback |
-| camelCase                 | camelCase |
-| child                     | alt / alt eleman |
-| controlled component      | kontrollü bileşen |
-| debugging                 | hata ayıklama |
-| DOM                       | DOM |
-| event                     | olay |
-| event handler             | olay yöneticisi |
-| external                  | harici |
-| fragment                  | fragment |
-| framework                 | çatı |
-| function component        | fonksiyon bileşeni |
-| handler                   | yönetici |
-| hook                      | hook |
-| instance                  | nesne |
-| internal                  | dahili |
-| key                       | anahtar |
-| lazy initialization       | lazy başlatım |
-| library                   | kütüphane |
-| lowercase                 | küçük harf |
-| parent                    | üst / üst eleman |
-| production                | canlı ortam / canlı |
-| props                     | prop'ları |
-| pure                      | saf olarak / saf halde |
-| React element             | React elemanı |
-| Reference                 | Başvuru dokümanı |
-| render                    | render etmek |
-| shallow rendering         | yüzeysel render'lama / render etme |
-| state                     | state |
-| string                    | string |
-| template literals         | template literal'leri |
-| Try it on CodePen         | CodePen'de deneyin |
-| uncontrolled component    | kontrolsüz bileşen |
-| effect                    | efekt `*`|
-
- * ozel olarak `useEffect` ya da `useLayoutEffect` tarzi hooklardan bahsedilen yerlerde oldugu gibi tutabiliriz. Ama genel olarak konsepte deginildigi yerlerde `efekt` olarak cevirebiliriz.
+| Orijinal kelime / terim | Öneri                              |
+| ----------------------- | ---------------------------------- |
+| array                   | dizi                               |
+| arrow function          | ok fonksiyonu                      |
+| attribute               | özellik                            |
+| bug                     | hata                               |
+| bundler                 | paketleyici                        |
+| callback                | callback                           |
+| camelCase               | camelCase                          |
+| child                   | alt / alt eleman                   |
+| controlled component    | kontrollü bileşen                  |
+| debugging               | hata ayıklama                      |
+| DOM                     | DOM                                |
+| event                   | olay                               |
+| event handler           | olay yöneticisi                    |
+| external                | harici                             |
+| fragment                | fragment                           |
+| framework               | framework                          |
+| function component      | fonksiyon bileşeni                 |
+| handler                 | yönetici                           |
+| hook                    | hook                               |
+| instance                | nesne                              |
+| internal                | dahili                             |
+| key                     | anahtar                            |
+| lazy initialization     | lazy başlatım                      |
+| library                 | kütüphane                          |
+| lowercase               | küçük harf                         |
+| parent                  | üst / üst eleman                   |
+| production              | canlı ortam / canlı                |
+| props                   | prop'ları                          |
+| pure                    | saf olarak / saf halde             |
+| React element           | React elemanı                      |
+| Reference               | Başvuru dokümanı                   |
+| render                  | render etmek                       |
+| shallow rendering       | yüzeysel render'lama / render etme |
+| state                   | state                              |
+| string                  | string                             |
+| template literals       | template literal'leri              |
+| Try it on CodePen       | CodePen'de deneyin                 |
+| uncontrolled component  | kontrolsüz bileşen                 |
+| effect                  | efekt `*`                          |
+
+- ozel olarak `useEffect` ya da `useLayoutEffect` tarzi hooklardan bahsedilen yerlerde oldugu gibi tutabiliriz. Ama genel olarak konsepte deginildigi yerlerde `efekt` olarak cevirebiliriz.
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
@@ -238,32 +238,33 @@ export function HomeContent() {
 
         <Section background="right-card">
           <Center>
-            <Header>Bir çatı ile tam özellikli geliştirmeler yapın</Header>
+            <Header>Bir framework ile tam özellikli geliştirmeler yapın</Header>
             <Para>
               React bir kütüphanedir. Bileşenleri bir araya getirmenize olanak
               sağlar, ancak yönlendirme ve veri çekme gibi konularda nasıl
               yapılacağına dair talimat vermez. React ile tüm bir uygulama
               oluşturmak için <Link href="https://nextjs.org">Next.js</Link>{' '}
               veya <Link href="https://remix.run">Remix</Link> gibi tam
-              özellikli React çatılarını öneriyoruz.
+              özellikli React framework&apos;lerini öneriyoruz.
             </Para>
           </Center>
           <FullBleed>
             <Example4 />
           </FullBleed>
           <Center>
             <Para>
-              React aynı zamanda bir mimaridir. Onu kullanan çatılar, sunucuda
-              çalışan asenkron bileşenlerde veya hatta derleme sırasında veri
-              çekmenize olanak tanır. Bir dosyadan veya veritabanından veri
-              okuyun ve bunu interaktif bileşenlerinize aktarın.
+              React aynı zamanda bir mimaridir. Onu kullanan
+              framework&apos;leri, sunucuda çalışan asenkron bileşenlerde veya
+              hatta derleme sırasında veri çekmenize olanak tanır. Bir dosyadan
+              veya veritabanından veri okuyun ve bunu interaktif bileşenlerinize
+              aktarın.
             </Para>
             <div className="flex justify-start w-full lg:justify-center">
               <CTA
                 color="gray"
                 icon="framework"
                 href="/learn/start-a-new-react-project">
-                Bir çatı ile başlayın
+                Bir framework ile başlayın
               </CTA>
             </div>
           </Center>

diff --git a/src/content/blog/index.md b/src/content/blog/index.md
@@ -42,7 +42,7 @@ React Labs yazılarında, aktif araştırma ve geliştirme aşamasındaki projel
 
 <BlogCard title="React Canaries: Meta Dışında Kademeli Özellik Sunumu" date="3 Mayıs, 2023" url="/blog/2023/05/03/react-canaries">
 
-Geleneksel olarak, yeni React özellikleri önce sadece Meta'da kullanılabilir ve daha sonra açık kaynak sürümlerinde yer alırdı. React topluluğuna, Meta'nın React'i dahili olarak kullanmasına benzer şekilde, tasarımları son haline yaklaşır yaklaşmaz bireysel yeni özellikleri benimseme seçeneği sunmak istiyoruz. Resmi olarak desteklenen yeni bir Canary sürüm kanalı sunuyoruz. Bu, çatı'lar gibi küratörlü kurulumların bireysel React özelliklerinin benimsenmesini React sürüm programından ayırmasına olanak tanır.
+Geleneksel olarak, yeni React özellikleri önce sadece Meta'da kullanılabilir ve daha sonra açık kaynak sürümlerinde yer alırdı. React topluluğuna, Meta'nın React'i dahili olarak kullanmasına benzer şekilde, tasarımları son haline yaklaşır yaklaşmaz bireysel yeni özellikleri benimseme seçeneği sunmak istiyoruz. Resmi olarak desteklenen yeni bir Canary sürüm kanalı sunuyoruz. Bu, framework'ler gibi küratörlü kurulumların bireysel React özelliklerinin benimsenmesini React sürüm programından ayırmasına olanak tanır.
 
 </BlogCard>
 

diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
@@ -51,11 +51,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
 ```
 
 </Sandpack>
-Bu örnekte, bileşenler `App.js` adlı bir **kök bileşen dosyası**'nın içerisinde barınmaktadır. [Create React App](https://create-react-app.dev/)'de uygulamanız `src/App.js` dosyası içinde barınmaktadır. Fakat kurulumunuza bağlı olarak kök bileşeniniz başka bir dosyanın içerisinde olabilir. Eğer dosya tabanlı yönlendirmesi olan bir çatı kullanıyorsanız, kök bileşeniniz her sayfa için ayrı olacaktır.
+Bu örnekte, bileşenler `App.js` adlı bir **kök bileşen dosyası**'nın içerisinde barınmaktadır. [Create React App](https://create-react-app.dev/)'de uygulamanız `src/App.js` dosyası içinde barınmaktadır. Fakat kurulumunuza bağlı olarak kök bileşeniniz başka bir dosyanın içerisinde olabilir. Eğer dosya tabanlı yönlendirmesi olan bir framework kullanıyorsanız, kök bileşeniniz her sayfa için ayrı olacaktır.
 
 ## Bileşenleri içe ve dışa aktarma {/*exporting-and-importing-a-component*/}
 
-Bu örnekte bileşenler `App.js` adlı bir **kök bileşen dosyasında** bulunmaktadır. Kurulumunuza bağlı olarak, kök bileşeniniz (root component) başka bir dosyada olabilir. Next.js gibi dosya tabanlı yönlendirmeye sahip bir çatı (framework) kullanıyorsanız, kök bileşeniniz her sayfa için farklı olacaktır.
+Bu örnekte bileşenler `App.js` adlı bir **kök bileşen dosyasında** bulunmaktadır. Kurulumunuza bağlı olarak, kök bileşeniniz (root component) başka bir dosyada olabilir. Next.js gibi dosya tabanlı yönlendirmeye sahip bir framework kullanıyorsanız, kök bileşeniniz her sayfa için farklı olacaktır.
 
 Eğer açılış ekranını değiştirmek ve bilim kitaplarının bir listesini koymak isterseniz ne olur? Veya tüm profilleri başka bir yere yerleştirmek isterseniz? Bu durumda `Galeri` ve `Profil` bileşenlerini kök bileşen dosyasından çıkarmak mantıklıdır. Bu, onların daha modüler olmasını ve diğer dosyalarda yeniden kullanılabilir olmasını sağlayacaktır. Bir bileşeni üç adımda taşıyabilirsiniz:
 

diff --git a/src/content/learn/index.md b/src/content/learn/index.md
@@ -111,7 +111,7 @@ Daha sonra CSS kurallarını ayrı bir CSS dosyasında yazarsınız:
 }
 ```
 
-React, CSS dosyalarınız nasıl ekleyeceğinizi belirtmez. En basit durumda, HTML'inize bir [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) elemanı eklersiniz. Bir derleme aracı veya çatı kullanıyorsanız, projenize nasıl CSS dosyası ekleyeceğinizi öğrenmek için dokümantasyonlara başvurun.
+React, CSS dosyalarınız nasıl ekleyeceğinizi belirtmez. En basit durumda, HTML'inize bir [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) elemanı eklersiniz. Bir derleme aracı veya framework kullanıyorsanız, projenize nasıl CSS dosyası ekleyeceğinizi öğrenmek için dokümantasyonlara başvurun.
 
 ## Veri gösterme {/*displaying-data*/}
 

diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md
@@ -47,7 +47,7 @@ Mevcut bir site üzerinde çalışıyorsanız ve biraz React eklemeniz gerekiyor
 
 ## Bir React projesi oluşturun {/*start-a-react-project*/}
 
-Eğer [bağımsız bir React projesine](/learn/start-a-new-react-project) başlamaya hazırsanız, tatlı bir geliştirici deneyimi için minimal bir araç zinciri kurabilirsiniz. Ayrıca, halihazırda sizin için birçok karar veren bir çatı ile de başlayabilirsiniz.
+Eğer [bağımsız bir React projesine](/learn/start-a-new-react-project) başlamaya hazırsanız, tatlı bir geliştirici deneyimi için minimal bir araç zinciri kurabilirsiniz. Ayrıca, halihazırda sizin için birçok karar veren bir framework ile de başlayabilirsiniz.
 
 ## Sonraki adımlar {/*next-steps*/}
 

diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md
@@ -38,7 +38,7 @@ Bir bileşenin render edilmesi için iki sebep vardır:
 
 ### İlk render {/*initial-render*/}
 
-Uygulamanız başladığında, ilk render'ı tetiklemeniz gerekmektedir. Çatılar ve sandbox'lar bazen bu kodu gizlerler ancak bu, hedef DOM node'unun [`createRoot`](/reference/react-dom/client/createRoot) ile çağrılması ve ardından bileşeninizle o DOM node'unun `render` metodu çağrılarak ilk render tetiklenir:
+Uygulamanız başladığında, ilk render'ı tetiklemeniz gerekmektedir. Framework'ler ve sandbox'lar bazen bu kodu gizlerler ancak bu, hedef DOM node'unun [`createRoot`](/reference/react-dom/client/createRoot) ile çağrılması ve ardından bileşeninizle o DOM node'unun `render` metodu çağrılarak ilk render tetiklenir:
 
 <Sandpack>
-Original file line number
+Diff line change
@@ Expand Up @@
     }
     ```
-    React, CSS dosyalarınız nasıl ekleyeceğinizi belirtmez. En basit durumda, HTML'inize bir [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) elemanı eklersiniz. Bir derleme aracı veya çatı kullanıyorsanız, projenize nasıl CSS dosyası ekleyeceğinizi öğrenmek için dokümantasyonlara başvurun.
+    React, CSS dosyalarınız nasıl ekleyeceğinizi belirtmez. En basit durumda, HTML'inize bir [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) elemanı eklersiniz. Bir derleme aracı veya framework kullanıyorsanız, projenize nasıl CSS dosyası ekleyeceğinizi öğrenmek için dokümantasyonlara başvurun.
     ## Veri gösterme {/*displaying-data*/}
@@ Expand Down @@