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
Binary file removed public/images/tutorial/codesandbox-devtools.png
Binary file not shown.
Binary file added public/images/tutorial/components-tab.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/tutorial/devtools-inspect.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/images/tutorial/devtools-select.gif
Binary file not shown.
Binary file added public/images/tutorial/sandbox-new-tab.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 8 additions & 7 deletions src/content/learn/tutorial-tic-tac-toe.md
Original file line number Diff line number Diff line change
Expand Up @@ -899,19 +899,20 @@ body {

### React Geliştirici Araçları {/*react-developer-tools*/}

React DevTools, React bileşenlerinizin prop'larını ve state'ini kontrol etmenize olanak sağlar. React DevTools sekmesini CodeSandbox'ın _browser_ bölümünün en altında bulabilirsiniz:
React Developer Tools, React component’lerinizin props ve stateini kontrol etmenizi sağlar. [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) ve [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension olarak kullanılabilir.

![CodeSandbox'ta React DevTools](../images/tutorial/codesandbox-devtools.png)
Yükledikten sonra, React kullanan siteler için browser Developer Tools içinde yeni bir *Components* tab’ı görünür. CodeSandbox’ta takip ediyorsanız, önce sandbox preview’unuzu yeni bir tab’da açmanız gerekir:

Ekrandaki herhangi bir bileşeni incelemek için, React DevTools'un sol üst köşesindeki butonu kullanın:
![yeni tab’da açma](../images/tutorial/sandbox-new-tab.png)

![React DevTools kullanarak ekrandaki bileşenleri seçmek](../images/tutorial/devtools-select.gif)
Ardından preview sayfasında browser’ınızın DevTools’unu açın ve *Components* tab’ını bulun:

<Note>
![components tab](../images/tutorial/components-tab.png)

Yerel geliştirme için, React DevTools, [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) ve [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) tarayıcılarında eklentiye sahiptir. Eklentiyi kurun ve React kullanan sitelerde tarayıcınızın Geliştirici Araçlarında *Components(bileşenler)* sekmesi gözükecektir.
Ekrandaki belirli bir component’i inspect etmek için Components tab’ının sol üst köşesindeki button’u kullanın:

![devtools ile inspect etme](../images/tutorial/devtools-inspect.gif)

</Note>

## Oyunu tamamlama {/*completing-the-game*/}

Expand Down
152 changes: 76 additions & 76 deletions src/content/reference/react/Fragment.md

Large diffs are not rendered by default.

64 changes: 33 additions & 31 deletions src/content/reference/react/use.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@ function Button() {
```
Diğer React Hook'ların aksine, Döngülerin ve `if` gibi koşullu ifadeler içerisinde `use` kullanılabilir. Diğer React Hook'lar gibi, `use` kullanan fonksiyon bir Bileşen veya Hook olmalıdır.

[Daha fazla örneği aşağıda görün.](#usage-context)
[See more examples below.](#usage-context)

#### Parametreler {/*context-parameters*/}
#### Parameters {/*context-parameters*/}

* `context`: [`createContext`](/reference/react/createContext) ile oluşturulmuş bir [context](/learn/passing-data-deeply-with-context).
* `context`: A [context](/learn/passing-data-deeply-with-context) created with [`createContext`](/reference/react/createContext).

#### Döndürür {/*context-returns*/}
#### Returns {/*context-returns*/}

Geçirilen context için context value’yu döndürür; bu değer, çağrıyı yapan component’in üstündeki en yakın context provider tarafından belirlenir. Eğer provider yoksa, döndürülen değer [`createContext`](/reference/react/createContext)’e geçirilen `defaultValue` olur.

Expand All @@ -60,28 +60,28 @@ function MessageComponent({ messagePromise }) {
// ...
```

If the component that calls `use` is wrapped in a [Suspense](/reference/react/Suspense) boundary, the fallback will be displayed while the Promise is pending. Once the Promise is resolved, the Suspense fallback is replaced by the rendered components using the data returned by `use`. If the Promise is rejected, the fallback of the nearest [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) will be displayed.
`use` çağıran component bir [Suspense](/reference/react/Suspense) boundary’si ile sarılmışsa, Promise pending durumdayken fallback gösterilir. Promise resolve edildiğinde, Suspense fallback’i `use` tarafından döndürülen data’yı kullanan rendered component’lerle değiştirilir. Promise rejected olursa, en yakın [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary)’nin fallback’i gösterilir.

[See more examples below.](#usage-promises)
[Daha fazla örneği aşağıda görün.](#usage-promises)

#### Parameters {/*promise-parameters*/}
#### Parametreler {/*promise-parameters*/}

* `promise`: A [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) whose resolved value you want to read. The Promise must be [cached](#caching-promises-for-client-components) so that the same instance is reused across re-renders.
* `promise`: Resolved value’sunu okumak istediğiniz bir [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Promise, re-render’lar arasında aynı instance’ın yeniden kullanılabilmesi için [cache’lenmiş](#caching-promises-for-client-components) olmalıdır.

#### Returns {/*promise-returns*/}

The resolved value of the Promise.
Promise’in resolved value’su.

#### Caveats {/*promise-caveats*/}
#### Uyarılar {/*promise-caveats*/}

* `use` must be called inside a Component or a Hook.
* `use` cannot be called inside a try-catch block. Instead, wrap your component in an [Error Boundary](#displaying-an-error-with-an-error-boundary) to catch the error and display a fallback.
* Promises passed to `use` must be cached so the same Promise instance is reused across re-renders. [See caching Promises below.](#caching-promises-for-client-components)
* When passing a Promise from a Server Component to a Client Component, its resolved value must be [serializable](/reference/rsc/use-client#serializable-types).
* `use`, bir Component veya Hook içinde çağrılmalıdır.
* `use`, try-catch block’u içinde çağrılamaz. Bunun yerine, error’ı yakalamak ve fallback göstermek için component’inizi bir [Error Boundary](#displaying-an-error-with-an-error-boundary) ile sarın.
* `use`’a geçirilen Promise’ler, aynı Promise instance’ının re-render’lar arasında yeniden kullanılabilmesi için cache’lenmelidir. [Aşağıdaki Promise cache’leme bölümüne bakın.](#caching-promises-for-client-components)
* Bir Server Component’ten bir Client Component’e Promise geçirirken, resolved value’su [serializable](/reference/rsc/use-client#serializable-types) olmalıdır.

---

## Usage (Context) {/*usage-context*/}
## Kullanım (Context) {/*usage-context*/}

### `use` ile context okumak {/*reading-context-with-use*/}

Expand Down Expand Up @@ -237,13 +237,13 @@ function Profile() {
}
```

Reading the value requires two `use` calls because the context value itself isn't awaited. See [Before you use context](/learn/passing-data-deeply-with-context#before-you-use-context) for alternatives to consider before reaching for context.
Değeri okumak iki `use` çağrısı gerektirir çünkü context value’nun kendisi await edilmez. Context’e başvurmadan önce değerlendirilebilecek alternatifler için [Context’i kullanmadan önce](/learn/passing-data-deeply-with-context#before-you-use-context) bölümüne bakın.

Wrap the components that read the Promise in a [Suspense](/reference/react/Suspense) boundary so only that subtree suspends while the Promise is pending. See [Usage (Promises)](#usage-promises) below for more on reading Promises with `use`.
Promise’i okuyan component’leri bir [Suspense](/reference/react/Suspense) boundary’si ile sarın; böylece Promise pending durumdayken yalnızca o subtree suspend olur. `use` ile Promise okuma hakkında daha fazlası için aşağıdaki [Kullanım (Promises)](#usage-promises) bölümüne bakın.

<Pitfall>

When this pattern is used with [Server Components](/reference/rsc/server-components), refetching the Promise requires refetching the Server Component that sets the Promise in context. Avoid setting the Promise in context high in the tree, since that would refetch large parts of the app unnecessarily.
Bu pattern [Server Components](/reference/rsc/server-components) ile kullanıldığında, Promise’i refetch etmek context’te Promise’i ayarlayan Server Component’i refetch etmeyi gerektirir. Promise’i tree’nin yüksek seviyelerinde context’e koymaktan kaçının; çünkü bu, app’in büyük bölümlerini gereksiz yere refetch eder.

</Pitfall>

Expand Down Expand Up @@ -1141,6 +1141,7 @@ export default function App() {
```js
// Client Component
'use client';

import { use } from 'react';

export function Message({ messagePromise }) {
Expand All @@ -1160,11 +1161,11 @@ Her iki durumda da, Promise’i okuyan component’i bir Suspense boundary ile s

---

### Error Boundary ile hata gösterme {/*displaying-an-error-with-an-error-boundary*/}
### Displaying an error with an Error Boundary {/*displaying-an-error-with-an-error-boundary*/}

`use`’a geçirilen Promise rejected olursa, error en yakın [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary)’ye propagate edilir. Promise rejected olduğunda bir fallback göstermek için `use` çağıran component’i bir Error Boundary ile sarın.
If the Promise passed to `use` is rejected, the error propagates to the nearest [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Wrap the component that calls `use` in an Error Boundary to display a fallback when the Promise is rejected.

Aşağıdaki örnekte, `fetchData` ilk denemede reject olur ve retry sırasında başarılı olur. Error Boundary rejection’ı yakalar ve "Try again" button’u olan bir fallback gösterir.
In the example below, `fetchData` rejects on the first attempt and succeeds on retry. The Error Boundary catches the rejection and shows a fallback with a "Try again" button.

<Sandpack>

Expand All @@ -1190,7 +1191,7 @@ export default function App() {
fallbackRender={() => (
<>
<p>⚠️ Albümler yüklenirken bir sorun oluştu.</p>
<button onClick={handleRetry}>Tekrar deneyin</button>
<button onClick={handleRetry}>Tekrar dene</button>
</>
)}
>
Expand All @@ -1216,9 +1217,9 @@ function Albums({ albumsPromise }) {
```

```js src/data.js hidden
// Not: data fetching’i nasıl yapacağınız,
// Suspense ile birlikte kullandığınız framework’e bağlıdır.
// Normalde caching logic bir framework içinde olur.
// Note: the way you would do data fetching depends on
// the framework that you use together with Suspense.
// Normally, the caching logic would be inside a framework.

let cache = new Map();
let retried = false;
Expand Down Expand Up @@ -1291,7 +1292,7 @@ async function getData(url) {
```jsx
function Albums({ albumsPromise }) {
try {
// ❌ Don't wrap `use` in try-catch
// ❌ `use`’u try-catch içinde sarmayın
const albums = use(albumsPromise);
} catch (e) {
return <p>Error</p>;
Expand All @@ -1303,13 +1304,13 @@ Bunun yerine, component’i bir Error Boundary ile sarın:

```jsx
function Albums({ albumsPromise }) {
// ✅ Call `use` without try-catch
// ✅ `use`’u try-catch olmadan çağırın
const albums = use(albumsPromise);
// ...
```

```jsx
// ✅ Use an Error Boundary to handle errors
// ✅ Error’ları handle etmek için bir Error Boundary kullanın
<ErrorBoundary fallback={<p>Error</p>}>
<Albums albumsPromise={albumsPromise} />
</ErrorBoundary>
Expand All @@ -1325,17 +1326,18 @@ Bu durum genellikle render sırasında doğrudan `fetch` veya bir `async` functi

```js
function Albums() {
// 🔴 This creates a new Promise on every render
// 🔴 Bu, her render’da yeni bir Promise oluşturur
const albums = use(fetch('/albums'));

// ...
}
```

Bunu düzeltmek için, aynı instance’ın yeniden kullanılmasını sağlayacak şekilde Promise’i cache’leyin:

```js
// ✅ fetchData returns the same Promise for the same URL
// ✅ fetchData aynı URL için aynı Promise’i döndürür
const albums = use(fetchData('/albums'));
```

Daha fazla detay için [Client Components için Promise cache’leme](#caching-promises-for-client-components) bölümüne bakın.
Daha fazla detay için [Client Components için Promise cache’leme](#caching-promises-for-client-components) bölümüne bakın.
4 changes: 2 additions & 2 deletions src/content/reference/react/useContext.md
Original file line number Diff line number Diff line change
Expand Up @@ -826,7 +826,7 @@ const initialTasks = [
```

```js src/AddTask.js
import { useState, useContext } from 'react';
import { useState } from 'react';
import { useTasksDispatch } from './TasksContext.js';

export default function AddTask() {
Expand Down Expand Up @@ -855,7 +855,7 @@ let nextId = 3;
```

```js src/TaskList.js
import { useState, useContext } from 'react';
import { useState } from 'react';
import { useTasks, useTasksDispatch } from './TasksContext.js';

export default function TaskList() {
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/useLayoutEffect.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ function Tooltip() {

#### Parametreler {/*parameters*/}

* `setup`: Effect mantığınızı içeren fonksiyon. setup fonksiyonunuz isteğe bağlı olarak bir *cleanup* fonksiyonu da döndürebilir. Component’iniz DOM’a [commit ettikten](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom) sonra ve browser ekranı yeniden paint etmeden önce, React setup fonksiyonunuzu çalıştırır. Değişen dependency’lerle gerçekleşen her commit’ten sonra React önce eski değerlerle cleanup fonksiyonunu çalıştırır (eğer sağladıysanız), ardından yeni değerlerle setup fonksiyonunuzu çalıştırır. Component’iniz DOM’dan kaldırılmadan önce React cleanup fonksiyonunuzu çalıştırır.
* `setup`: Effect mantığınızı içeren fonksiyon. setup fonksiyonunuz isteğe bağlı olarak bir **cleanup** fonksiyonu da döndürebilir. Component’iniz DOM’a [commit ettikten](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom) sonra ve browser ekranı yeniden paint etmeden önce, React setup fonksiyonunuzu çalıştırır. Değişen dependency’lerle gerçekleşen her commit’ten sonra React önce eski değerlerle cleanup fonksiyonunu çalıştırır (eğer sağladıysanız), ardından yeni değerlerle setup fonksiyonunuzu çalıştırır. Component’iniz DOM’dan kaldırılmadan önce React cleanup fonksiyonunuzu çalıştırır.

* **opsiyonel** `dependencies`: `setup` kodu içinde referans verilen tüm reactive value’ların listesidir. Reactive value’lar; props, state ve bileşen gövdesi içinde doğrudan tanımlanan tüm değişkenler ve fonksiyonları kapsar. Eğer linter’ınız [React için yapılandırılmışsa](/learn/editor-setup#linting), her reactive value’nun dependency olarak doğru şekilde belirtildiğini doğrular. Dependency listesi sabit sayıda öğe içermeli ve `[dep1, dep2, dep3]` şeklinde inline olarak yazılmalıdır. React, her bir dependency’yi önceki değeriyle [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) karşılaştırması kullanarak kıyaslar. Bu argümanı atladığınızda, Effect’iniz bileşenin her commit’inden sonra yeniden çalışır.

Expand Down
17 changes: 16 additions & 1 deletion src/content/versions.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,28 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev).
- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=IBBN-s77YSI)

**Releases**
- [v19.2.1 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1922-dec-11-2025)
- [v19.2.7 (June, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1927-june-1-2026)
- [v19.2.6 (May, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1926-may-6-2026)
- [v19.2.5 (March, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1925-march-18-2026)
- [v19.2.4 (January, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1924-jan-26-2026)
- [v19.2.3 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1923-dec-11-2025)
- [v19.2.2 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1922-dec-11-2025)
- [v19.2.1 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1921-dec-3-2025)
- [v19.2.0 (October, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1920-october-1st-2025)
- [v19.1.8 (June, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1918-june-1-2026)
- [v19.1.7 (May, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1917-may-6-2026)
- [v19.1.6 (March, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1916-march-18-2026)
- [v19.1.5 (January, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1915-jan-26-2026)
- [v19.1.4 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1914-dec-11-2025)
- [v19.1.3 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1913-dec-11-2025)
- [v19.1.2 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1912-dec-3-2025)
- [v19.1.1 (July, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1911-july-28-2025)
- [v19.1.0 (March, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1910-march-28-2025)
- [v19.0.7 (June, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1907-june-1-2026)
- [v19.0.6 (May, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1906-may-6-2026)
- [v19.0.5 (March, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1905-march-18-2026)
- [v19.0.4 (January, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1904-jan-26-2026)
- [v19.0.3 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1903-dec-11-2025)
- [v19.0.2 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1902-dec-11-2025)
- [v19.0.1 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1901-dec-3-2025)
- [v19.0.0 (December, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024)
Expand Down
Loading