diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index ef569dffe..b70ab9180 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -247,11 +247,11 @@ export function HomeContent() {
Bir framework ile tam özellikli geliştirmeler yapın
- 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 Next.js veya{' '} React Router{' '} kullanmanızı öneririz. diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 05aab6b25..447cfff7e 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -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. diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 70fd87855..78aeb4bb3 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -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. diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index 0be7468e8..cbe323929 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -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 `` 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 `` 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 `` sınırı içine alın: diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md index b9f94d115..e75b28d15 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -5,9 +5,7 @@ title: "Yerleşik React API'leri" [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. diff --git a/src/content/reference/react/components.md b/src/content/reference/react/components.md index ca84abaca..8ac5d2286 100644 --- a/src/content/reference/react/components.md +++ b/src/content/reference/react/components.md @@ -10,11 +10,13 @@ React, JSX'lerinizde kullanabileceğiniz birkaç yerleşik bileşeni sunar. --- -## Yerleşik react bileşenleri {/*built-in-components*/} -* [``](/reference/react/Fragment) bileşeni, alternatif olarak `<>...` şeklinde yazılır ve birden fazla JSX düğümünü bir araya getirmenize olanak tanır. -* [``](/reference/react/Profiler) bileşeni, bir React ağacının render performansını programlama yoluyla ölçmenizi sağlar. -* [``](/reference/react/Suspense) bileşeni, alt bileşenler yüklenirken bir yedek içerik görüntülemenizi sağlar. -* [``](/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*/} + +* [``](/reference/react/Fragment), alternatif olarak `<>...` şeklinde yazılabilir, birden fazla JSX düğümünü bir arada gruplamanızı sağlar. +* [``](/reference/react/Profiler), bir React ağacının render performansını programatik olarak ölçmenizi sağlar. +* [``](/reference/react/Suspense), alt bileşenler yüklenirken bir **fallback** içerik göstermeyi sağlar. +* [``](/reference/react/StrictMode), hataları erken bulmanıza yardımcı olan yalnızca geliştirme sırasında çalışan ekstra kontrolleri etkinleştirir. +* [``](/reference/react/Activity), çocuklarının kullanıcı arayüzünü (UI) ve iç durumunu gizlemenizi ve geri yüklemenizi sağlar. --- diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 60de834a4..5986418e1 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -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*/} @@ -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) @@ -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. @@ -455,10 +443,8 @@ Promise'in `catch` 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. diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md index 5efde9dc7..bb0173588 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -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. diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index 56aa0ee2c..7bcd4a000 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -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" }, {