Merge pull request #465 from buraksakalli/translate-render

Translate render

Author: alioguzhan

src/content/reference/react-dom/render.md

@@ -4,15 +4,15 @@ title: render
 
 <Deprecated>
 
-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ş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.
 
 </Deprecated>
 
 <Intro>
 
-`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 render eder.
 
 ```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 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,40 +37,39 @@ const domNode = document.getElementById('root');
 render(<App />, domNode);
 ```
 
-React will display `<App />` in the `domNode`, and take over managing the DOM inside it.
+React, `<App />` bileşenini `domNode` içinde görüntüleyecek ve içindeki DOM'u yönetmeye başlayacaktır.
 
-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.
+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.
 
-[See more examples below.](#usage)
+[Daha fazla örnek için aşağıya bakın.](#usage)
 
-#### Parameters {/*parameters*/}
+#### Parametreler {/*parameters*/}
 
-* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like `<App />`, 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 `<App />` 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`: 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.
+* `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`: A function. If passed, React will call it after your component is placed into the DOM.
+* **optional** `callback`: Fonksiyon. Geçilirse, React bileşeniniz DOM'a yerleştirildikten sonra bu fonksiyon çağrılır.
 
+#### Dönüş değerleri {/*returns*/}
 
-#### Returns {/*returns*/}
+`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.
 
-`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component.
+#### Dikkat edilmesi gerekenler {/*caveats*/}
 
-#### Caveats {/*caveats*/}
+* 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.
 
-* In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond.
+* İ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.
 
-* 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.
+* 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.
 
-* 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.
-
-* 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 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.
 
 ---
 
-## Usage {/*usage*/}
+## Kullanım {/*usage*/}
 
-Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>.
+Bir <CodeStep step={1}>React bileşenini</CodeStep> bir <CodeStep step={2}>tarayıcı DOM düğümünde</CodeStep> görüntülemek için `render`'ı çağırın.
 
 ```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
 import { render } from 'react-dom';
@@ -79,9 +78,9 @@ import App from './App.js';
 render(<App />, 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 sadece başlangıçta bir kez yaparsınız** - "kök" bileşenini (root component) render etmek için.
 
 <Sandpack>
 
@@ -95,26 +94,26 @@ render(<App />, document.getElementById('root'));
 
 ```js App.js
 export default function App() {
-  return <h1>Hello, world!</h1>;
+  return <h1>Merhaba Dünya!</h1>;
 }
 ```
 
 </Sandpack>
 
-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 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.
 
 ---
 
-### 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 kullanıcı arayüzü (UI) parçası için `render`'ı çağırınız.
 
 <Sandpack>
 
 ```html public/index.html
 <nav id="navigation"></nav>
 <main>
-  <p>This paragraph is not rendered by React (open index.html to verify).</p>
+  <p>Bu paragraf React tarafından render edilmiyor (doğrulamak için index.html dosyasını açın).</p>
   <section id="comments"></section>
 </main>
 ```
@@ -139,8 +138,8 @@ render(
 export function Navigation() {
   return (
     <ul>
-      <NavLink href="/">Home</NavLink>
-      <NavLink href="/about">About</NavLink>
+      <NavLink href="/">Anasayfa</NavLink>
+      <NavLink href="/about">Hakkında</NavLink>
     </ul>
   );
 }
@@ -156,9 +155,9 @@ function NavLink({ href, children }) {
 export function Comments() {
   return (
     <>
-      <h2>Comments</h2>
-      <Comment text="Hello!" author="Sophie" />
-      <Comment text="How are you?" author="Sunil" />
+      <h2>Yorumlar</h2>
+      <Comment text="Merhaba!" author="Gökçe" />
+      <Comment text="Nasılsın?" author="Burak" />
     </>
   );
 }
@@ -177,13 +176,13 @@ nav ul li { display: inline-block; margin-right: 20px; }
 
 </Sandpack>
 
-You can destroy the rendered trees with [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode)
+Render edilmiş ağaçları (trees) [`unmountComponentAtNode()`](/reference/react-dom/unmountComponentAtNode) ile 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ü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:
 
 <Sandpack>
 
@@ -206,13 +205,13 @@ setInterval(() => {
 export default function App({counter}) {
   return (
     <>
-      <h1>Hello, world! {counter}</h1>
-      <input placeholder="Type something here" />
+      <h1>Merhaba Dünya! {counter}</h1>
+      <input placeholder="Buraya bir şey yazın" />
     </>
   );
 }
 ```
 
 </Sandpack>
 
-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 nadiren gerçekleşir. Genellikle, bunun yerine bileşenlerinizin (component) içinde [state'i güncellersiniz.](/reference/react/useState)