Sync with react.dev @ 2c7798d

Author: anilcanboga

src/components/Layout/HomeContent.js

@@ -247,20 +247,14 @@ export function HomeContent() {
           <Center>
             <Header>Bir framework ile tam özellikli geliştirmeler yapın</Header>
             <Para>
-<<<<<<< HEAD
-              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 framework&apos;lerini öneriyoruz.
-=======
-              React is a library. It lets you put components together, but it
-              doesn’t prescribe how to do routing and data fetching. To build an
-              entire app with React, we recommend a full-stack React framework
-              like <Link href="https://nextjs.org">Next.js</Link> or{' '}
-              <Link href="https://reactrouter.com">React Router</Link>.
->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72
+              React bir kütüphanedir. Bileşenleri bir araya getirmenizi sağlar,
+              ancak yönlendirme (routing) ve veri çekme (data fetching)
+              işlemlerini nasıl yapmanız gerektiğini belirlemez. React ile tam
+              bir uygulama oluşturmak için, tam yığın (full-stack) React
+              framework’ü olarak
+              <Link href="https://nextjs.org">Next.js</Link> veya{' '}
+              <Link href="https://reactrouter.com">React Router</Link>{' '}
+              kullanmanızı öneririz.
             </Para>
           </Center>
           <FullBleed>

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

@@ -37,15 +37,12 @@ Her bileşenin etrafına kutular çizin ve bileşenlerinize isim verin. Bir tasa
 
 Tecrübenize bağlı olarak, bir tasarımı farklı yöntemlerle bileşenlere ayırmayı düşünebilirsiniz:
 
-<<<<<<< HEAD
-* **Programlama**--yeni bir fonksiyon veya nesne oluşturup oluşturmayacağınıza karar vermek için aynı teknikleri kullanın. Bu tekniklerden biri [tek sorumluluk ilkesi](https://tr.wikipedia.org/wiki/Tek_sorumluluk_ilkesi)dir, yani bir bileşen ideal olarak sadece bir şey yapmalıdır. Büyümeye başlarsa, daha küçük alt bileşenlere ayrılmalıdır.
-* **CSS**--tek tek neler için sınıf seçiçiler yazacağınızı düşünün. (Bununla birlikte, bileşenler biraz daha az ayrıntılıdır.)
-* **Tasarım**--tasarımın katmanlarını nasıl düzenleyeceğinizi düşünün.
-=======
-* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns), that is, a component should ideally only be concerned with one thing. If it ends up growing, it should be decomposed into smaller subcomponents. 
-* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.)
-* **Design**--consider how you would organize the design's layers.
->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72
+* **Programlama** — Yeni bir fonksiyon veya nesne oluşturup oluşturmamaya karar verirken aynı teknikleri kullanın.  
+  Bu tekniklerden biri [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) (sorumlulukların ayrımı) ilkesidir; yani bir bileşen ideal olarak yalnızca tek bir işle ilgilenmelidir.  
+  Eğer bileşen büyürse, daha küçük alt bileşenlere (subcomponents) bölünmelidir.
+* **CSS** — Hangi yapılar için class selector tanımlayacağınızı düşünün.  
+  (Ancak bileşenler CSS sınıflarına göre biraz daha az ayrıntılıdır.)
+* **Tasarım** — Tasarımın katmanlarını nasıl organize edeceğinizi göz önünde bulundurun.
 
 JSON veriniz iyi yapılandırılmışsa, genellikle arayüzün bileşen yapısıyla doğal bir şekilde eşleştiğini göreceksiniz. Çünkü UI ve veri modelleri genellikle aynı bilgi mimarisine, yani aynı şekle sahiptir. Arayüzünüzü, her bileşenin veri modelinizin bir parçasıyla eşleştiği bileşenlere ayırın.
 

src/content/learn/understanding-your-ui-as-a-tree.md

@@ -20,11 +20,11 @@ React ve diğer birçok UI kütüphanesi, UI'ı bir ağaç olarak modeller. Uygu
 
 ## Bir ağaç olarak kullanıcı arayüzünüz {/*your-ui-as-a-tree*/}
 
-<<<<<<< HEAD
-Ağaçlar öğeler arasında bir ilişki modelidir ve kullanıcı arayüzü genellikle ağaç yapıları kullanılarak temsil edilir. Örneğin, tarayıcılar HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) ve CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)) modellemek için ağaç yapılarını kullanır. Mobil platformlar da görünüm hiyerarşilerini temsil etmek için ağaçları kullanır.
-=======
-Trees are a relationship model between items. The UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy.
->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72
+Ağaçlar (Trees), öğeler arasındaki ilişkileri modelleyen yapılardır.  
+Kullanıcı arayüzü (UI) genellikle ağaç yapıları kullanılarak temsil edilir.  
+Örneğin, tarayıcılar HTML’yi [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)  
+ve CSS’i [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) ile modellemek için ağaç yapıları kullanır.  
+Mobil platformlar da kendi **görünüm hiyerarşilerini (view hierarchy)** temsil etmek için ağaç yapılarından yararlanır.
 
 <Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Yatay olarak düzenlenmiş üç bölümlü diyagram. İlk bölümde,'Bileşen A', 'Bileşen B' ve 'Bileşen C' etiketleri ile dikey olarak istiflenmiş üç dikdörtgen vardır. Bir sonraki bölmeye geçişte, üzerinde React logosu bulunan ve 'React' etiketli bir ok bulunur. Orta bölüm, 'A' olarak etiketlenmiş kök ve 'B' ve 'C' olarak etiketlenmiş iki alt bileşen ile bir bileşen ağacı içerir. Bir sonraki bölüm yine üzerinde React logosu bulunan ve 'React DOM' olarak etiketlenmiş bir ok kullanılarak geçilir. Üçüncü ve son bölüm, yalnızca bir alt kümesi vurgulanmış (orta bölümdeki alt ağacı gösteren) 8 düğümlü bir ağaç içeren bir tarayıcının şemasıdır.">
 

src/content/reference/react/Suspense.md

@@ -2009,11 +2009,9 @@ Ancak, şimdi iki farklı kullanıcı profili arasında geçiş yapmaya çalış
 
 Eğer [stream'leyen sunucu render etme API'leri](/reference/react-dom/server)nden birini (ya da onlara bağlı bir framework) kullanıyorsanız, React sunucuda hataları ele almak için `<Suspense>` sınırlarınızı kullanacaktır. Eğer bir bileşen sunucuda bir hata throw ederse, React sunucu render'ını iptal etmeyecektir. Bunun yerine, onun üzerindeki en yakın `<Suspense>` bileşenini bulacak ve oluşturulan sunucu HTML'ine bileşenin fallback'ini (örneğin bir yükleniyor çarkı) dahil edecektir. Kullanıcı ilk olarak bir yükleniyor çarkı görecektir.
 
-<<<<<<< HEAD
-İstemci tarafında, React aynı bileşeni tekrar render etmeyi deneyecektir. Eğer istemcide de hata verirse, React hatayı throw edip en yakın [hata sınırını](/reference/react/Component#static-getderivedstatefromerror) gösterecektir. Ancak, istemcide hata vermezse, React içeriği nihayetinde başarıyla görüntülediği için hatayı kullanıcıya göstermeyecektir.
-=======
-On the client, React will attempt to render the same component again. If it errors on the client too, React will throw the error and display the closest [Error Boundary.](/reference/react/Component#static-getderivedstatefromerror) However, if it does not error on the client, React will not display the error to the user since the content was eventually displayed successfully.
->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72
+İstemci tarafında (client), React aynı bileşeni yeniden render etmeye çalışır.  
+Eğer istemci tarafında da hata oluşursa, React bu hatayı fırlatır (**throw**) ve en yakın [Error Boundary](/reference/react/Component#static-getderivedstatefromerror) bileşenini gösterir. Ancak, istemci tarafında hata oluşmazsa, React kullanıcıya hatayı göstermez;  
+çünkü içerik sonuçta başarılı bir şekilde görüntülenmiştir.
 
 Bunu bazı bileşenlerin sunucuda yüklenmemesini sağlamak için kullanabilirsiniz. Bunu yapmak için, sunucu ortamında bir hata throw edin ve ardından HTML'lerini fallback'lerle değiştirmek için `<Suspense>` sınırı içine alın:
 

src/content/reference/react/apis.md

@@ -4,11 +4,8 @@ title: "Yerleşik React API'leri"
 
 <Intro>
 
-<<<<<<< HEAD
-`react` paketi, [Hook](/reference/react)'ların ve [Bileşen](/reference/react/components)'lerin yanı sıra, bileşen tanımlarken kullanışlı olan birkaç farklı API içerir. Bu sayfa, tüm modern React API'lerini listeler.
-=======
-In addition to [Hooks](/reference/react/hooks) and [Components](/reference/react/components), the `react` package exports a few other APIs that are useful for defining components. This page lists all the remaining modern React APIs.
->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72
+[Hooks](/reference/react/hooks) ve [Components](/reference/react/components)’e ek olarak,  
+`react` paketi bileşen tanımlamak için faydalı birkaç başka API daha dışa aktarır (**export eder**). Bu sayfa, modern React API’lerinin geri kalanını listeler.
 
 </Intro>
 

src/content/reference/react/components.md

@@ -10,21 +10,13 @@ React, JSX'lerinizde kullanabileceğiniz birkaç yerleşik bileşeni sunar.
 
 ---
 
-<<<<<<< HEAD
-## Yerleşik react bileşenleri {/*built-in-components*/}
-* [`<Fragment>`](/reference/react/Fragment) bileşeni, alternatif olarak `<>...</>` şeklinde yazılır ve birden fazla JSX düğümünü bir araya getirmenize olanak tanır.
-* [`<Profiler>`](/reference/react/Profiler) bileşeni, bir React ağacının render performansını programlama yoluyla ölçmenizi sağlar.
-* [`<Suspense>`](/reference/react/Suspense) bileşeni, alt bileşenler yüklenirken bir yedek içerik görüntülemenizi sağlar.
-* [`<StrictMode>`](/reference/react/StrictMode) bileşeni, hataları erken tespit etmenize yardımcı olan ekstra kontrolleri gerçekleştirir. Yalnızca geliştirme ortamında geçerlidir.
-=======
-## Built-in components {/*built-in-components*/}
-
-* [`<Fragment>`](/reference/react/Fragment), alternatively written as `<>...</>`, lets you group multiple JSX nodes together.
-* [`<Profiler>`](/reference/react/Profiler) lets you measure rendering performance of a React tree programmatically.
-* [`<Suspense>`](/reference/react/Suspense) lets you display a fallback while the child components are loading.
-* [`<StrictMode>`](/reference/react/StrictMode) enables extra development-only checks that help you find bugs early.
-* [`<Activity>`](/reference/react/Activity) lets you hide and restore the UI and internal state of its children.
->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72
+## Yerleşik Bileşenler (Built-in components) {/*built-in-components*/}
+
+* [`<Fragment>`](/reference/react/Fragment), alternatif olarak `<>...</>` şeklinde yazılabilir, birden fazla JSX düğümünü bir arada gruplamanızı sağlar.
+* [`<Profiler>`](/reference/react/Profiler), bir React ağacının render performansını programatik olarak ölçmenizi sağlar.
+* [`<Suspense>`](/reference/react/Suspense), alt bileşenler yüklenirken bir **fallback** içerik göstermeyi sağlar.
+* [`<StrictMode>`](/reference/react/StrictMode), hataları erken bulmanıza yardımcı olan yalnızca geliştirme sırasında çalışan ekstra kontrolleri etkinleştirir.
+* [`<Activity>`](/reference/react/Activity), çocuklarının kullanıcı arayüzünü (UI) ve iç durumunu gizlemenizi ve geri yüklemenizi sağlar.
 
 ---
 

src/content/reference/react/use.md

@@ -34,11 +34,7 @@ Diğer React Hook'ların aksine, Döngülerin ve `if` gibi koşullu ifadeler iç
 
 Bir Pomise ile çağırıldığında; `use` API, [`Suspense`](/reference/react/Suspense) ve [hata sınırları](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) ile entegre olur. `use`'a iletilen Promise beklenirken, `use` çağrısı yapan bileşen askıya alınır. Eğer `use` çağrısı yapan bileşen Suspense içerisine alınırsa yedek görünüm görüntülenecektir. Promise çözümlendiğinde ise; Suspense yedek görünümü, `use` API'ı tarafından döndürülen değerleri kullanarak oluşturulan bileşenler ile yer değiştirir. Eğer `use`'a iletilen Promise reddedilir ise, en yakındaki Hata Sınırının yedek görünümü görüntülenecektir.
 
-<<<<<<< HEAD
-[Aşağıda daha fazla örnek görebilirsiniz.](#usage)
-=======
-When called with a Promise, the `use` API integrates with [`Suspense`](/reference/react/Suspense) and [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). The component calling `use` *suspends* while the Promise passed to `use` is pending. If the component that calls `use` is wrapped in a Suspense boundary, the fallback will be displayed.  Once the Promise is resolved, the Suspense fallback is replaced by the rendered components using the data returned by the `use` API. If the Promise passed to `use` is rejected, the fallback of the nearest Error Boundary will be displayed.
->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72
+Bir Promise ile çağrıldığında, `use` API’si [`Suspense`](/reference/react/Suspense) ve [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) ile entegre çalışır. `use` çağrısı yapan bileşen, `use` fonksiyonuna iletilen Promise beklemede (**pending**) olduğu sürece *askıya alınır* (**suspend olur**). Eğer bu bileşen bir Suspense boundary içine sarılmışsa, fallback içerik gösterilir. Promise çözümlendiğinde (**resolved**), Suspense fallback kaldırılır ve `use` API’si tarafından döndürülen veriyi kullanan bileşenler render edilir. Eğer `use` fonksiyonuna iletilen Promise reddedilirse (**rejected**), en yakın Error Boundary’nin fallback içeriği gösterilir.
 
 #### Parametreler {/*parameters*/}
 
@@ -324,27 +320,18 @@ Ancak bir [Sunucu Bileşeninde](/reference/rsc/server-components) `await` kullan
 
 Bazen `use`'a aktarılan Promise reddedilebilir. Reddedilen Promise'leri şu şekilde yönetebilirsiniz:
 
-<<<<<<< HEAD
-1. [Kullanıcıya hata sınırlayıcısı kullanarak hata göstermek.](#displaying-an-error-to-users-with-error-boundary)
-2. [`Promise.catch` methodunu kullanarak alternatif bir veri sunmak](#providing-an-alternative-value-with-promise-catch)
-=======
-1. [Displaying an error to users with an Error Boundary.](#displaying-an-error-to-users-with-error-boundary)
-2. [Providing an alternative value with `Promise.catch`](#providing-an-alternative-value-with-promise-catch)
->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72
+1. [Error Boundary ile kullanıcılara hata gösterme](#displaying-an-error-to-users-with-error-boundary)
+2. [`Promise.catch` ile alternatif değer sağlama](#providing-an-alternative-value-with-promise-catch)
 
 <Pitfall>
 `use`, try-catch bloğu içerisinde çağırılamaz. Try-catch bloğu yerine [bileşeni Error Boundary içerisine ekleyin](#displaying-an-error-to-users-with-error-boundary), ya da [Promise'in `.catch` methodundan yararlanarak alternatif bir değer sağlayın](#providing-an-alternative-value-with-promise-catch).
 </Pitfall>
 
-<<<<<<< HEAD
-#### Kullanıcıya hata sınırlayıcısı kullanarak hata göstermek {/*displaying-an-error-to-users-with-error-boundary*/}
+#### Error Boundary ile kullanıcılara hata gösterme {/*displaying-an-error-to-users-with-error-boundary*/}
 
-Eğer bir Promise reddedildiğinde kullanıcılarına hata göstermek istersen [hata sınırlayıcısını](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) kullanabilirsin. Bir hata sınırlayıcı kullanmak için `use` API'ını çağırdığınız bir bileşeni Error Boundary içerisine koyun. Eğer `use`'a iletilen Promise reddedilirse hata sınırlayıcı aracılığı ile yedek görünüm görüntülenecektir.
-=======
-#### Displaying an error to users with an Error Boundary {/*displaying-an-error-to-users-with-error-boundary*/}
-
-If you'd like to display an error to your users when a Promise is rejected, you can use an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an Error Boundary, wrap the component where you are calling the `use` API in an Error Boundary. If the Promise passed to `use` is rejected the fallback for the Error Boundary will be displayed.
->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72
+Bir Promise reddedildiğinde kullanıcıya hata göstermek istiyorsanız, [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) kullanabilirsiniz.  
+Error Boundary kullanmak için, `use` API’sini çağırdığınız bileşeni bir Error Boundary ile sarın.  
+Eğer `use` fonksiyonuna iletilen Promise reddedilirse, Error Boundary için tanımlanan fallback içerik görüntülenecektir.
 
 <Sandpack>
 
@@ -455,11 +442,9 @@ Promise'in <CodeStep step={1}>`catch`</CodeStep> methodunu kullanmak için Promi
 
 ### "Suspense İstisnası: Bu gerçek bir hata değil!" {/*suspense-exception-error*/}
 
-<<<<<<< HEAD
-`use` ya bir React Bileşeni ya da Hook fonksiyonu dışında veya try-catch bloğu içerisinde çağırılıyor. Eğer try-catch bloğu içerisinde `use` çağırıyorsanız bileşeni hata sınırlandırıcı içerisine koyun veya hata yakalamak ve alternatif değer ile çözümlemek için Promise'in `catch` methodunu çağırın. [Bu örneği inceleyin](#dealing-with-rejected-promises)
-=======
-You are either calling `use` outside of a React Component or Hook function, or calling `use` in a try–catch block. If you are calling `use` inside a try–catch block, wrap your component in an Error Boundary, or call the Promise's `catch` to catch the error and resolve the Promise with another value. [See these examples](#dealing-with-rejected-promises).
->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72
+Ya `use` fonksiyonunu bir **React Component** veya **Hook** fonksiyonu dışında çağırıyorsunuz,  
+ya da `use`’u bir **try–catch** bloğu içinde çağırıyorsunuz. Eğer `use`’u bir try–catch bloğu içinde çağırıyorsanız, bileşeninizi bir **Error Boundary** ile sarın,  
+veya Promise’in `catch` metodunu kullanarak hatayı yakalayın ve Promise’i başka bir değerle çözümleyin (**resolve edin**). [Bu örneklere bakın](#dealing-with-rejected-promises).
 
 Eğer `use`'u bir React Bileşeni veya Hook fonksiyonu dışında çağırıyorsanız `use` çağrısını bir React Bileşeni veya Hook fonksiyonu içerisine taşıyın.