Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/components/Layout/HomeContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -247,11 +247,11 @@ export function HomeContent() {
<Center>
<Header>Bir framework ile tam özellikli geliştirmeler yapın</Header>
<Para>
React bir kütüphanedir. Bileşenleri (components) bir araya
getirmenizi sağlar, ancak routing (yönlendirme) ve data fetching
(veri çekme) işlemlerini nasıl yapmanız gerektiğini belirtmez.
React ile tam bir uygulama oluşturmak için, tam yığın (full-stack)
React framework’ü olarak
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.
Expand Down
8 changes: 3 additions & 5 deletions src/content/learn/thinking-in-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,11 @@ 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:

* **Programlama** — Yeni bir fonksiyon veya nesne oluşturup oluşturmamaya karar verirken kullandığınız teknikleri burada da uygulayın.
* **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 çok büyürse, daha küçük alt bileşenlere (subcomponents) ayrılmalıdır.

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.)

(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.
Expand Down
5 changes: 2 additions & 3 deletions src/content/learn/understanding-your-ui-as-a-tree.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,9 @@ React ve diğer birçok UI kütüphanesi, UI'ı bir ağaç olarak modeller. Uygu

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) aracılığıyla modellemek için ağaç yapıları kullanır.
Mobil platformlar da benzer şekilde, kendi **görünüm hiyerarşilerini (view hierarchy)** temsil etmek için ağaç yapılarından yararlanır.
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.">

Expand Down
7 changes: 2 additions & 5 deletions src/content/reference/react/Suspense.md
Original file line number Diff line number Diff line change
Expand Up @@ -2009,11 +2009,8 @@ 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.

İstemci (client) tarafında, 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örüntüler.

Ancak, istemci tarafında hata oluşmazsa, React kullanıcıya hatayı göstermez;
İ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:
Expand Down
4 changes: 1 addition & 3 deletions src/content/reference/react/apis.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ title: "Yerleşik React API'leri"
<Intro>

[Hooks](/reference/react/hooks) ve [Components](/reference/react/components)’e ek olarak,
`react` paketi bileşen tanımlamak için faydalı olan birkaç başka API daha dışa aktarır (**export eder**).

Bu sayfa, modern React API’lerinin geri kalanını listelemektedir.
`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>

Expand Down
12 changes: 7 additions & 5 deletions src/content/reference/react/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ React, JSX'lerinizde kullanabileceğiniz birkaç yerleşik bileşeni sunar.

---

## 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.
## 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.

---

Expand Down
26 changes: 6 additions & 20 deletions src/content/reference/react/use.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +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.

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 bekleme (**pending**) durumundayken *askıya alınır* (**suspend olur**).
Eğer bu bileşen bir **Suspense boundary** içine sarılmışsa, bu sırada tanımlanan **fallback** (yedek) içerik görüntülenir.

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** bileşeninin fallback içeriği görüntülenir.
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*/}

Expand Down Expand Up @@ -330,7 +320,7 @@ 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:

1. [Error Boundary ile kullanıcılara hata gösterme](#displaying-an-error-to-users-with-error-boundary)
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>
Expand All @@ -339,11 +329,9 @@ Bazen `use`'a aktarılan Promise reddedilebilir. Reddedilen Promise'leri şu şe

#### Error Boundary ile kullanıcılara hata gösterme {/*displaying-an-error-to-users-with-error-boundary*/}

Bir Promise reddedildiğinde kullanıcıya hata göstermek istiyorsanız,
[bir Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) kullanabilirsiniz.

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.
Eğer `use` fonksiyonuna iletilen Promise reddedilirse, Error Boundary için tanımlanan fallback içerik görüntülenecektir.

<Sandpack>

Expand Down Expand Up @@ -455,10 +443,8 @@ Promise'in <CodeStep step={1}>`catch`</CodeStep> methodunu kullanmak için Promi
### "Suspense İstisnası: Bu gerçek bir hata değil!" {/*suspense-exception-error*/}

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,
ya da Promise’in `catch` metodunu kullanarak hatayı yakalayın ve Promise’i başka bir değerle çözümlendirin (**resolve edin**). [Bu örneklere bakın](#dealing-with-rejected-promises).
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.

Expand Down
17 changes: 5 additions & 12 deletions src/content/reference/react/useCallback.md
Original file line number Diff line number Diff line change
Expand Up @@ -235,18 +235,11 @@ Diğer durumlarda fonksiyonları `useCallback`'e sarmanın hiçbir faydası olma

`useCallback`'in fonksiyon *oluşturmayı* engellemediğini unutmayın. Her zaman yeni fonksiyon oluşturursunuz (ve bu iyidir), ancak React bunu yok sayarak hiçbir şey değişmediği takdirde önbelleğe alınan fonksiyonu geri verir.

1. Bir bileşen diğer bileşenleri görsel olarak sarıyorsa, onun [JSX’i children olarak kabul etmesine](/learn/passing-props-to-a-component#passing-jsx-as-children) izin verin.
Böylece, sarmalayan bileşen kendi state’ini güncellediğinde, React çocuk bileşenlerin yeniden render edilmesine gerek olmadığını bilir.
2. Yerel (local) state kullanmayı tercih edin ve [state’i yukarı taşımayı (lift state up)](/learn/sharing-state-between-components) sadece gerektiği kadar yapın.
Formlar veya bir öğenin hover durumu gibi geçici (transient) state’leri ağacınızın en üstünde veya global state kütüphanesinde tutmayın.
3. [Render mantığınızı saf (pure) tutun.](/learn/keeping-components-pure)
Eğer bir bileşeni yeniden render etmek bir sorun yaratıyor veya göze çarpan bir görsel bozulma oluşturuyorsa, bu bileşeninizde bir hatadır!
Hatayı düzeltin, memoization eklemeye çalışmayın.
4. [State’i güncelleyen gereksiz Effect’lerden](/learn/you-might-not-need-an-effect) kaçının.
React uygulamalarındaki çoğu performans problemi, Effect’lerden kaynaklanan ve bileşenlerin tekrar tekrar render edilmesine neden olan güncelleme zincirlerinden oluşur.
5. Effect’lerinizden [gereksiz bağımlılıkları kaldırmaya](/learn/removing-effect-dependencies) çalışın.
Örneğin, memoization yerine, bazı obje veya fonksiyonları Effect’in içine veya bileşenin dışına taşımak çoğu zaman daha basittir.

1. Bir bileşen diğer bileşenleri görsel olarak sarıyorsa, onun [JSX’i children olarak kabul etmesine](/learn/passing-props-to-a-component#passing-jsx-as-children) izin verin. Böylece, sarmalayan bileşen kendi state’ini güncellediğinde, React çocuk bileşenlerin yeniden render edilmesine gerek olmadığını bilir.
2. Yerel (local) state kullanmayı tercih edin ve [state’i yukarı taşımayı (lift state up)](/learn/sharing-state-between-components) sadece gerektiği kadar yapın. Formlar veya bir öğenin hover durumu gibi geçici (transient) state’leri ağacınızın en üstünde veya global state kütüphanesinde tutmayın.
3. [Render mantığınızı saf (pure) tutun.](/learn/keeping-components-pure) Eğer bir bileşeni yeniden render etmek sorun yaratıyor veya göze çarpan bir görsel bozulma oluşturuyorsa, bu bileşeninizde bir hatadır! Hatayı düzeltin, memoization eklemeye çalışmayın.
4. [State’i güncelleyen gereksiz Effect’lerden](/learn/you-might-not-need-an-effect) kaçının. React uygulamalarındaki çoğu performans problemi, Effect’lerden kaynaklanan ve bileşenlerin tekrar tekrar render edilmesine neden olan güncelleme zincirlerinden oluşur.
5. Effect’lerinizden [gereksiz bağımlılıkları kaldırmaya](/learn/removing-effect-dependencies) çalışın. Örneğin, memoization yerine bazı obje veya fonksiyonları Effect’in içine veya bileşenin dışına taşımak çoğu zaman daha basittir.

1. Bir bileşen diğerlerini görsel olarak sardığında, [JSX'i alt bileşen (children) olarak kabul etmesine](/learn/passing-props-to-a-component#passing-jsx-as-children) izin verin. Böylece sarmalayıcı bileşen kendi state'ini güncellerse, React alt bileşenleri yeniden render etmesine gerek olmadığını bilir.
1. Yerel state'i tercih edin ve [state'i gereğinden fazla üst bileşene taşımayın.](/learn/sharing-state-between-components) Form gibi geçici state'leri veya bileşenin tıklanma durumunu ağacınızın en üstünde yada global state yönetim kütüphanesinde saklamayın.
Expand Down
2 changes: 1 addition & 1 deletion src/sidebarBlog.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"title": "React Compiler v1.0",
"titleForHomepage": "React Compiler v1.0",
"icon": "blog",
"date": "October 8, 2025",
"date": "October 7, 2025",
"path": "/blog/2025/10/07/react-compiler-1"
},
{
Expand Down