From 2dd01d64a3217018d47000dbe84e1c489433bf8a Mon Sep 17 00:00:00 2001 From: Alper Erdogan Date: Sat, 27 Jan 2024 20:57:26 +0300 Subject: [PATCH 1/5] feat: translate createRoot --- .../reference/react-dom/client/createRoot.md | 192 +++++++++--------- 1 file changed, 96 insertions(+), 96 deletions(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index afddb4177..89300dbf4 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -4,7 +4,7 @@ title: createRoot -`createRoot` lets you create a root to display React components inside a browser DOM node. +`createRoot` React bileşenlerini bir tarayıcı DOM düğümü içinde görüntülemek için bir kök oluşturmanızı sağlar. ```js const root = createRoot(domNode, options?) @@ -16,11 +16,11 @@ const root = createRoot(domNode, options?) --- -## Reference {/*reference*/} +## Başvuru dokümanı {/*reference*/} ### `createRoot(domNode, options?)` {/*createroot*/} -Call `createRoot` to create a React root for displaying content inside a browser DOM element. +İçeriği bir tarayıcı DOM öğesi içinde görüntülemek üzere bir React kökü oluşturmak için `createRoot` çağrısı yapın. ```js import { createRoot } from 'react-dom/client'; @@ -29,104 +29,104 @@ const domNode = document.getElementById('root'); const root = createRoot(domNode); ``` -React will create a root for the `domNode`, and take over managing the DOM inside it. After you've created a root, you need to call [`root.render`](#root-render) to display a React component inside of it: +React, `domNode` için bir kök oluşturacak ve içindeki DOM'un yönetimini üstlenecek. Bir kök oluşturduktan sonra, içinde bir React bileşeni görüntülemek için [`root.render`](#root-render) çağırmanız gerekir: ```js root.render(); ``` -An app fully built with React will usually only have one `createRoot` call for its root component. A page that uses "sprinkles" of React for parts of the page may have as many separate roots as needed. +Tamamen React ile oluşturulmuş bir uygulama genellikle kök bileşeni için yalnızca bir `createRoot` çağrısına sahip olacaktır. Sayfanın bazı bölümleri için React "serpintileri" kullanan bir sayfa, ihtiyaç duyulan kadar çok sayıda ayrı köke sahip olabilir. -[See more examples below.](#usage) +[Daha fazla örnek için aşağıya bakın.](#usage) -#### Parameters {/*parameters*/} +#### Parametreler {/*parameters*/} -* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will create a root for this DOM element and allow you to call functions on the root, such as `render` to display rendered React content. +* `domNode`: React bu [DOM elemanı](https://developer.mozilla.org/en-US/docs/Web/API/Element) için bir kök oluşturacak ve işlenmiş React içeriğini görüntülemek için `render` gibi kök üzerinde fonksiyonlar çağırmanıza izin verecektir. -* **optional** `options`: An object with options for this React root. +* **opsiyonel** `options`: Bu React kökü için seçenekler içeren bir nesne. - * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. + * **opsiyonel** `onRecoverableError`: React'in hatalardan otomatik olarak kurtulduğunda çağrılan geri arama fonksiyonu. + * **opsiyonel** `identifierPrefix`: [`useId`](/reference/react/useId) tarafından oluşturulan kimlikler için React'in kullandığı bir dize öneki. Aynı sayfada birden fazla kök kullanırken çakışmaları önlemek için kullanışlıdır. -#### Returns {/*returns*/} +#### Geri dönüşler {/*returns*/} -`createRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount) +`createRoot` [`render`](#root-render) ve [`unmount`](#root-unmount) olmak üzere iki yöntem içeren bir nesne döndürür. -#### Caveats {/*caveats*/} -* If your app is server-rendered, using `createRoot()` is not supported. Use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead. -* You'll likely have only one `createRoot` call in your app. If you use a framework, it might do this call for you. -* When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `createRoot`. +#### Uyarılar {/*caveats*/} +* Uygulamanız sunucu tarafından oluşturulmuşsa, `createRoot()` kullanımı desteklenmez. Bunun yerine [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) kullanın. +* Uygulamanızda muhtemelen yalnızca bir `createRoot` çağrısı olacaktır. Eğer bir framework kullanıyorsanız, bu çağrıyı sizin için yapabilir. +* Bileşeninizin alt öğesi olmayan DOM ağacının farklı bir bölümünde bir JSX parçası oluşturmak istediğinizde (örneğin, bir modal veya bir araç ipucu), `createRoot` yerine [`createPortal`](/reference/react-dom/createPortal) kullanın. --- ### `root.render(reactNode)` {/*root-render*/} -Call `root.render` to display a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into the React root's browser DOM node. +React root'un tarayıcı DOM düğümünde bir [JSX](/learn/writing-markup-with-jsx) parçası görüntülemek için `root.render` çağrısı yapın. ```js root.render(); ``` -React will display `` in the `root`, and take over managing the DOM inside it. +React, `root` içinde `` gösterecek ve içindeki DOM'un yönetimini üstlenecektir. -[See more examples below.](#usage) +[Daha fazla örnek için aşağıya bakın.](#usage) -#### Parameters {/*root-render-parameters*/} +#### Parametreler {/*root-render-parameters*/} -* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like ``, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`. +* Parametreler`reactNode`: Görüntülemek istediğiniz bir *React düğümü*. Bu genellikle `` gibi bir JSX parçası olacaktır, ancak [`createElement()`](/reference/react/createElement) ile oluşturulmuş bir React öğesi, bir dize, bir sayı, `null` veya `undefined` da iletebilirsiniz. -#### Returns {/*root-render-returns*/} +#### Geri dönüşler {/*root-render-returns*/} -`root.render` returns `undefined`. +`root.render` `undefined` değerini döndürür. -#### Caveats {/*root-render-caveats*/} +#### Uyarılar {/*root-render-caveats*/} -* The first time you call `root.render`, React will clear all the existing HTML content inside the React root before rendering the React component into it. +* İlk kez `root.render` fonksiyonunu çağırdığınız zaman. React, React bileşenini içine render etmeden önce React kökü içindeki mevcut tüm HTML içeriğini temizleyecektir. -* If your root's DOM node contains HTML generated by React on the server or during the build, use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead, which attaches the event handlers to the existing HTML. +* Kök DOM düğümünüz sunucuda veya derleme sırasında React tarafından oluşturulan HTML içeriyorsa, bunun yerine olay işleyicilerini mevcut HTML'ye ekleyen [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) işlevini kullanın. -* If you call `render` on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates. +* Aynı kök üzerinde birden fazla kez `render` çağrısı yaparsanız, React ilettiğiniz en son JSX'i yansıtmak için DOM'u gerektiği gibi güncelleyecektir. React, DOM'un hangi bölümlerinin yeniden kullanılabileceğine ve hangilerinin yeniden oluşturulması gerektiğine ["eşleştirerek"](/learn/preserving-and-resetting-state) daha önce oluşturulmuş ağaçla karar verecektir. Aynı kök üzerinde `render` fonksiyonunu tekrar çağırmak, kök bileşen üzerinde [`set` fonksiyonunu](/reference/react/useState#setstate) çağırmaya benzer: React gereksiz DOM güncellemelerinden kaçınır. --- ### `root.unmount()` {/*root-unmount*/} -Call `root.unmount` to destroy a rendered tree inside a React root. +React kökü içindeki işlenmiş bir ağacı yok etmek için `root.unmount` çağırın. ```js root.unmount(); ``` -An app fully built with React will usually not have any calls to `root.unmount`. +Tamamen React ile oluşturulan bir uygulamada genellikle `root.unmount` için herhangi bir çağrıya gerek olmayacaktır. -This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. In that case, you need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't know to clean up and free up global resources like subscriptions. +Bu, çoğunlukla React kök DOM düğümünüzün (veya atalarından herhangi birinin) başka bir kod tarafından DOM'dan kaldırılabileceği durumlarda kullanışlıdır. Örneğin, etkin olmayan sekmeleri DOM'dan kaldıran bir jQuery sekme paneli düşünün. Bir sekme kaldırılırsa, içindeki her şey (içindeki React kökleri de dahil olmak üzere) DOM'dan da kaldırılacaktır. Bu durumda, React'e `root.unmount` çağrısı yaparak kaldırılan kökün içeriğini yönetmeyi "durdurmasını" söylemeniz gerekir. Aksi takdirde, kaldırılan kökün içindeki bileşenler, abonelikler gibi global kaynakları temizlemeyi ve boşaltmayı bilemez. -Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. +`root.unmount` çağrısı, ağaçtaki tüm olay işleyicilerini veya durumu kaldırmak da dahil olmak üzere, kökteki tüm bileşenlerin bağlantısını kaldıracak ve React'i kök DOM düğümünden "ayıracaktır". -#### Parameters {/*root-unmount-parameters*/} +#### Parametreler {/*root-unmount-parameters*/} -`root.unmount` does not accept any parameters. +`root.unmount` herhangi bir parametre kabul etmez. #### Returns {/*root-unmount-returns*/} -`root.unmount` returns `undefined`. +`root.unmount` `undefined` döndürür. -#### Caveats {/*root-unmount-caveats*/} +#### Uyarılar {/*root-unmount-caveats*/} -* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node. +* `root.unmount` çağrısı, ağaçtaki tüm bileşenlerin bağlantısını kaldıracak ve React'i kök DOM düğümünden "ayıracaktır". -* Once you call `root.unmount` you cannot call `root.render` again on the same root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error. However, you can create a new root for the same DOM node after the previous root for that node has been unmounted. +* Bir kez `root.unmount` çağrısı yaptığınızda, aynı kök üzerinde tekrar `root.render` çağrısı yapamazsınız. Bağlanmamış bir kök üzerinde `root.render` çağrılmaya çalışıldığında "Bağlanmamış bir kök güncellenemiyor" hatası verilir. Ancak, aynı DOM düğümü için önceki kökün bağlantısı kaldırıldıktan sonra yeni bir kök oluşturabilirsiniz. --- -## Usage {/*usage*/} +## Kullanım {/*usage*/} -### Rendering an app fully built with React {/*rendering-an-app-fully-built-with-react*/} +### Tamamen React ile oluşturulmuş bir uygulamayı render etmek {/*rendering-an-app-fully-built-with-react*/} -If your app is fully built with React, create a single root for your entire app. +Eğer uygulamanız tamamen React ile oluşturulmuşsa, uygulamanızın tamamı için tek bir kök oluşturun. ```js [[1, 3, "document.getElementById('root')"], [2, 4, ""]] import { createRoot } from 'react-dom/client'; @@ -135,19 +135,19 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` -Usually, you only need to run this code once at startup. It will: +Genellikle bu kodu başlangıçta yalnızca bir kez çalıştırmanız gerekir. Bu işlem şunları yapacaktır: -1. Find the browser DOM node defined in your HTML. -2. Display the React component for your app inside. +1. HTML'nizde tanımlanan tarayıcı DOM düğümünü bulun. +2. Uygulamanızın React bileşenini içinde görüntüleyin. ```html index.html - My app + Benim uygulamam - +
@@ -168,7 +168,7 @@ import { useState } from 'react'; export default function App() { return ( <> -

Hello, world!

+

Merhaba Dünya!

); @@ -178,7 +178,7 @@ function Counter() { const [count, setCount] = useState(0); return ( ); } @@ -186,46 +186,46 @@ function Counter() { -**If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.** +**Eğer Uygulamanız tamamen React ile oluşturulmuşsa, daha fazla kök oluşturmanız veya [`root.render`](#root-render)'ı tekrar çağırmanız gerekmez.** -From this point on, React will manage the DOM of your entire app. To add more components, [nest them inside the `App` component.](/learn/importing-and-exporting-components) When you need to update the UI, each of your components can do this by [using state.](/reference/react/useState) When you need to display extra content like a modal or a tooltip outside the DOM node, [render it with a portal.](/reference/react-dom/createPortal) +Bu noktadan itibaren React tüm uygulamanızın DOM'unu yönetecektir. Daha fazla bileşen eklemek için, [bunları `App` bileşeninin içine yerleştirin.](/learn/importing-and-exporting-components) Kullanıcı arayüzünü güncellemeniz gerektiğinde, bileşenlerinizin her biri bunu [state kullanarak yapabilir.](/reference/react/useState) DOM düğümünün dışında bir modal veya araç ipucu gibi ekstra içerik görüntülemeniz gerektiğinde, [bunu bir portal ile oluşturun.](/reference/react-dom/createPortal) -When your HTML is empty, the user sees a blank page until the app's JavaScript code loads and runs: +HTML'niz boş olduğunda, uygulamanın JavaScript kodu yüklenip çalışana kadar kullanıcı boş bir sayfa görür: ```html
``` -This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#production-grade-react-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).* +Bu çok yavaş hissettirebilir! Bunu çözmek için, bileşenlerinizden [sunucuda veya derleme sırasında] ilk HTML'yi oluşturabilirsiniz (/reference/react-dom/server) Ardından ziyaretçileriniz JavaScript kodunun herhangi biri yüklenmeden önce metin okuyabilir, resimleri görebilir ve bağlantıları tıklayabilir. Bu optimizasyonu otomatik olarak yapan [bir framework kullanmanızı](/learn/start-a-new-react-project#production-grade-react-frameworks) öneririz. Ne zaman çalıştığına bağlı olarak buna *sunucu tarafı oluşturma (SSR)* veya *statik site oluşturma (SSG)* denir. -**Apps using server rendering or static generation must call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead of `createRoot`.** React will then *hydrate* (reuse) the DOM nodes from your HTML instead of destroying and re-creating them. +**Sunucu oluşturma veya statik oluşturma kullanan uygulamalar `createRoot` yerine [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) çağırmalıdır.** React daha sonra DOM düğümlerini HTML'nizden yok etmek ve yeniden oluşturmak yerine *hydrate* edecektir (yeniden kullanacaktır). --- -### Rendering a page partially built with React {/*rendering-a-page-partially-built-with-react*/} +### Kısmen React ile oluşturulan bir sayfa render etmek {/*rendering-a-page-partially-built-with-react*/} -If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), you can call `createRoot` multiple times to create a root for each top-level piece of UI managed by React. You can display different content in each root by calling [`root.render`.](#root-render) +Sayfanız [React ile tamamen oluşturulmamışsa](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), React tarafından yönetilen her bir üst düzey kullanıcı arayüzü parçası için bir kök oluşturmak üzere `createRoot` öğesini birden çok kez çağırabilirsiniz. Her kökte [`root.render`](#root-render) çağrısı yaparak farklı içerikler görüntüleyebilirsiniz. -Here, two different React components are rendered into two DOM nodes defined in the `index.html` file: +Burada, index.html dosyasında tanımlanan iki farklı DOM düğümüne iki farklı React bileşeni render edilmiştir: ```html public/index.html - My app + Benim uygulamam
-

This paragraph is not rendered by React (open index.html to verify).

+

Bu paragraf React tarafından işlenmez (doğrulamak için index.html dosyasını açın).

@@ -250,8 +250,8 @@ commentRoot.render(); export function Navigation() { return (
    - Home - About + Ana Sayfa + Hakkında
); } @@ -267,9 +267,9 @@ function NavLink({ href, children }) { export function Comments() { return ( <> -

Comments

- - +

Yorumlar

+ + ); } @@ -288,28 +288,28 @@ nav ul li { display: inline-block; margin-right: 20px; } -You could also create a new DOM node with [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and add it to the document manually. +Ayrıca [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) ile yeni bir DOM düğümü oluşturabilir ve bunu belgeye manuel olarak ekleyebilirsiniz. ```js const domNode = document.createElement('div'); -const root = createRoot(domNode); +const root = createRoot(domNode); root.render(); -document.body.appendChild(domNode); // You can add it anywhere in the document +document.body.appendChild(domNode); // Belgenin herhangi bir yerine ekleyebilirsiniz ``` -To remove the React tree from the DOM node and clean up all the resources used by it, call [`root.unmount`.](#root-unmount) +React ağacını DOM düğümünden kaldırmak ve onun tarafından kullanılan tüm kaynakları temizlemek için [`root.unmount`.](#root-unmount) çağırın. ```js root.unmount(); ``` -This is mostly useful if your React components are inside an app written in a different framework. +Bu, çoğunlukla React bileşenleriniz farklı bir frameworkte yazılmış bir uygulamanın içindeyse kullanışlıdır. --- -### Updating a root component {/*updating-a-root-component*/} +### Bir kök bileşenin güncellenmesi {/*updating-a-root-component*/} -You can call `render` more than once on the same root. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive: +Aynı kök üzerinde `render` fonksiyonunu birden fazla kez çağırabilirsiniz. Önceki render etme işlemi ile ağaç yapısı eşleştiği sürece, React [durumu koruyacaktır.](/learn/preserving-and-resetting-state). Bu örnekte her saniyede tekrarlanan `render` çağrılarından kaynaklanan güncellemelerin yıkıcı olmadığına dikkat edin, örneğin giriş kutusuna yazı yazabilirsiniz: @@ -331,8 +331,8 @@ setInterval(() => { export default function App({counter}) { return ( <> -

Hello, world! {counter}

- +

Merhaba Dünya! {counter}

+ ); } @@ -340,14 +340,14 @@ export default function App({counter}) { -It is uncommon to call `render` multiple times. Usually, your components will [update state](/reference/react/useState) instead. +Birden fazla kez `render` çağrısı yapmak nadirdir. Genellikle bileşenleriniz bunun yerine [durum güncellemesi](/reference/react/useState) yapacaktır. --- -## Troubleshooting {/*troubleshooting*/} +## Sorun Giderme {/*troubleshooting*/} -### I've created a root, but nothing is displayed {/*ive-created-a-root-but-nothing-is-displayed*/} +### Bir kök oluşturdum, fakat hiçbir şey görüntülenmiyor. {/*ive-created-a-root-but-nothing-is-displayed*/} -Make sure you haven't forgotten to actually *render* your app into the root: +Uygulamanızı kök içine gerçekten render etmeyi unutmadığınızdan emin olun: ```js {5} import { createRoot } from 'react-dom/client'; @@ -357,15 +357,15 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` -Until you do that, nothing is displayed. +Bunu yapana kadar hiçbir şey görüntülenmez. --- -### I'm getting an error: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/} +### Bir hata alıyorum: "Hedef kapsayıcı bir DOM öğesi değil" {/*im-getting-an-error-target-container-is-not-a-dom-element*/} -This error means that whatever you're passing to `createRoot` is not a DOM node. +Bu hata, `createRoot` öğesine aktardığınız şeyin bir DOM düğümü olmadığı anlamına gelir. -If you're not sure what's happening, try logging it: +Ne olduğundan emin değilseniz, günlüğe kaydetmeyi deneyin: ```js {2} const domNode = document.getElementById('root'); @@ -374,46 +374,46 @@ const root = createRoot(domNode); root.render(); ``` -For example, if `domNode` is `null`, it means that [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) returned `null`. This will happen if there is no node in the document with the given ID at the time of your call. There may be a few reasons for it: +Örneğin, `domNode` `null` ise, [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) `null` döndürmüş demektir. Bu, çağrınız sırasında belgede verilen kimliğe sahip bir düğüm yoksa gerçekleşir. Bunun birkaç nedeni olabilir: -1. The ID you're looking for might differ from the ID you used in the HTML file. Check for typos! -2. Your bundle's `