From 7e39c1b3d14858d5fc969a867787d87809b65c5a Mon Sep 17 00:00:00 2001 From: Burak Sakalli Date: Thu, 8 Jun 2023 08:59:23 +0300 Subject: [PATCH 1/5] feat: add Turkish translation for render --- src/content/reference/react-dom/render.md | 75 +++++++++++++---------- 1 file changed, 42 insertions(+), 33 deletions(-) diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md index a0f751278..f46cab6c9 100644 --- a/src/content/reference/react-dom/render.md +++ b/src/content/reference/react-dom/render.md @@ -4,15 +4,15 @@ title: render -This API will be removed in a future major version of React. +Bu API, React'in gelecekteki bir ana sürümünde kaldırılacaktır. -In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) +React 18'de `render` [`createRoot`.](/reference/react-dom/client/createRoot) ile değiştirildi. React 18'de `render` kullanmak, uygulamanızın React 17 gibi davranacağı uyarısını verecektir. Daha fazla bilgi için [buraya](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) bakın. -`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into a browser DOM node. +`render` bir [JSX](/learn/writing-markup-with-jsx) ("React düğümü") parçasını tarayıcı DOM düğümüne işler. ```js render(reactNode, domNode, callback?) @@ -24,11 +24,11 @@ render(reactNode, domNode, callback?) --- -## Reference {/*reference*/} +## Başvuru dokümanı {/*reference*/} ### `render(reactNode, domNode, callback?)` {/*render*/} -Call `render` to display a React component inside a browser DOM element. +Bir React bileşenini tarayıcı DOM düğümüne işlemek için `render`'ı çağırın. ```js import { render } from 'react-dom'; @@ -39,38 +39,43 @@ render(, domNode); React will display `` in the `domNode`, and take over managing the DOM inside it. -An app fully built with React will usually only have one `render` call with its root component. A page that uses "sprinkles" of React for parts of the page may have as many `render` calls as needed. +React ``'i `domNode` içinde görüntüleyecek ve içindeki DOM'u yönetmeye başlayacaktır. -[See more examples below.](#usage) +Tamamen React ile oluşturulmuş bir uygulama genellikle kök(root) bileşeni ile yalnızca bir `render` çağrısına sahip olacaktır. Sayfanın bazı bölümleri için React "sprinkles" kullanan bir sayfada, gerektiği kadar çok `render` çağrısına sahip olabilir. -#### Parameters {/*parameters*/} +[Daha fazla örnek için aşağıya bakın.](#usage) + +#### Parametreler {/*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`. -* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will display the `reactNode` you pass inside this DOM element. From this moment, React will manage the DOM inside the `domNode` and update it when your React tree changes. +* `reactNode`: Görüntülemek istediğiniz *React düğümü*. Bu genellikle `` gibi bir JSX parçası olacaktır, ancak [`createElement()`](/reference/react/createElement) ile oluşturulmuş bir React elemanına, bir dize, bir sayı, `null` veya `undefined` da geçirebilirsiniz. -* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM. +* `domNode`: [DOM elemanı.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React, geçtiğiniz `reactNode`'u bu DOM elemanının içinde görüntüleyecektir. Bu andan itibaren, React `domNode` içindeki DOM'u yönetecek ve React ağacınız değiştiğinde güncelleyecektir. +* **optional** `callback`: Fonksiyon. Geçilirse, React bileşeniniz DOM'a yerleştirildikten sonra onu çağıracaktır. -#### Returns {/*returns*/} +#### Dönüş değerleri {/*returns*/} `render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component. -#### Caveats {/*caveats*/} +`render` genellikle `null` döndürür. Ancak, geçtiğiniz `reactNode` bir *sınıf bileşeni* ise, o zaman bileşenin bir örneğini döndürecektir. + +#### Dikkat edilmesi gerekenler {/*caveats*/} -* In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond. +* React 18'de `render` [`createRoot`.](/reference/react-dom/client/createRoot) ile değiştirildi. Lütfen React 18 ve sonrası için `createRoot` kullanın. -* The first time you call `render`, React will clear all the existing HTML content inside the `domNode` before rendering the React component into it. If your `domNode` contains HTML generated by React on the server or during the build, use [`hydrate()`](/reference/react-dom/hydrate) instead, which attaches the event handlers to the existing HTML. +* İlk `render` çağrısında, React, React bileşenini render etmek için `domNode` içindeki tüm mevcut HTML içeriğini temizleyecektir. `domNode`'unuz, sunucu veya derleme sırasında React tarafından oluşturulan HTML içeriyorsa, bunun yerine var olan HTML'e olay işleyicilerini ekleyen [`hydrate()`](/reference/react-dom/hydrate) kullanın. -* If you call `render` on the same `domNode` 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 `domNode` again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates. +* Eğer aynı `domNode` üzerinde birden fazla `render` çağrısı yaparsanız, React, geçtiğiniz son JSX'i yansıtmak için gerektiğinde DOM'u güncelleyecektir. React, DOM'un hangi kısımlarının yeniden kullanılabileceğine ve hangilerinin önceki ağaçla(tree) ["eşleştirilerek"](/learn/preserving-and-resetting-state) yeniden oluşturulması gerektiğine karar verecektir. Aynı `domNode` üzerinde `render` çağrısı yapmak, kök bileşen (root component) üzerinde [`set` fonksiyonunu](/reference/react/useState#setstate) çağırmaya benzer: React gereksiz DOM güncellemelerinden kaçınır. -* If your app is fully built with React, you'll likely have only one `render` 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 `render`. +* Eğer uygulamanız tamamen React ile oluşturulmuşsa, uygulamanızda muhtemelen yalnızca bir `render` çağrısı olacaktır. (Bir çatı(framework) kullanıyorsanız, bunu sizin için yapabilir.) JSX'in bir parçasını bileşeninizin bir alt öğesi olmayan DOM ağacının farklı bir yerinde görüntülemek istediğinizde (örneğin, bir modal veya bir tooltip), `render` yerine [`createPortal`](/reference/react-dom/createPortal) kullanın. --- -## Usage {/*usage*/} +## Kullanım {/*usage*/} -Call `render` to display a React component inside a browser DOM node. +Bir React bileşenini bir tarayıcı DOM düğümünde görüntülemek için `render`'ı çağırın. ```js [[1, 4, ""], [2, 4, "document.getElementById('root')"]] import { render } from 'react-dom'; @@ -79,10 +84,12 @@ import App from './App.js'; render(, document.getElementById('root')); ``` -### Rendering the root component {/*rendering-the-root-component*/} +### Kök bileşeni render etmek {/*rendering-the-root-component*/} In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component. +Tamamen React ile oluşturulmuş uygulamalarda, **genellikle bunu yalnızca başlangıçta bir kez yapacaksınız** - "kök" bileşenini render etmek için. + ```js index.js active @@ -95,26 +102,26 @@ render(, document.getElementById('root')); ```js App.js export default function App() { - return

Hello, world!

; + return

Merhaba Dünya!

; } ``` -Usually you shouldn't need to call `render` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState) +Genellikle `render`'ı tekrar çağırmanıza veya daha fazla yere çağırmanıza gerek yoktur. Bu noktadan itibaren, React uygulamanızın DOM'unu yönetmeye başlayacaktır. Kullanıcı arayüzünü güncellemek için bileşenleriniz [state](/reference/react/useState) kullanacak. --- -### Rendering multiple roots {/*rendering-multiple-roots*/} +### Birden çok kök oluşturma {/*rendering-multiple-roots*/} -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), call `render` for each top-level piece of UI managed by React. +Eğer sayfanız [tamamen React ile 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 UI parçası için `render`'ı çağırın. ```html public/index.html
-

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

+

Bu paragraf React tarafından render edilmiyor (doğrulamak için index.html'i açın).

``` @@ -139,8 +146,8 @@ render( export function Navigation() { return (
    - Home - About + Anasayfa + Hakkında
); } @@ -157,8 +164,8 @@ export function Comments() { return ( <>

Comments

- - + + ); } @@ -177,14 +184,16 @@ nav ul li { display: inline-block; margin-right: 20px; } -You can destroy the rendered trees with [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode) +[`unmountComponentAtNode()`](/reference/react-dom/unmountComponentAtNode) ile render edilmiş ağaçları(trees) yok edebilirsiniz. --- -### Updating the rendered tree {/*updating-the-rendered-tree*/} +### Render edilmiş ağaçları güncelleme {/*updating-the-rendered-tree*/} You can call `render` more than once on the same DOM node. 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 are not destructive: +Aynı DOM düğümü üzerinde `render`'ı birden fazla kez çağırabilirsiniz. Bileşen ağacı yapısı önceki render edilmiş olanla eşleştiği sürece, React [durumu koruyacaktır.](/learn/preserving-and-resetting-state) Tekrarlanan `render` çağrılarından her saniye gelen güncellemelerin yıkıcı olmadığını gösteren girişe yazı yazabileceğinize dikkat edin: + ```js index.js active @@ -206,8 +215,8 @@ setInterval(() => { export default function App({counter}) { return ( <> -

Hello, world! {counter}

- +

Merhaba Dünya! {counter}

+ ); } @@ -215,4 +224,4 @@ export default function App({counter}) { -It is uncommon to call `render` multiple times. Usually, you'll [update state](/reference/react/useState) inside your components instead. +Bu şekilde birden fazla kez `render` çağırmak nadirdir. Genellikle, bunun yerine bileşenlerinizin içinde [state'i güncellersiniz.](/reference/react/useState) From 9cc02cdf166f8021f2c16100d064ef5267b6d9b6 Mon Sep 17 00:00:00 2001 From: Burak Sakalli Date: Thu, 8 Jun 2023 09:45:28 +0300 Subject: [PATCH 2/5] update: remove en texts --- src/content/reference/react-dom/render.md | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md index f46cab6c9..8029a66dd 100644 --- a/src/content/reference/react-dom/render.md +++ b/src/content/reference/react-dom/render.md @@ -6,13 +6,13 @@ title: render Bu API, React'in gelecekteki bir ana sürümünde kaldırılacaktır. -React 18'de `render` [`createRoot`.](/reference/react-dom/client/createRoot) ile değiştirildi. React 18'de `render` kullanmak, uygulamanızın React 17 gibi davranacağı uyarısını verecektir. Daha fazla bilgi için [buraya](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) bakın. +React 18'de `render`, [`createRoot`.](/reference/react-dom/client/createRoot) ile değiştirildi. React 18'de `render` kullanmak, uygulamanızın React 17 gibi davranacağı uyarısını verecektir. Daha fazla bilgi için [buraya](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) bakın. -`render` bir [JSX](/learn/writing-markup-with-jsx) ("React düğümü") parçasını tarayıcı DOM düğümüne işler. +`render` bir [JSX](/learn/writing-markup-with-jsx) ("React düğümü") parçasını tarayıcı DOM düğümüne render eder. ```js render(reactNode, domNode, callback?) @@ -28,7 +28,7 @@ render(reactNode, domNode, callback?) ### `render(reactNode, domNode, callback?)` {/*render*/} -Bir React bileşenini tarayıcı DOM düğümüne işlemek için `render`'ı çağırın. +Bir tarayıcı DOM düğümünün içinde, bir React bileşeni görüntülemek için `render`'ı çağırın. ```js import { render } from 'react-dom'; @@ -37,8 +37,6 @@ const domNode = document.getElementById('root'); render(, domNode); ``` -React will display `` in the `domNode`, and take over managing the DOM inside it. - React ``'i `domNode` içinde görüntüleyecek ve içindeki DOM'u yönetmeye başlayacaktır. Tamamen React ile oluşturulmuş bir uygulama genellikle kök(root) bileşeni ile yalnızca bir `render` çağrısına sahip olacaktır. Sayfanın bazı bölümleri için React "sprinkles" kullanan bir sayfada, gerektiği kadar çok `render` çağrısına sahip olabilir. @@ -47,18 +45,14 @@ Tamamen React ile oluşturulmuş bir uygulama genellikle kök(root) bileşeni il #### Parametreler {/*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`. - * `reactNode`: Görüntülemek istediğiniz *React düğümü*. Bu genellikle `` gibi bir JSX parçası olacaktır, ancak [`createElement()`](/reference/react/createElement) ile oluşturulmuş bir React elemanına, bir dize, bir sayı, `null` veya `undefined` da geçirebilirsiniz. -* `domNode`: [DOM elemanı.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React, geçtiğiniz `reactNode`'u bu DOM elemanının içinde görüntüleyecektir. Bu andan itibaren, React `domNode` içindeki DOM'u yönetecek ve React ağacınız değiştiğinde güncelleyecektir. +* `domNode`: [DOM elemanı.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React, geçtiğiniz `reactNode`'u bu DOM elemanının içinde görüntüleyecektir. Bu andan itibaren, React `domNode` içindeki DOM'u yönetecek ve React ağacınız (React tree) değiştiğinde güncelleyecektir. * **optional** `callback`: Fonksiyon. Geçilirse, React bileşeniniz DOM'a yerleştirildikten sonra onu çağıracaktır. #### Dönüş değerleri {/*returns*/} -`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component. - `render` genellikle `null` döndürür. Ancak, geçtiğiniz `reactNode` bir *sınıf bileşeni* ise, o zaman bileşenin bir örneğini döndürecektir. #### Dikkat edilmesi gerekenler {/*caveats*/} @@ -86,8 +80,6 @@ render(, document.getElementById('root')); ### Kök bileşeni render etmek {/*rendering-the-root-component*/} -In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component. - Tamamen React ile oluşturulmuş uygulamalarda, **genellikle bunu yalnızca başlangıçta bir kez yapacaksınız** - "kök" bileşenini render etmek için. @@ -190,8 +182,6 @@ nav ul li { display: inline-block; margin-right: 20px; } ### Render edilmiş ağaçları güncelleme {/*updating-the-rendered-tree*/} -You can call `render` more than once on the same DOM node. 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 are not destructive: - Aynı DOM düğümü üzerinde `render`'ı birden fazla kez çağırabilirsiniz. Bileşen ağacı yapısı önceki render edilmiş olanla eşleştiği sürece, React [durumu koruyacaktır.](/learn/preserving-and-resetting-state) Tekrarlanan `render` çağrılarından her saniye gelen güncellemelerin yıkıcı olmadığını gösteren girişe yazı yazabileceğinize dikkat edin: From 46197bb22047659c8e7acfb4bee2269df576fa91 Mon Sep 17 00:00:00 2001 From: Burak Sakalli Date: Thu, 8 Jun 2023 10:10:41 +0300 Subject: [PATCH 3/5] update: turkish improvements for render --- src/content/reference/react-dom/render.md | 42 +++++++++++------------ 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md index 8029a66dd..5e75130b5 100644 --- a/src/content/reference/react-dom/render.md +++ b/src/content/reference/react-dom/render.md @@ -4,15 +4,15 @@ title: render -Bu API, React'in gelecekteki bir ana sürümünde kaldırılacaktır. +Bu API, React'in gelecekteki bir ana sürümünde kaldırılacak. -React 18'de `render`, [`createRoot`.](/reference/react-dom/client/createRoot) ile değiştirildi. React 18'de `render` kullanmak, uygulamanızın React 17 gibi davranacağı uyarısını verecektir. Daha fazla bilgi için [buraya](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) bakın. +React 18'de `render`, [`createRoot`](/reference/react-dom/client/createRoot) ile değiştirilmiştir. React 18'de `render` kullanmak, uygulamanızın React 17 gibi davranacağı uyarısını verecektir. Daha fazla bilgi için [buraya](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) bakınız. -`render` bir [JSX](/learn/writing-markup-with-jsx) ("React düğümü") parçasını tarayıcı DOM düğümüne render eder. +`render`, bir [JSX](/learn/writing-markup-with-jsx) ("React düğümü") parçasını tarayıcı DOM düğümüne render eder. ```js render(reactNode, domNode, callback?) @@ -28,7 +28,7 @@ render(reactNode, domNode, callback?) ### `render(reactNode, domNode, callback?)` {/*render*/} -Bir tarayıcı DOM düğümünün içinde, bir React bileşeni görüntülemek için `render`'ı çağırın. +Bir tarayıcı DOM düğümünün içerisinde bir React bileşeni göstermek için `render`'ı çağırın. ```js import { render } from 'react-dom'; @@ -37,33 +37,33 @@ const domNode = document.getElementById('root'); render(, domNode); ``` -React ``'i `domNode` içinde görüntüleyecek ve içindeki DOM'u yönetmeye başlayacaktır. +React, `` bileşenini `domNode` içinde görüntüleyecek ve içindeki DOM'u yönetmeye başlayacaktır. -Tamamen React ile oluşturulmuş bir uygulama genellikle kök(root) bileşeni ile yalnızca bir `render` çağrısına sahip olacaktır. Sayfanın bazı bölümleri için React "sprinkles" kullanan bir sayfada, gerektiği kadar çok `render` çağrısına sahip olabilir. +Tamamen React ile oluşturulmuş bir uygulama genellikle sadece bir `render` çağrısıyla kök (root) bileşene sahip olur. Sayfanın bazı bölümleri için React "serpinti" kullanılan bir sayfada, ihtiyaç duyulan kadar çok `render` çağrısı bulunabilir. [Daha fazla örnek için aşağıya bakın.](#usage) #### Parametreler {/*parameters*/} -* `reactNode`: Görüntülemek istediğiniz *React düğümü*. Bu genellikle `` gibi bir JSX parçası olacaktır, ancak [`createElement()`](/reference/react/createElement) ile oluşturulmuş bir React elemanına, bir dize, bir sayı, `null` veya `undefined` da geçirebilirsiniz. +* `reactNode`: Görüntülemek istediğiniz *React düğümü*. Bu genellikle `` gibi bir JSX parçası olacaktır; ancak bir React elemanını [`createElement()`](/reference/react/createElement) ile oluşturabilir, bir dize, bir sayı, `null` veya `undefined` de geçirebilirsiniz. -* `domNode`: [DOM elemanı.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React, geçtiğiniz `reactNode`'u bu DOM elemanının içinde görüntüleyecektir. Bu andan itibaren, React `domNode` içindeki DOM'u yönetecek ve React ağacınız (React tree) değiştiğinde güncelleyecektir. +* `domNode`: [DOM elemanı.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React, verdiğiniz `reactNode`'u bu DOM elemanının içinde gösterecektir. Bu andan itibaren, React `domNode` içindeki DOM'u yönetir ve React ağacınız (React tree) değiştiğinde güncellenir. -* **optional** `callback`: Fonksiyon. Geçilirse, React bileşeniniz DOM'a yerleştirildikten sonra onu çağıracaktır. +* **optional** `callback`: Fonksiyon. Geçilirse, React bileşeniniz DOM'a yerleştirildikten sonra bu fonksiyon çağrılır. #### Dönüş değerleri {/*returns*/} -`render` genellikle `null` döndürür. Ancak, geçtiğiniz `reactNode` bir *sınıf bileşeni* ise, o zaman bileşenin bir örneğini döndürecektir. +`render` genellikle `null` döndürür. Ancak, verdiğiniz `reactNode` bir *sınıf bileşeni* ise, bu durumda bileşenin bir örneğini döndürecektir. #### Dikkat edilmesi gerekenler {/*caveats*/} -* React 18'de `render` [`createRoot`.](/reference/react-dom/client/createRoot) ile değiştirildi. Lütfen React 18 ve sonrası için `createRoot` kullanın. +* React 18'de `render`, [`createRoot`](/reference/react-dom/client/createRoot) ile değiştirilmiştir. Lütfen React 18 ve sonrası için `createRoot` kullanınız. -* İlk `render` çağrısında, React, React bileşenini render etmek için `domNode` içindeki tüm mevcut HTML içeriğini temizleyecektir. `domNode`'unuz, sunucu veya derleme sırasında React tarafından oluşturulan HTML içeriyorsa, bunun yerine var olan HTML'e olay işleyicilerini ekleyen [`hydrate()`](/reference/react-dom/hydrate) kullanın. +* İlk `render` çağrısında, React, React bileşenini render etmek için `domNode` içindeki tüm mevcut HTML içeriğini siler. Eğer `domNode`'unuz, sunucu ya da derleme sürecinde React tarafından oluşturulan HTML içeriyorsa, mevcut HTML'e olay yöneticilerini (event handler) ekleyen [`hydrate()`](/reference/react-dom/hydrate) fonksiyonunu kullanınız. -* Eğer aynı `domNode` üzerinde birden fazla `render` çağrısı yaparsanız, React, geçtiğiniz son JSX'i yansıtmak için gerektiğinde DOM'u güncelleyecektir. React, DOM'un hangi kısımlarının yeniden kullanılabileceğine ve hangilerinin önceki ağaçla(tree) ["eşleştirilerek"](/learn/preserving-and-resetting-state) yeniden oluşturulması gerektiğine karar verecektir. Aynı `domNode` üzerinde `render` çağrısı yapmak, kök bileşen (root component) üzerinde [`set` fonksiyonunu](/reference/react/useState#setstate) çağırmaya benzer: React gereksiz DOM güncellemelerinden kaçınır. +* Eğer aynı `domNode` üzerinde birden fazla `render` çağrısı yaparsanız, React, verdiğiniz son JSX'i yansıtmak için gerektiğinde DOM'u güncelleyecektir. React, DOM'un hangi kısımlarının yeniden kullanılabileceğine ve hangilerinin önceki ağaç (tree) ile ["eşleştirilerek"](/learn/preserving-and-resetting-state) yeniden oluşturulması gerektiğine karar verir. Aynı `domNode` üzerinde `render` çağrısı yapmak, kök bileşen (root component) üzerinde [`set` fonksiyonunu](/reference/react/useState#setstate) çağırmaya benzer: React gereksiz DOM güncellemelerinden kaçınır. -* Eğer uygulamanız tamamen React ile oluşturulmuşsa, uygulamanızda muhtemelen yalnızca bir `render` çağrısı olacaktır. (Bir çatı(framework) kullanıyorsanız, bunu sizin için yapabilir.) JSX'in bir parçasını bileşeninizin bir alt öğesi olmayan DOM ağacının farklı bir yerinde görüntülemek istediğinizde (örneğin, bir modal veya bir tooltip), `render` yerine [`createPortal`](/reference/react-dom/createPortal) kullanın. +* Eğer uygulamanız tamamen React ile oluşturulmuşsa, uygulamanızda muhtemelen yalnızca bir `render` çağrısı olacaktır. (Bir çatı(framework) kullanıyorsanız, bunu sizin için yapabilir.) JSX'in bir parçasını bileşeninizin bir alt elemanı (child component) olmayan DOM ağacının farklı bir yerinde görüntülemek istediğinizde (örneğin, bir modal veya bir tooltip), `render` yerine [`createPortal`](/reference/react-dom/createPortal) kullanınız. --- @@ -80,7 +80,7 @@ render(, document.getElementById('root')); ### Kök bileşeni render etmek {/*rendering-the-root-component*/} -Tamamen React ile oluşturulmuş uygulamalarda, **genellikle bunu yalnızca başlangıçta bir kez yapacaksınız** - "kök" bileşenini render etmek için. +Tamamen React ile oluşturulmuş uygulamalarda, **genellikle bunu sadece başlangıçta bir kez yaparsınız** - "kök" bileşenini (root component) render etmek için. @@ -100,20 +100,20 @@ export default function App() { -Genellikle `render`'ı tekrar çağırmanıza veya daha fazla yere çağırmanıza gerek yoktur. Bu noktadan itibaren, React uygulamanızın DOM'unu yönetmeye başlayacaktır. Kullanıcı arayüzünü güncellemek için bileşenleriniz [state](/reference/react/useState) kullanacak. +Genellikle `render`'ı tekrar çağırmanıza veya başka yerlere çağırmanıza gerek yoktur. Bu noktadan itibaren, React uygulamanızın DOM'unu yönetmeye başlar. Kullanıcı arayüzünü güncellemek için bileşenleriniz [state](/reference/react/useState) kullanır. --- ### Birden çok kök oluşturma {/*rendering-multiple-roots*/} -Eğer sayfanız [tamamen React ile 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 UI parçası için `render`'ı çağırın. +Eğer sayfanız [tamamen React ile 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ü (UI) parçası için `render`'ı çağırınız. ```html public/index.html
-

Bu paragraf React tarafından render edilmiyor (doğrulamak için index.html'i açın).

+

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

``` @@ -176,13 +176,13 @@ nav ul li { display: inline-block; margin-right: 20px; } -[`unmountComponentAtNode()`](/reference/react-dom/unmountComponentAtNode) ile render edilmiş ağaçları(trees) yok edebilirsiniz. +Render edilmiş ağaçları (trees) [`unmountComponentAtNode()`](/reference/react-dom/unmountComponentAtNode) ile yok edebilirsiniz. --- ### Render edilmiş ağaçları güncelleme {/*updating-the-rendered-tree*/} -Aynı DOM düğümü üzerinde `render`'ı birden fazla kez çağırabilirsiniz. Bileşen ağacı yapısı önceki render edilmiş olanla eşleştiği sürece, React [durumu koruyacaktır.](/learn/preserving-and-resetting-state) Tekrarlanan `render` çağrılarından her saniye gelen güncellemelerin yıkıcı olmadığını gösteren girişe yazı yazabileceğinize dikkat edin: +Aynı DOM düğümünde `render` işlevini birden fazla kez çağırabilirsiniz. Bileşen ağacının yapısı önceden oluşturulanla eşleştiği sürece, React [durumu korur](/learn/preserving-and-resetting-state). Giriş alanına yazı yazabilmeniz, her saniyede tekrarlanan `render` çağrılarının yıkıcı(destructive) olmadığını gösterir: @@ -214,4 +214,4 @@ export default function App({counter}) { -Bu şekilde birden fazla kez `render` çağırmak nadirdir. Genellikle, bunun yerine bileşenlerinizin içinde [state'i güncellersiniz.](/reference/react/useState) +Bu şekilde birden fazla kez `render` çağırmak nadiren gerçekleşir. Genellikle, bunun yerine bileşenlerinizin (component) içinde [state'i güncellersiniz.](/reference/react/useState) From d6207fcfd840148ce0e644159f22e9d5afe0b98c Mon Sep 17 00:00:00 2001 From: Burak Sakalli Date: Thu, 8 Jun 2023 10:19:15 +0300 Subject: [PATCH 4/5] fix: typo --- src/content/reference/react-dom/render.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md index 5e75130b5..b498bf029 100644 --- a/src/content/reference/react-dom/render.md +++ b/src/content/reference/react-dom/render.md @@ -4,7 +4,7 @@ title: render -Bu API, React'in gelecekteki bir ana sürümünde kaldırılacak. +Bu API, React'in gelecekteki bir ana sürümünde kaldırılacaktır. React 18'de `render`, [`createRoot`](/reference/react-dom/client/createRoot) ile değiştirilmiştir. React 18'de `render` kullanmak, uygulamanızın React 17 gibi davranacağı uyarısını verecektir. Daha fazla bilgi için [buraya](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) bakınız. @@ -39,7 +39,7 @@ render(, domNode); React, `` bileşenini `domNode` içinde görüntüleyecek ve içindeki DOM'u yönetmeye başlayacaktır. -Tamamen React ile oluşturulmuş bir uygulama genellikle sadece bir `render` çağrısıyla kök (root) bileşene sahip olur. Sayfanın bazı bölümleri için React "serpinti" kullanılan bir sayfada, ihtiyaç duyulan kadar çok `render` çağrısı bulunabilir. +Tamamen React ile oluşturulmuş bir uygulama genellikle sadece bir `render` çağrısıyla kök (root) bileşene sahip olur. Sayfanın bazı bölümleri için React "sprinkles" (serpme) kullanılan bir sayfada, ihtiyaç duyulan kadar çok `render` çağrısı bulunabilir. [Daha fazla örnek için aşağıya bakın.](#usage) @@ -63,7 +63,7 @@ Tamamen React ile oluşturulmuş bir uygulama genellikle sadece bir `render` ça * Eğer aynı `domNode` üzerinde birden fazla `render` çağrısı yaparsanız, React, verdiğiniz son JSX'i yansıtmak için gerektiğinde DOM'u güncelleyecektir. React, DOM'un hangi kısımlarının yeniden kullanılabileceğine ve hangilerinin önceki ağaç (tree) ile ["eşleştirilerek"](/learn/preserving-and-resetting-state) yeniden oluşturulması gerektiğine karar verir. Aynı `domNode` üzerinde `render` çağrısı yapmak, kök bileşen (root component) üzerinde [`set` fonksiyonunu](/reference/react/useState#setstate) çağırmaya benzer: React gereksiz DOM güncellemelerinden kaçınır. -* Eğer uygulamanız tamamen React ile oluşturulmuşsa, uygulamanızda muhtemelen yalnızca bir `render` çağrısı olacaktır. (Bir çatı(framework) kullanıyorsanız, bunu sizin için yapabilir.) JSX'in bir parçasını bileşeninizin bir alt elemanı (child component) olmayan DOM ağacının farklı bir yerinde görüntülemek istediğinizde (örneğin, bir modal veya bir tooltip), `render` yerine [`createPortal`](/reference/react-dom/createPortal) kullanınız. +* Eğer uygulamanız tamamen React ile oluşturulmuşsa, uygulamanızda muhtemelen yalnızca bir `render` çağrısı olacaktır. (Bir çatı (framework) kullanıyorsanız, bunu sizin için yapabilir.) JSX'in bir parçasını bileşeninizin bir alt elemanı (child component) olmayan DOM ağacının farklı bir yerinde görüntülemek istediğinizde (örneğin, bir modal veya bir tooltip), `render` yerine [`createPortal`](/reference/react-dom/createPortal) kullanınız. --- @@ -182,7 +182,7 @@ Render edilmiş ağaçları (trees) [`unmountComponentAtNode()`](/reference/reac ### Render edilmiş ağaçları güncelleme {/*updating-the-rendered-tree*/} -Aynı DOM düğümünde `render` işlevini birden fazla kez çağırabilirsiniz. Bileşen ağacının yapısı önceden oluşturulanla eşleştiği sürece, React [durumu korur](/learn/preserving-and-resetting-state). Giriş alanına yazı yazabilmeniz, her saniyede tekrarlanan `render` çağrılarının yıkıcı(destructive) olmadığını gösterir: +Aynı DOM düğümünde `render` fonksiyonunu birden fazla kez çağırabilirsiniz. Bileşen ağacının yapısı önceden oluşturulanla eşleştiği sürece, React [durumu korur](/learn/preserving-and-resetting-state). Giriş alanına yazı yazabilmeniz, her saniyede tekrarlanan `render` çağrılarının yıkıcı(destructive) olmadığını gösterir: From 9d988a1937e1a9f4183ac1ea1ebd74f2f21ea441 Mon Sep 17 00:00:00 2001 From: Burak Sakalli Date: Fri, 9 Jun 2023 10:59:22 +0300 Subject: [PATCH 5/5] update: requested change --- src/content/reference/react-dom/render.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md index b498bf029..864a37570 100644 --- a/src/content/reference/react-dom/render.md +++ b/src/content/reference/react-dom/render.md @@ -155,9 +155,9 @@ function NavLink({ href, children }) { export function Comments() { return ( <> -

Comments

- - +

Yorumlar

+ + ); }