From 5aeb338b281b4e341a202f05e83da9ff25e52b9a Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:03:46 +0300 Subject: [PATCH 01/12] Rules of React page --- src/content/reference/rules/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index dd5f7456c..25d411e33 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -1,9 +1,9 @@ --- -title: Rules of React +title: React Kuralları --- -Just as different programming languages have their own ways of expressing concepts, React has its own idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications. +Farklı programlama dillerinin kavramları ifade etmek için kendi yolları olduğu gibi, React'in de kalıpları anlaşılması kolay ve yüksek kaliteli uygulamalar üretecek şekilde ifade etmek için kendi deyimleri -veya kuralları- vardır. @@ -11,14 +11,14 @@ Just as different programming languages have their own ways of expressing concep --- -To learn more about expressing UIs with React, we recommend reading [Thinking in React](/learn/thinking-in-react). +React ile kullanıcı arayüzlerini ifade etme hakkında daha fazla bilgi edinmek için [React'te Düşünme](/learn/thinking-in-react) adresini okumanızı öneririz. -This section describes the rules you need to follow to write idiomatic React code. Writing idiomatic React code can help you write well organized, safe, and composable applications. These properties make your app more resilient to changes and makes it easier to work with other developers, libraries, and tools. +Bu bölümde deyimsel React kodu yazmak için izlemeniz gereken kurallar açıklanmaktadır. İdiyomatik React kodu yazmak, iyi organize edilmiş, güvenli ve birleştirilebilir uygulamalar yazmanıza yardımcı olabilir. Bu özellikler uygulamanızı değişikliklere karşı daha dayanıklı hale getirir ve diğer geliştiricilerle, kütüphanelerle ve araçlarla çalışmayı kolaylaştırır. -These rules are known as the **Rules of React**. They are rules – and not just guidelines – in the sense that if they are broken, your app likely has bugs. Your code also becomes unidiomatic and harder to understand and reason about. +Bu kurallar **React'in Kuralları** olarak bilinir. Bunlar kuraldır - sadece yönergeler değil - eğer ihlal edilirlerse, uygulamanızda muhtemelen hatalar olacaktır. Ayrıca kodunuz tekdüze hale gelir ve anlaşılması ve mantık yürütülmesi zorlaşır. -We strongly recommend using [Strict Mode](/reference/react/StrictMode) alongside React's [ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to help your codebase follow the Rules of React. By following the Rules of React, you'll be able to find and address these bugs and keep your application maintainable. +Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in [ESLint eklentisi](https://www.npmjs.com/package/eslint-plugin-react-hooks) ile birlikte [Strict Mode](/reference/react/StrictMode) kullanmanızı şiddetle tavsiye ederiz. React Kurallarını takip ederek bu hataları bulup giderebilir ve uygulamanızın sürdürülebilirliğini koruyabilirsiniz. --- From 34cf5cc5c02998d551a04a7b1de5dec4b11c2115 Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:05:40 +0300 Subject: [PATCH 02/12] Rules of React page --- src/content/reference/rules/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index 25d411e33..b39e8c20f 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -22,7 +22,7 @@ Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in --- -## Components and Hooks must be pure {/*components-and-hooks-must-be-pure*/} +## Bileşenler ve Hook'lar saf olmalıdır {/*components-and-hooks-must-be-pure*/} [Purity in Components and Hooks](/reference/rules/components-and-hooks-must-be-pure) is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code. From c0d3cb3cf3217cc7c7cdbaadb0fc808f1771e6ae Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:06:45 +0300 Subject: [PATCH 03/12] Rules of React page --- src/content/reference/rules/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index b39e8c20f..f909981da 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -24,7 +24,7 @@ Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in ## Bileşenler ve Hook'lar saf olmalıdır {/*components-and-hooks-must-be-pure*/} -[Purity in Components and Hooks](/reference/rules/components-and-hooks-must-be-pure) is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code. +[Bileşenlerde ve Hook'larda Saflık](/reference/rules/components-and-hooks-must-be-pure) React'in uygulamanızı öngörülebilir, hata ayıklaması kolay ve React'in kodunuzu otomatik olarak optimize etmesini sağlayan temel bir kuralıdır. * [Components must be idempotent](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – React components are assumed to always return the same output with respect to their inputs – props, state, and context. * [Side effects must run outside of render](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Side effects should not run in render, as React can render components multiple times to create the best possible user experience. From c90db294da4a4b61c0569b47555f2187d572c504 Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:08:17 +0300 Subject: [PATCH 04/12] Rules of React page --- src/content/reference/rules/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index f909981da..106a3669a 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -26,9 +26,9 @@ Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in [Bileşenlerde ve Hook'larda Saflık](/reference/rules/components-and-hooks-must-be-pure) React'in uygulamanızı öngörülebilir, hata ayıklaması kolay ve React'in kodunuzu otomatik olarak optimize etmesini sağlayan temel bir kuralıdır. -* [Components must be idempotent](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – React components are assumed to always return the same output with respect to their inputs – props, state, and context. -* [Side effects must run outside of render](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Side effects should not run in render, as React can render components multiple times to create the best possible user experience. -* [Props and state are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – A component’s props and state are immutable snapshots with respect to a single render. Never mutate them directly. +* [Bileşenler idempotent olmalıdır](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) - React bileşenlerinin girdilerine (props, state ve context) göre her zaman aynı çıktıyı döndürdüğü varsayılır. +* [Yan etkiler render dışında çalışmalıdır](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) - React, mümkün olan en iyi kullanıcı deneyimini oluşturmak için bileşenleri birden çok kez render edebileceğinden, yan etkiler render içinde çalışmamalıdır. +* [Props and state are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) - Bir bileşenin prop'ları ve state'i tek bir render'a göre değişmez anlık görüntülerdir. Bunları asla doğrudan değiştirmeyin. * [Return values and arguments to Hooks are immutable](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Once values are passed to a Hook, you should not modify them. Like props in JSX, values become immutable when passed to a Hook. * [Values are immutable after being passed to JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Don’t mutate values after they’ve been used in JSX. Move the mutation before the JSX is created. From 221bf34e65648b43f57d80df0e361776f45d77f9 Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:08:31 +0300 Subject: [PATCH 05/12] Rules of React page --- src/content/reference/rules/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index 106a3669a..f0c089a73 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -29,7 +29,7 @@ Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in * [Bileşenler idempotent olmalıdır](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) - React bileşenlerinin girdilerine (props, state ve context) göre her zaman aynı çıktıyı döndürdüğü varsayılır. * [Yan etkiler render dışında çalışmalıdır](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) - React, mümkün olan en iyi kullanıcı deneyimini oluşturmak için bileşenleri birden çok kez render edebileceğinden, yan etkiler render içinde çalışmamalıdır. * [Props and state are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) - Bir bileşenin prop'ları ve state'i tek bir render'a göre değişmez anlık görüntülerdir. Bunları asla doğrudan değiştirmeyin. -* [Return values and arguments to Hooks are immutable](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Once values are passed to a Hook, you should not modify them. Like props in JSX, values become immutable when passed to a Hook. +* [Hook'ların dönüş değerleri ve argümanları değişmezdir](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) - Değerler bir Hook'a aktarıldıktan sonra onları değiştirmemelisiniz. JSX'teki prop'lar gibi, değerler bir Hook'a aktarıldığında değişmez hale gelir. * [Values are immutable after being passed to JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Don’t mutate values after they’ve been used in JSX. Move the mutation before the JSX is created. --- From fb8acbd64bd1ce8317232f4368cebb845559050b Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:08:44 +0300 Subject: [PATCH 06/12] Rules of React page --- src/content/reference/rules/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index f0c089a73..4a305b8b2 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -30,7 +30,7 @@ Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in * [Yan etkiler render dışında çalışmalıdır](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) - React, mümkün olan en iyi kullanıcı deneyimini oluşturmak için bileşenleri birden çok kez render edebileceğinden, yan etkiler render içinde çalışmamalıdır. * [Props and state are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) - Bir bileşenin prop'ları ve state'i tek bir render'a göre değişmez anlık görüntülerdir. Bunları asla doğrudan değiştirmeyin. * [Hook'ların dönüş değerleri ve argümanları değişmezdir](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) - Değerler bir Hook'a aktarıldıktan sonra onları değiştirmemelisiniz. JSX'teki prop'lar gibi, değerler bir Hook'a aktarıldığında değişmez hale gelir. -* [Values are immutable after being passed to JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Don’t mutate values after they’ve been used in JSX. Move the mutation before the JSX is created. +* [Değerler JSX'e aktarıldıktan sonra değişmez](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) - JSX'te kullanıldıktan sonra değerleri mutasyona uğratmayın. Mutasyonu JSX oluşturulmadan önce taşıyın. --- From faa1cdfbe0859d62cb591e6444d5a0025b0ce6ed Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:09:01 +0300 Subject: [PATCH 07/12] Rules of React page --- src/content/reference/rules/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index 4a305b8b2..17f490a36 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -34,7 +34,7 @@ Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in --- -## React calls Components and Hooks {/*react-calls-components-and-hooks*/} +## React Bileşenleri ve Hook'ları çağırır {/*react-calls-components-and-hooks*/} [React is responsible for rendering components and hooks when necessary to optimize the user experience.](/reference/rules/react-calls-components-and-hooks) It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user. From 50c3d84f12d7015ae5264449e66f4a9d6e52b418 Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:09:35 +0300 Subject: [PATCH 08/12] Rules of React page --- src/content/reference/rules/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index 17f490a36..df3d0e9a2 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -36,9 +36,9 @@ Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in ## React Bileşenleri ve Hook'ları çağırır {/*react-calls-components-and-hooks*/} -[React is responsible for rendering components and hooks when necessary to optimize the user experience.](/reference/rules/react-calls-components-and-hooks) It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user. +[React, kullanıcı deneyimini optimize etmek için gerektiğinde bileşenleri ve hook'ları oluşturmaktan sorumludur](/reference/rules/react-calls-components-and-hooks) Bildirimseldir: React'e bileşeninizin mantığında neyi oluşturacağını söylersiniz ve React bunu kullanıcınıza en iyi nasıl göstereceğini bulur. -* [Never call component functions directly](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Components should only be used in JSX. Don’t call them as regular functions. +* [Asla bileşen fonksiyonlarını doğrudan çağırmayın](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) - Bileşenler yalnızca JSX içinde kullanılmalıdır. Onları normal fonksiyonlar olarak çağırmayın. * [Never pass around hooks as regular values](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – Hooks should only be called inside of components. Never pass it around as a regular value. --- From b88c719710802637b83db147608f521a248016af Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:10:10 +0300 Subject: [PATCH 09/12] Rules of React page --- src/content/reference/rules/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index df3d0e9a2..d59a99061 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -39,7 +39,7 @@ Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in [React, kullanıcı deneyimini optimize etmek için gerektiğinde bileşenleri ve hook'ları oluşturmaktan sorumludur](/reference/rules/react-calls-components-and-hooks) Bildirimseldir: React'e bileşeninizin mantığında neyi oluşturacağını söylersiniz ve React bunu kullanıcınıza en iyi nasıl göstereceğini bulur. * [Asla bileşen fonksiyonlarını doğrudan çağırmayın](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) - Bileşenler yalnızca JSX içinde kullanılmalıdır. Onları normal fonksiyonlar olarak çağırmayın. -* [Never pass around hooks as regular values](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – Hooks should only be called inside of components. Never pass it around as a regular value. +* [Hook'ları asla normal değerler olarak geçirmeyin](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) - Hook'lar yalnızca bileşenlerin içinde çağrılmalıdır. Asla normal bir değer olarak aktarmayın. --- From 5fb942c79924717fb7863d70d4267628f2110a61 Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:11:12 +0300 Subject: [PATCH 10/12] Rules of React page --- src/content/reference/rules/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index d59a99061..29ad2df1c 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -43,9 +43,9 @@ Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in --- -## Rules of Hooks {/*rules-of-hooks*/} +## Hook Kuralları {/*rules-of-hooks*/} -Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called. You need to follow the [Rules of Hooks](/reference/rules/rules-of-hooks) when using them. +Hook'lar JavaScript fonksiyonları kullanılarak tanımlanır, ancak nerede çağrılabilecekleri konusunda kısıtlamaları olan özel bir yeniden kullanılabilir UI mantığı türünü temsil ederler. Bunları kullanırken [Hook Kuralları](/reference/rules/rules-of-hooks) kurallarına uymanız gerekir. * [Only call Hooks at the top level](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. * [Only call Hooks from React functions](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Don’t call Hooks from regular JavaScript functions. From 4f21c6d469410fbeabdf2213ed70cbf9c3dee68d Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:11:28 +0300 Subject: [PATCH 11/12] Rules of React page --- src/content/reference/rules/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index 29ad2df1c..da678c50a 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -47,6 +47,6 @@ Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in Hook'lar JavaScript fonksiyonları kullanılarak tanımlanır, ancak nerede çağrılabilecekleri konusunda kısıtlamaları olan özel bir yeniden kullanılabilir UI mantığı türünü temsil ederler. Bunları kullanırken [Hook Kuralları](/reference/rules/rules-of-hooks) kurallarına uymanız gerekir. -* [Only call Hooks at the top level](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. +* [Hook'ları yalnızca en üst seviyede çağırın](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) - Hook'ları döngüler, koşullar veya iç içe geçmiş fonksiyonlar içinde çağırmayın. Bunun yerine, Hook'ları her zaman React fonksiyonunuzun en üst seviyesinde, herhangi bir erken dönüşten önce kullanın. * [Only call Hooks from React functions](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Don’t call Hooks from regular JavaScript functions. From 82a3395694ef8ff7e717a6bfe1f506111fa47867 Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Thu, 3 Apr 2025 00:11:39 +0300 Subject: [PATCH 12/12] Rules of React page --- src/content/reference/rules/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index da678c50a..b578d4db2 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -48,5 +48,5 @@ Kod tabanınızın React Kurallarına uymasına yardımcı olmak için React'in Hook'lar JavaScript fonksiyonları kullanılarak tanımlanır, ancak nerede çağrılabilecekleri konusunda kısıtlamaları olan özel bir yeniden kullanılabilir UI mantığı türünü temsil ederler. Bunları kullanırken [Hook Kuralları](/reference/rules/rules-of-hooks) kurallarına uymanız gerekir. * [Hook'ları yalnızca en üst seviyede çağırın](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) - Hook'ları döngüler, koşullar veya iç içe geçmiş fonksiyonlar içinde çağırmayın. Bunun yerine, Hook'ları her zaman React fonksiyonunuzun en üst seviyesinde, herhangi bir erken dönüşten önce kullanın. -* [Only call Hooks from React functions](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Don’t call Hooks from regular JavaScript functions. +* [Hook'ları sadece React fonksiyonlarından çağırın](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) - Hook'ları normal JavaScript fonksiyonlarından çağırmayın.