- Learn
+ Öğren
- Reference
+ Referans
- Community
+ Topluluk
Blog
diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md
index cec71ce8f..d2c226bbb 100644
--- a/src/content/reference/react/hooks.md
+++ b/src/content/reference/react/hooks.md
@@ -1,23 +1,22 @@
---
-title: "Built-in React Hooks"
+title: "Yerleşik React Hook'ları"
---
-*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
-
+*Hook'lar*, bileşenlerinizde farklı React özelliklerini kullanmanızı sağlar. Yerleşik Hook'ları kullanabilir ya da kendi Hook'larınızı oluşturmak için onları birleştirebilirsiniz. Bu sayfa, React'teki tüm yerleşik Hook'ları listeler.
---
-## State Hooks {/*state-hooks*/}
+## State Hook'ları {/*state-hooks*/}
-*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
+*State* bir bileşenin [kullanıcı girdisi gibi bir bilgiyi "hatırlamasını"](/learn/state-a-components-memory) sağlar. Örneğin, bir form bileşeni input değerini saklamak için state kullanabilirken, bir resim galerisi bileşeni de seçilen resim indeksini saklamak için state kullanabilir.
-To add state to a component, use one of these Hooks:
+Bir bileşene state eklemek için bu Hook'lardan birini kullanın:
-* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
-* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
+* [`useState`](/reference/react/useState) direkt olarak güncelleyebileceğiniz bir state değişkeni bildirir.
+* [`useReducer`](/reference/react/useReducer) [reducer fonksiyonu](/learn/extracting-state-logic-into-a-reducer) ile güncellenebilen bir state değişkeni bildirir.
```js
function ImageGallery() {
@@ -27,11 +26,11 @@ function ImageGallery() {
---
-## Context Hooks {/*context-hooks*/}
+## Context Hook'ları {/*context-hooks*/}
-*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
+*Context*, bir bileşenin [bilgiyi prop olarak geçirmeden uzaktaki üst bileşenlerden almasını](/learn/passing-props-to-a-component) sağlar. Örneğin, uygulamanızın en üst düzey bileşeni, derinliğine bakılmaksızın tüm alt bileşenlere geçerli UI temasını iletebilir.
-* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
+* [`useContext`](/reference/react/useContext) bir context değerini okur ve abone olur.
```js
function Button() {
@@ -41,12 +40,12 @@ function Button() {
---
-## Ref Hooks {/*ref-hooks*/}
+## Ref Hook'ları {/*ref-hooks*/}
-*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
+*Ref'ler* bir bileşenin [render için kullanılmayan bazı bilgileri](/learn/referencing-values-with-refs) (örneğin, bir DOM düğümü veya bir timeout ID) tutmasını sağlar. State ile farklı olarak, bir ref'i güncellemek bileşeninizi yeniden render etmez. Ref'ler, React paradigmasından kaçmak için kullanılır. Dahili tarayıcı API'lari gibi React dışı sistemlerle çalışmanız gerektiğinde kullanışlıdır.
-* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
-* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
+* [`useRef`](/reference/react/useRef) bir ref bildirir. İçinde herhangi bir değeri tutabilirsiniz, ancak genellikle bir DOM düğümü tutmak için kullanılır.
+* [`useImperativeHandle`](/reference/react/useImperativeHandle) bileşeninizin dışarıya açtığı bir ref'i özelleştirmenizi sağlar. Bu nadiren kullanılır.
```js
function Form() {
@@ -56,11 +55,11 @@ function Form() {
---
-## Effect Hooks {/*effect-hooks*/}
+## Efekt Hook'ları {/*effect-hooks*/}
-*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
+*Effect'ler*, bir bileşenin [harici sistemlere bağlanmasını ve onlarla senkronize olmasını](/learn/synchronizing-with-effects) sağlar. Bu sistemler; ağ, tarayıcı DOM'u, animasyonlar, farklı bir UI kütüphanesi kullanılarak yazılmış araçlar ve diğer React dışı kodları kapsar.
-* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
+* [`useEffect`](/reference/react/useEffect) bir bileşeni harici bir sisteme bağlar.
```js
function ChatRoom({ roomId }) {
@@ -72,23 +71,23 @@ function ChatRoom({ roomId }) {
// ...
```
-Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+Effekler React paradigmasından kaçmak için kullanılır. Uygulamanızın veri akışını düzenlemek için Efektleri kullanmayın. Eğer harici bir sistemle etkileşimde değilseniz, [bir Efekte ihtiyacınız olmayabilir.](/learn/you-might-not-need-an-effect)
-There are two rarely used variations of `useEffect` with differences in timing:
+Zamanlama noktasında farklılıları olan ve nadiren kullanılan iki `useEffect` varyasyonu vardır:
-* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
-* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
+* [`useLayoutEffect`](/reference/react/useLayoutEffect) tarayıcı ekrana tekrar çizim yapmadan önce çalışır. Yerleşim (layout) hesaplamalarını burada yapabilirsiniz.
+* [`useInsertionEffect`](/reference/react/useInsertionEffect) React DOM'a değişiklik yapmadan önce çalışır. Kütüphaneler bu noktada dinamik olarak CSS ekleyebilir.
---
-## Performance Hooks {/*performance-hooks*/}
+## Performans Hook'ları {/*performance-hooks*/}
-A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
+Tekrar render etme performansını optimize etmenin yaygın bir yolu da gereksiz işlemleri atlamaktır. Örneğin, React'e önbelleğe alınmış bir hesaplamayı yeniden kullanmasını veya verilerin, önceki render'dan bu yana değişmediyse, yeniden render edilmesini atlamasını söyleyebilirsiniz.
-To skip calculations and unnecessary re-rendering, use one of these Hooks:
+Hesaplamaları ve gereksiz yeniden render etmeleri atlamak için bu Hook'lardan birini kullanın:
-- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
-- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
+- [`useMemo`](/reference/react/useMemo); pahalı bir hesaplamanın sonucunu önbelleğe almanızı sağlar.
+- [`useCallback`](/reference/react/useCallback); bir fonksiyon tanımının, optimize edilmiş bir bileşene iletilmeden önce, önbelleğe alınmasını sağlar.
```js
function TodoList({ todos, tab, theme }) {
@@ -97,22 +96,22 @@ function TodoList({ todos, tab, theme }) {
}
```
-Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
+Bazen yeniden render etmeyi atlayamazsınız çünkü ekranın gerçekten güncellenmesi gerekir. Bu durumda, kullanıcı arayüzünü engellemesi gerekmeyen güncellemeleri (bir grafiği güncellemek gibi), eşzamanlı olması gereken güncellemelerden (örneğin bir inputa yazmak) ayırarak performansı artırabilirsiniz.
-To prioritize rendering, use one of these Hooks:
+Render etme işlemini önceliklendirmek için bu Hook'lardan birini kullanın:
-- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
-- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
+- [`useTransition`](/reference/react/useTransition) bir state geçişini engellemeyen (non-blocking) olarak işaretleyerek diğer güncellemelerin araya girmesine izin verir.
+- [`useDeferredValue`](/reference/react/useDeferredValue) arayüzün kritik olmayan bir kısmının güncellenmesini ertelemenize ve önce diğer bölümlerin güncellenmesine izin vermenize olanak sağlar.
---
-## Resource Hooks {/*resource-hooks*/}
+## Kaynak Hook'ları {/*resource-hooks*/}
-*Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context.
+*Kaynaklar* bir bileşenin, state'inin bir parçası olmadan da erişebileceği verilerdir. Örneğin, bir bileşen bir Promise'den bir mesajı veya bir context'ten stil bilgilerini okuyabilir.
-To read a value from a resource, use this Hook:
+Bir kaynaktan bir değer okumak için bu Hook'u kullanın:
-- [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+- [`use`](/reference/react/use) [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) ya da [context](/learn/passing-data-deeply-with-context) gibi bir kaynakğın değerini okumanızı sağlar.
```js
function MessageComponent({ messagePromise }) {
@@ -124,16 +123,16 @@ function MessageComponent({ messagePromise }) {
---
-## Other Hooks {/*other-hooks*/}
+## Diğer Hook'lar {/*other-hooks*/}
-These Hooks are mostly useful to library authors and aren't commonly used in the application code.
+Bu Hook'lar genellikle kütüphane geliştiricileri için kullanışlıdır ve uygulama kodlarında yaygın olarak kullanılmazlar.
-- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
-- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
-- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
+- [`useDebugValue`](/reference/react/useDebugValue) React DevTools'da, kendi yazdığınız hook için özel bir etiket belirlemenizi sağlar.
+- [`useId`](/reference/react/useId) bir bileşenin kendisiyle benzersiz bir ID ilişkilendirmesini sağlar. Genellikle erişilebilirlik API'ları ile kullanılır.
+- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) bir bileşenin harici bir depoya abone olmasını sağlar.
---
-## Your own Hooks {/*your-own-hooks*/}
+## Kendi Hook'larınız {/*your-own-hooks*/}
-You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
+Ayrıca, [kendi özel Hook'larınızı](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) JavaScript fonksiyonları olarak tanımlayabilirsiniz.
diff --git a/src/sidebarCommunity.json b/src/sidebarCommunity.json
index 6b3e4eca3..c408976c8 100644
--- a/src/sidebarCommunity.json
+++ b/src/sidebarCommunity.json
@@ -1,42 +1,42 @@
{
- "title": "Community",
+ "title": "Topluluk",
"path": "/community",
"routes": [
{
"hasSectionHeader": true,
- "sectionHeader": "GET INVOLVED"
+ "sectionHeader": "Dahil Olun"
},
{
- "title": "Community",
+ "title": "Topluluk",
"path": "/community",
"skipBreadcrumb": true,
"routes": [
{
- "title": "React Conferences",
+ "title": "React Konferansları",
"path": "/community/conferences"
},
{
- "title": "React Meetups",
+ "title": "React Buluşmaları",
"path": "/community/meetups"
},
{
- "title": "React Videos",
+ "title": "React Videoları",
"path": "/community/videos"
},
{
- "title": "Meet the Team",
+ "title": "Takımla Tanışın",
"path": "/community/team"
},
{
- "title": "Docs Contributors",
+ "title": "Dokümantasyon Ekibi",
"path": "/community/docs-contributors"
},
{
- "title": "Acknowledgements",
+ "title": "Katkıda Bulunanlar",
"path": "/community/acknowledgements"
},
{
- "title": "Versioning Policy",
+ "title": "Sürüm Politikası",
"path": "/community/versioning-policy"
}
]
diff --git a/src/sidebarHome.json b/src/sidebarHome.json
index 4509c26fc..0c95b61a8 100644
--- a/src/sidebarHome.json
+++ b/src/sidebarHome.json
@@ -1,37 +1,37 @@
{
- "title": "React Docs",
+ "title": "React Dokümantasyonu",
"path": "/",
"routes": [
{
"hasSectionHeader": true,
- "sectionHeader": "GET STARTED"
+ "sectionHeader": "Başlangıç"
},
{
- "title": "Quick Start",
+ "title": "Hızlı Başlangıç",
"path": "/learn"
},
{
- "title": "Installation",
+ "title": "Kurulum",
"path": "/learn/installation"
},
{
"hasSectionHeader": true,
- "sectionHeader": "LEARN REACT"
+ "sectionHeader": "REACT ÖĞRENİN"
},
{
- "title": "Describing the UI",
+ "title": "Kullanıcı Arayüzünü Tanımlama",
"path": "/learn/describing-the-ui"
},
{
- "title": "Adding Interactivity",
+ "title": "Etkileşim Ekleme",
"path": "/learn/adding-interactivity"
},
{
- "title": "Managing State",
+ "title": "State Yönetimi",
"path": "/learn/managing-state"
},
{
- "title": "Escape Hatches",
+ "title": "Kaçış Yolları",
"path": "/learn/escape-hatches"
},
{
@@ -39,19 +39,19 @@
"sectionHeader": "REACT API"
},
{
- "title": "Hooks",
+ "title": "Hook'lar",
"path": "/reference/react"
},
{
- "title": "Components",
+ "title": "Bileşenler",
"path": "/reference/react/components"
},
{
- "title": "APIs",
+ "title": "API'lar",
"path": "/reference/react/apis"
},
{
- "title": "Legacy APIs",
+ "title": "Eski API'lar",
"path": "/reference/react/legacy"
},
{
@@ -59,27 +59,27 @@
"sectionHeader": "REACT DOM API"
},
{
- "title": "Components",
+ "title": "Bileşenler",
"path": "/reference/react-dom/components"
},
{
- "title": "APIs",
+ "title": "API'lar",
"path": "/reference/react-dom"
},
{
- "title": "Client APIs",
+ "title": "Client API'ları",
"path": "/reference/react-dom/client"
},
{
- "title": "Server APIs",
+ "title": "Server API'ları",
"path": "/reference/react-dom/server"
},
{
"hasSectionHeader": true,
- "sectionHeader": "GET INVOLVED"
+ "sectionHeader": "DAHİL OLUN"
},
{
- "title": "React Community",
+ "title": "React Topluluğu",
"path": "/community"
},
{
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 2191bf7ba..d078e3fcc 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -1,57 +1,57 @@
{
- "title": "Learn React",
+ "title": "React Öğrenin",
"path": "/learn",
"routes": [
{
"hasSectionHeader": true,
- "sectionHeader": "GET STARTED"
+ "sectionHeader": "BAŞLARKEN"
},
{
- "title": "Quick Start",
+ "title": "Hızlı Başlangıç",
"path": "/learn",
"routes": [
{
- "title": "Tutorial: Tic-Tac-Toe",
+ "title": "Öğretici: Tic-Tac-Toe",
"path": "/learn/tutorial-tic-tac-toe"
},
{
- "title": "Thinking in React",
+ "title": "React'te Düşünmek",
"path": "/learn/thinking-in-react"
}
]
},
{
- "title": "Installation",
+ "title": "Kurulum",
"path": "/learn/installation",
"routes": [
{
- "title": "Start a New React Project",
+ "title": "Yeni Bir React Projesi Başlatma",
"path": "/learn/start-a-new-react-project"
},
{
- "title": "Add React to an Existing Project",
+ "title": "Varolan Bir Projeye React Eklemek",
"path": "/learn/add-react-to-an-existing-project"
},
{
- "title": "Editor Setup",
+ "title": "Editor Kurulumu",
"path": "/learn/editor-setup"
},
{
- "title": "Using TypeScript",
+ "title": "TypeScript Kullanımı",
"path": "/learn/typescript"
},
{
- "title": "React Developer Tools",
+ "title": "React Geliştirici Araçları",
"path": "/learn/react-developer-tools"
}
]
},
{
"hasSectionHeader": true,
- "sectionHeader": "LEARN REACT"
+ "sectionHeader": "REACT ÖĞRENİN"
},
{
- "title": "Describing the UI",
+ "title": "Kullanıcı Arayüzünü Tanımlama",
"tags": [],
"path": "/learn/describing-the-ui",
"routes": [
@@ -76,15 +76,15 @@
"path": "/learn/passing-props-to-a-component"
},
{
- "title": "Conditional Rendering",
+ "title": "Koşullu Olarak Render Etmek",
"path": "/learn/conditional-rendering"
},
{
- "title": "Rendering Lists",
+ "title": "Listeleri Render Etmek",
"path": "/learn/rendering-lists"
},
{
- "title": "Keeping Components Pure",
+ "title": "Bileşenleri Saf Tutmak",
"path": "/learn/keeping-components-pure"
},
{
@@ -94,7 +94,7 @@
]
},
{
- "title": "Adding Interactivity",
+ "title": "Etkileşim Eklemek",
"path": "/learn/adding-interactivity",
"tags": [],
"routes": [
@@ -103,33 +103,33 @@
"path": "/learn/responding-to-events"
},
{
- "title": "State: A Component's Memory",
+ "title": "State: Bir Bileşenin Hafızası",
"path": "/learn/state-a-components-memory"
},
{
- "title": "Render and Commit",
+ "title": "Render Et ve İşle",
"path": "/learn/render-and-commit"
},
{
- "title": "State as a Snapshot",
+ "title": "Anlık Görüntü Olarak State",
"path": "/learn/state-as-a-snapshot"
},
{
- "title": "Queueing a Series of State Updates",
+ "title": "State Güncellemelerinin Kuyruğa Alınması",
"path": "/learn/queueing-a-series-of-state-updates"
},
{
- "title": "Updating Objects in State",
+ "title": "State İçerisindeki Nesneleri Güncelleme",
"path": "/learn/updating-objects-in-state"
},
{
- "title": "Updating Arrays in State",
+ "title": "State İçerisindeki Dizileri Güncelleme",
"path": "/learn/updating-arrays-in-state"
}
]
},
{
- "title": "Managing State",
+ "title": "State'i Yönetmek",
"path": "/learn/managing-state",
"tags": [
"intermediate"
@@ -144,19 +144,19 @@
"path": "/learn/choosing-the-state-structure"
},
{
- "title": "Sharing State Between Components",
+ "title": "Bileşenler Arasında State Paylaşımı",
"path": "/learn/sharing-state-between-components"
},
{
- "title": "Preserving and Resetting State",
+ "title": "State'i Korumak ve Sıfırlamak",
"path": "/learn/preserving-and-resetting-state"
},
{
- "title": "Extracting State Logic into a Reducer",
+ "title": "State Mantığını Bir Reducer'a Aktarma",
"path": "/learn/extracting-state-logic-into-a-reducer"
},
{
- "title": "Passing Data Deeply with Context",
+ "title": "Context ile Veriyi Derinlemesine Aktarma",
"path": "/learn/passing-data-deeply-with-context"
},
{
@@ -166,18 +166,18 @@
]
},
{
- "title": "Escape Hatches",
+ "title": "Kaçış Yolları",
"path": "/learn/escape-hatches",
"tags": [
"advanced"
],
"routes": [
{
- "title": "Referencing Values with Refs",
+ "title": "Ref ile Değerlere Referans Verme",
"path": "/learn/referencing-values-with-refs"
},
{
- "title": "Manipulating the DOM with Refs",
+ "title": "Ref'ler ile DOM Manipülasyonu",
"path": "/learn/manipulating-the-dom-with-refs"
},
{
@@ -185,15 +185,15 @@
"path": "/learn/synchronizing-with-effects"
},
{
- "title": "You Might Not Need an Effect",
+ "title": "Bir Efekte İhtiyacınız Olmayabilir",
"path": "/learn/you-might-not-need-an-effect"
},
{
- "title": "Lifecycle of Reactive Effects",
+ "title": "Reacktif Efektlerin Yaşam Döngüsü",
"path": "/learn/lifecycle-of-reactive-effects"
},
{
- "title": "Separating Events from Effects",
+ "title": "Olayları Efektlerinden Ayırma",
"path": "/learn/separating-events-from-effects"
},
{
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 5a6556557..364efb14c 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -1,5 +1,5 @@
{
- "title": "API Reference",
+ "title": "API Referansı",
"path": "/reference/react",
"routes": [
{
@@ -7,11 +7,11 @@
"sectionHeader": "react@18.2.0"
},
{
- "title": "Overview",
+ "title": "Genel Bakış",
"path": "/reference/react"
},
{
- "title": "Hooks",
+ "title": "Hook'lar",
"path": "/reference/react/hooks",
"routes": [
{
@@ -88,7 +88,7 @@
]
},
{
- "title": "Components",
+ "title": "Bileşenler",
"path": "/reference/react/components",
"routes": [
{
@@ -110,7 +110,7 @@
]
},
{
- "title": "APIs",
+ "title": "API'lar",
"path": "/reference/react/apis",
"routes": [
{
@@ -151,7 +151,7 @@
]
},
{
- "title": "Directives",
+ "title": "Direktifler",
"path": "/reference/react/directives",
"canary": true,
"routes": [
@@ -172,7 +172,7 @@
"sectionHeader": "react-dom@18.2.0"
},
{
- "title": "Hooks",
+ "title": "Hook'lar",
"path": "/reference/react-dom/hooks",
"routes": [
{
@@ -188,7 +188,7 @@
]
},
{
- "title": "Components",
+ "title": "Bileşenler",
"path": "/reference/react-dom/components",
"routes": [
{
@@ -298,10 +298,10 @@
},
{
"hasSectionHeader": true,
- "sectionHeader": "Legacy APIs"
+ "sectionHeader": "Eski API'ları"
},
{
- "title": "Legacy React APIs",
+ "title": "Eski React API'ları",
"path": "/reference/react/legacy",
"routes": [
{