From bf2a44a22d8dd366db13186dc76add0a7186847c Mon Sep 17 00:00:00 2001
From: Enes Bayraktar <enes.bayraktar@outlook.com.tr>
Date: Sat, 30 Sep 2023 16:31:16 +0300
Subject: [PATCH 1/4] feat: translate findDOMNode.md

---
 .../reference/react-dom/findDOMNode.md        | 125 +++++++++++-------
 1 file changed, 76 insertions(+), 49 deletions(-)

diff --git a/src/content/reference/react-dom/findDOMNode.md b/src/content/reference/react-dom/findDOMNode.md
index 75c02c73d..c773e97b5 100644
--- a/src/content/reference/react-dom/findDOMNode.md
+++ b/src/content/reference/react-dom/findDOMNode.md
@@ -4,13 +4,13 @@ title: findDOMNode
 
 <Deprecated>
 
-This API will be removed in a future major version of React. [See the alternatives.](#alternatives)
+Bu başvuru ilerleyen React sürümlerinde kaldırılabilir. [Alternatif başvuruları görüntüle.](#alternatives)
 
 </Deprecated>
 
 <Intro>
 
-`findDOMNode` finds the browser DOM node for a React [class component](/reference/react/Component) instance.
+`findDOMNode`, fonksiyonu React [sınıf bileşenine](/reference/react/Component) ait tarayıcı DOM nesnesini döndürür.
 
 ```js
 const domNode = findDOMNode(componentInstance)
@@ -22,11 +22,11 @@ const domNode = findDOMNode(componentInstance)
 
 ---
 
-## Reference {/*reference*/}
+## Başvuru dökümanı {/*reference*/}
 
 ### `findDOMNode(componentInstance)` {/*finddomnode*/}
 
-Call `findDOMNode` to find the browser DOM node for a given React [class component](/reference/react/Component) instance.
+Bir, React [sınıf bileşenine](/reference/react/Component) ait DOM nesnesini bulmak için `findDOMNode` fonksiyonunu kullanın.
 
 ```js
 import { findDOMNode } from 'react-dom';
@@ -34,34 +34,35 @@ import { findDOMNode } from 'react-dom';
 const domNode = findDOMNode(componentInstance);
 ```
 
-[See more examples below.](#usage)
+[Daha fazla kullanım örneği için buraya tıklayın.](#usage)
 
-#### Parameters {/*parameters*/}
+#### Parametreler {/*parameters*/}
 
-* `componentInstance`: An instance of the [`Component`](/reference/react/Component) subclass. For example, `this` inside a class component.
+* `componentInstance`: [`Bileşene`](/reference/react/Component) ait nesneyi ifade eder. Örnekle, React sınıf bileşeni içerisinde kullanılan `this` işaretcisi parametre olarak kullanılabilir.
 
 
-#### Returns {/*returns*/}
+#### Geri Döndürür {/*returns*/}
 
-`findDOMNode` returns the first closest browser DOM node within the given `componentInstance`. When a component renders to `null`, or renders `false`, `findDOMNode` returns `null`. When a component renders to a string, `findDOMNode` returns a text DOM node containing that value.
+`findDOMNode`, verilen `componentInstance` bileşenini içeren en yakın tarayıcı DOM nesnesini döndürür. Eğer bir bileşen `null` veya `false` olarak render edilirse, `findDOMNode` fonksiyonu `null` değerini döndürür. Eğer bileşen sadece metin içerecek şekilde render edilirse, `findDOMNode`, o değeri içeren bir metin DOM nesnesi döndürür.
 
-#### Caveats {/*caveats*/}
+#### Uyarılar {/*caveats*/}
 
-* A component may return an array or a [Fragment](/reference/react/Fragment) with multiple children. In that case `findDOMNode`, will return the DOM node corresponding to the first non-empty child.
+* React bileşeni bazı durumlarda bir [Fragment](/reference/react/Fragment) ya da bir dizi içerebilir. Bu durumda `findDOMNode` fonsiyonu içi boş olmayan ilk alt nesneyi döndürecektir.
 
-* `findDOMNode` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created), an exception will be thrown.
+* `findDOMNode` fonksiyonu sadece DOM objesi oluşturulmuş (mounted) bileşenlerde çalışır. (Bu ne demek?: Bir React bileşeninin tarayıcı DOM üzerinde bir yer edinmiş olmasına "mounted" durum denir). Eğer DOM objesi oluşturulmamış bir bileşeni `findDOMNode` ile kullanmaya çalışırsanız uygulama genelinde bir hata fırlatılır ve uygulama çalışmaz.
 
-* `findDOMNode` only returns the result at the time of your call. If a child component renders a different node later, there is no way for you to be notified of this change.
+* `findDOMNode` fonksiyonu sadece çağrıldığı döngü içerisinde çalışır. Yani bir bileşen yeniden render yapıldığında kendini güncellemez ya da tekrardan çalışmaz.
 
-* `findDOMNode` accepts a class component instance, so it can't be used with function components.
+* `findDOMNode` sadece React sınıf bileşenleri ile çalışır. React fonksiyon bileşeni yapısı ile uyumlu değildir.
 
 ---
 
-## Usage {/*usage*/}
+## Kullanım {/*usage*/}
 
-### Finding the root DOM node of a class component {/*finding-the-root-dom-node-of-a-class-component*/}
+### Sınıf bileşeninin ana DOM objesinin bulunması {/*finding-the-root-dom-node-of-a-class-component*/}
+
+Render edilmiş DOM nesnesini bulabilmek için `findDOMNode` fonksiyonunu bir React sınıf bileşeni içerisinde çağırın. (React sınıf bileşenine `this` niteliğini kullanarak erişebilirsiniz)
 
-Call `findDOMNode` with a [class component](/reference/react/Component) instance (usually, `this`) to find the DOM node it has rendered.
 
 ```js {3}
 class AutoselectingInput extends Component {
@@ -71,12 +72,20 @@ class AutoselectingInput extends Component {
   }
 
   render() {
-    return <input defaultValue="Hello" />
+    return <input defaultValue="Merhaba" />
   }
 }
 ```
 
-Here, the `input` variable will be set to the `<input>` DOM element. This lets you do something with it. For example, when clicking "Show example" below mounts the input, [`input.select()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select) selects all text in the input:
+Yukarıdaki kod parçacığında `ìnput` değişkeni `findDOMNode` fonksiyonu aracılığı ile render metodu içerisindeki `<input>` DOM nesnesine ulaşır.
+
+Şimdi ulaşılan input nesnesiyle bir şeyler yapalım. Bir `show` state'i oluşturalım ve varsayılan değeri `false` olsun. `Göster` buton elementi aracılığı ile state'i güncelliyelim. Güncellenen `show` state'i ile `<AutoSelectingInput />` bileşeni render edilsin.
+
+Alt tarafta gerekli kaynak kodu görüntüleyebilirsiniz, şimdi de neler olduğunu açıklayalım.
+
+Nihai kodda `Göster` butonuna tıklatıldığında `AutoselectingInput` bileşeni ekranda gösterilmeye başlanır. Ekranda gösterildiği için render edilir, render edildikten sonra ise `findDOMNode` fonksiyonu çağrılarak input nesnesi bulunur.
+
+Bulunan nesnede [`input.select()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select) metodu aracılığı ile içinde yazılı olan `Merhaba` yazısı seçili olarak gösterilir.
 
 <Sandpack>
 
@@ -89,7 +98,7 @@ export default function App() {
   return (
     <>
       <button onClick={() => setShow(true)}>
-        Show example
+        Göster
       </button>
       <hr />
       {show && <AutoselectingInput />}
@@ -109,7 +118,7 @@ class AutoselectingInput extends Component {
   }
 
   render() {
-    return <input defaultValue="Hello" />
+    return <input defaultValue="Merhaba" />
   }
 }
 
@@ -120,11 +129,13 @@ export default AutoselectingInput;
 
 ---
 
-## Alternatives {/*alternatives*/}
+## Alternatifler {/*alternatives*/}
+
+### Referans değerinden bileşene ait DOM nesnesine ulaşma {/*reading-components-own-dom-node-from-a-ref*/}
 
-### Reading component's own DOM node from a ref {/*reading-components-own-dom-node-from-a-ref*/}
+`findDOMNode` JSX nesnesi seçimi konusunda oldukça hassas çalışır. Bu yüzden bazen istediğimiz DOM nesnesine ulaşamayabiliriz.
 
-Code using `findDOMNode` is fragile because the connection between the JSX node and the code manipulating the corresponding DOM node is not explicit. For example, try wrapping this `<input />` into a `<div>`:
+Bu durumu daha da iyi anlayabilmek adına `<input />` elementinin bir üst katmanına `<div>` elementi ekleyelim. Eklediğimiz element `<input />`'u kapsadığından dolayı `findDOMNode` bizlere en üst element olan `<div>` DOM nesnesini döndürecektir.
 
 <Sandpack>
 
@@ -137,7 +148,7 @@ export default function App() {
   return (
     <>
       <button onClick={() => setShow(true)}>
-        Show example
+        Göster
       </button>
       <hr />
       {show && <AutoselectingInput />}
@@ -156,7 +167,7 @@ class AutoselectingInput extends Component {
     input.select()
   }
   render() {
-    return <input defaultValue="Hello" />
+    return <input defaultValue="Merhaba" />
   }
 }
 
@@ -165,9 +176,15 @@ export default AutoselectingInput;
 
 </Sandpack>
 
-This will break the code because now, `findDOMNode(this)` finds the `<div>` DOM node, but the code expects an `<input>` DOM node. To avoid these kinds of problems, use [`createRef`](/reference/react/createRef) to manage a specific DOM node.
+`findDOMNode` bizlere `<input />` elementi yerine `<div>` DOM nesnesini döndürdüğü için artık `ìnput.select()` metodu hata verecektir ve uygulamamız çalışmayacaktır.
+
+Bu sorunu çözmek adına `<input>` elementine [`createRef`](/reference/react/createRef) aracılığı ile bir referans oluşturup atayabilir. Referans üzerinden DOM nesnesine ulaşabiliriz.
+
+Alt kısımdaki örnekte `findDOMNode` yerine `createRef`'in nasıl kullanıdğını daha iyi anlayabilirsiniz.
 
-In this example, `findDOMNode` is no longer used. Instead, `inputRef = createRef(null)` is defined as an instance field on the class. To read the DOM node from it, you can use `this.inputRef.current`. To attach it to the JSX, you render `<input ref={this.inputRef} />`. This connects the code using the DOM node to its JSX:
+Açıklamak gerekirse, `ìnputRef = createRef(null)` kodunda null değer tanımlamasına sahip yeni bir referans oluşturduk. Oluşturduğumuz bu referansı `ref={this.inputRef}` niteliği aracılığıyla `input` elementine tanımladık.
+
+Bileşen oluturulduğunda ise `this.inputRef.current` notasyonu ile DOM nesnesine ulaştık ve `input.select()` metodunu yeniden kullanılabilir hale getirdik.
 
 <Sandpack>
 
@@ -212,7 +229,9 @@ export default AutoselectingInput;
 
 </Sandpack>
 
-In modern React without class components, the equivalent code would call [`useRef`](/reference/react/useRef) instead:
+Bahsettiğimiz üzere `findDOMNode` fonksiyon bileşenlerini desteklemiyordu. Referans sisteminde sınırlama olmadan fonksiyon bileşenlerinde de kullanabiliyoruz.
+
+Fonksiyon bileşenlerindeki referans kullanımında `createRef` yerini [`useRef`](/reference/react/useRef) hook'u almakta.
 
 <Sandpack>
 
@@ -225,7 +244,7 @@ export default function App() {
   return (
     <>
       <button onClick={() => setShow(true)}>
-        Show example
+        Göster
       </button>
       <hr />
       {show && <AutoselectingInput />}
@@ -245,19 +264,21 @@ export default function AutoselectingInput() {
     input.select();
   }, []);
 
-  return <input ref={inputRef} defaultValue="Hello" />
+  return <input ref={inputRef} defaultValue="Merhaba" />
 }
 ```
 
 </Sandpack>
 
-[Read more about manipulating the DOM with refs.](/learn/manipulating-the-dom-with-refs)
+[Ref'ler ile DOM Manipülasyonu hakkında daha fazla bilgi almak için tıklayın.](/learn/manipulating-the-dom-with-refs)
 
 ---
 
-### Reading a child component's DOM node from a forwarded ref {/*reading-a-child-components-dom-node-from-a-forwarded-ref*/}
+### Alt bileşene ait DOM nesnesine forwarded ref aracılığı ile ulaşma {/*reading-a-child-components-dom-node-from-a-forwarded-ref*/}
 
-In this example, `findDOMNode(this)` finds a DOM node that belongs to another component. The `AutoselectingInput` renders `MyInput`, which is your own component that renders a browser `<input>`.
+Bu örnekte, `findDOMNode(this)` ile başka bir bileşene ait DOM nesnesini bulacağız.
+
+Senaryomuzda `AutoselectingInput` bileşeni, `input` elementinin bulunduğu `MyInput` bileşenini render edecek ve bizler `findDOMNode(this)` aracılığı ile `input` elementine ulaşmaya çalışıcağız.
 
 <Sandpack>
 
@@ -305,14 +326,18 @@ export default function MyInput() {
 
 </Sandpack>
 
-Notice that calling `findDOMNode(this)` inside `AutoselectingInput` still gives you the DOM `<input>`--even though the JSX for this `<input>` is hidden inside the `MyInput` component. This seems convenient for the above example, but it leads to fragile code. Imagine that you wanted to edit `MyInput` later and add a wrapper `<div>` around it. This would break the code of `AutoselectingInput` (which expects to find an `<input>`).
+Unutmamalıyız ki `findDOMNode(this)`, `AutoselectingInput` içerisinde çağrıldığında bizlere DOM nesnesi olarak `input` elementini döndürmektedir. --bunun sebebi `AutoselectingInput`'in içinde render ettiğimiz `MyInput` bileşeninin sadece `input` elementini döndürmesidir.
+
+Ancak ilerleyen zamanlarda `MyInput` bileşeninde bir değişikliğe gidip, `input` elementini bir `div` elementi ile kapsayacak durumda olursak. Bu kod çalışmayacaktır ve uygulamamız `input` elementini bulamadığı için metod hata verecektir.
 
-To replace `findDOMNode` in this example, the two components need to coordinate:
+`findDOMNode` yerine ref kullanabilmemiz için iki bileşende de belirli düzenlemeler yapmalıyız.
 
-1. `AutoSelectingInput` should declare a ref, like [in the earlier example](#reading-components-own-dom-node-from-a-ref), and pass it to `<MyInput>`.
-2. `MyInput` should be declared with [`forwardRef`](/reference/react/forwardRef) to take that ref and forward it down to the `<input>` node.
+Bu düzenlemeler:
 
-This version does that, so it no longer needs `findDOMNode`:
+1. [Önceki örneklerde](#reading-components-own-dom-node-from-a-ref) işlediğimiz üzere `AutoSelectingInput` içinde bir referans tanımlamalıyız ve bu referansı `MyInput` bileşenine iletmeliyiz.
+2. `MyInput` bileşeni ise [`forwardRef`](/reference/react/forwardRef) aracılığı ile bir referans değer döndürmeli ki ortadaki iki referans değeri birbiriyle eşleşsin ve üst bileşen yapısında `input` elementine ait referansı kullanabilelim.
+
+Nihai versiyonda artık `findDOMNode` kullanmadan başka bir bileşen içindeki DOM nesnesine erişebildik:
 
 <Sandpack>
 
@@ -325,7 +350,7 @@ export default function App() {
   return (
     <>
       <button onClick={() => setShow(true)}>
-        Show example
+        Göster
       </button>
       <hr />
       {show && <AutoselectingInput />}
@@ -360,7 +385,7 @@ export default AutoselectingInput;
 import { forwardRef } from 'react';
 
 const MyInput = forwardRef(function MyInput(props, ref) {
-  return <input ref={ref} defaultValue="Hello" />;
+  return <input ref={ref} defaultValue="Merhaba" />;
 });
 
 export default MyInput;
@@ -368,7 +393,7 @@ export default MyInput;
 
 </Sandpack>
 
-Here is how this code would look like with function components instead of classes:
+Alt taraftaki örnek ise aynı kodun fonksiyon bileşeninde nasıl kullanılacağını gösteriyor.
 
 <Sandpack>
 
@@ -381,7 +406,7 @@ export default function App() {
   return (
     <>
       <button onClick={() => setShow(true)}>
-        Show example
+        Göster
       </button>
       <hr />
       {show && <AutoselectingInput />}
@@ -402,7 +427,7 @@ export default function AutoselectingInput() {
     input.select();
   }, []);
 
-  return <MyInput ref={inputRef} defaultValue="Hello" />
+  return <MyInput ref={inputRef} defaultValue="Merhaba" />
 }
 ```
 
@@ -410,7 +435,7 @@ export default function AutoselectingInput() {
 import { forwardRef } from 'react';
 
 const MyInput = forwardRef(function MyInput(props, ref) {
-  return <input ref={ref} defaultValue="Hello" />;
+  return <input ref={ref} defaultValue="Merhaba" />;
 });
 
 export default MyInput;
@@ -420,11 +445,13 @@ export default MyInput;
 
 ---
 
-### Adding a wrapper `<div>` element {/*adding-a-wrapper-div-element*/}
+### Kapsayıcı `<div>` elementini ekleme {/*adding-a-wrapper-div-element*/}
+
+Bazen bir bileşenin alt bileşenlerinin konumunu ve boyutunu bilmesi gerekir. Bu durum, `findDOMNode(this)` ile bulunan nesnelerle ve ardından ölçümler için bu nesnelerin [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) gibi DOM yöntemleriyle kullanılmasıyla sonuçlanır.
 
-Sometimes a component needs to know the position and size of its children. This makes it tempting to find the children with `findDOMNode(this)`, and then use DOM methods like [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) for measurements.
+Şu anda bu kullanım durumu için doğrudan bir eşdeğer alternatif yoktur, bu nedenle `findDOMNode` kullanımdan kaldırılmış olsa da henüz React'tan tamamen kaldırılmamıştır.
 
-There is currently no direct equivalent for this use case, which is why `findDOMNode` is deprecated but is not yet removed completely from React. In the meantime, you can try rendering a wrapper `<div>` node around the content as a workaround, and getting a ref to that node. However, extra wrappers can break styling.
+Bu durumda çözüm olarak içeriği kapasayacak bir `<div>` elementi oluşturabiliriz. Oluşturduğumuz `<div>` elementinin referansı üzerinden yürüyerek işlemlerimizi yapabiliriz. Ancak unutmamak gerekir ki ekstra oluşturduğumuz kapsayıcılar stil bozulmalarına sebep olabilir.
 
 ```js
 <div ref={someRef}>
@@ -432,4 +459,4 @@ There is currently no direct equivalent for this use case, which is why `findDOM
 </div>
 ```
 
-This also applies to focusing and scrolling to arbitrary children.
+Bu aynı zamanda alt bileşenlere focusing ve scrolling olayları için de geçerlidir.

From 61f664f4de86392294f0b73a47d1782889d6b692 Mon Sep 17 00:00:00 2001
From: Enes Bayraktar <enes.bayraktar@outlook.com.tr>
Date: Wed, 4 Oct 2023 15:25:15 +0300
Subject: [PATCH 2/4] refactor: Resolve review change

refactor: Fix typo
---
 .../reference/react-dom/findDOMNode.md        | 54 ++++++++-----------
 1 file changed, 23 insertions(+), 31 deletions(-)

diff --git a/src/content/reference/react-dom/findDOMNode.md b/src/content/reference/react-dom/findDOMNode.md
index c773e97b5..0cb4145ac 100644
--- a/src/content/reference/react-dom/findDOMNode.md
+++ b/src/content/reference/react-dom/findDOMNode.md
@@ -4,7 +4,7 @@ title: findDOMNode
 
 <Deprecated>
 
-Bu başvuru ilerleyen React sürümlerinde kaldırılabilir. [Alternatif başvuruları görüntüle.](#alternatives)
+Bu API, React'in gelecekteki bir ana sürümünde kaldırılacaktır. [Alternatif API'ları görüntüle.](#alternatives)
 
 </Deprecated>
 
@@ -22,11 +22,11 @@ const domNode = findDOMNode(componentInstance)
 
 ---
 
-## Başvuru dökümanı {/*reference*/}
+## Referans {/*reference*/}
 
 ### `findDOMNode(componentInstance)` {/*finddomnode*/}
 
-Bir, React [sınıf bileşenine](/reference/react/Component) ait DOM nesnesini bulmak için `findDOMNode` fonksiyonunu kullanın.
+Bir React [sınıf bileşenine](/reference/react/Component) ait DOM nesnesini bulmak için `findDOMNode` fonksiyonunu çağırın.
 
 ```js
 import { findDOMNode } from 'react-dom';
@@ -41,19 +41,19 @@ const domNode = findDOMNode(componentInstance);
 * `componentInstance`: [`Bileşene`](/reference/react/Component) ait nesneyi ifade eder. Örnekle, React sınıf bileşeni içerisinde kullanılan `this` işaretcisi parametre olarak kullanılabilir.
 
 
-#### Geri Döndürür {/*returns*/}
+#### Dönüş Değerleri {/*returns*/}
 
-`findDOMNode`, verilen `componentInstance` bileşenini içeren en yakın tarayıcı DOM nesnesini döndürür. Eğer bir bileşen `null` veya `false` olarak render edilirse, `findDOMNode` fonksiyonu `null` değerini döndürür. Eğer bileşen sadece metin içerecek şekilde render edilirse, `findDOMNode`, o değeri içeren bir metin DOM nesnesi döndürür.
+`findDOMNode`, verilen `componentInstance` bileşenini içeren en yakın DOM nesnesini döndürür. Eğer bir bileşen `null` veya `false` olarak render edilirse, `findDOMNode` fonksiyonu `null` değerini döndürür. Eğer bileşen sadece metin içerecek şekilde render edilirse, `findDOMNode`, o değeri içeren bir metin DOM nesnesi döndürür.
 
 #### Uyarılar {/*caveats*/}
 
 * React bileşeni bazı durumlarda bir [Fragment](/reference/react/Fragment) ya da bir dizi içerebilir. Bu durumda `findDOMNode` fonsiyonu içi boş olmayan ilk alt nesneyi döndürecektir.
 
-* `findDOMNode` fonksiyonu sadece DOM objesi oluşturulmuş (mounted) bileşenlerde çalışır. (Bu ne demek?: Bir React bileşeninin tarayıcı DOM üzerinde bir yer edinmiş olmasına "mounted" durum denir). Eğer DOM objesi oluşturulmamış bir bileşeni `findDOMNode` ile kullanmaya çalışırsanız uygulama genelinde bir hata fırlatılır ve uygulama çalışmaz.
+* `findDOMNode` fonksiyonu sadece render edilmiş bileşenlerde çalışır. (Yani, bir bileşenin DOM üzerinde bir yer edinmiş olması gerekir). Eğer render edilmemiş bir bileşen için `findDOMNode` fonksiyonunu çağırmaya çalışırsanız (Örn: `findDOMNode()` fonksiyonunu, henüz oluşturulmamış bir bileşenin `render()` fonksiyonu içerisinde çağırırsanız) uygulama genelinde bir hata fırlatılır ve uygulama çalışmaz.
 
-* `findDOMNode` fonksiyonu sadece çağrıldığı döngü içerisinde çalışır. Yani bir bileşen yeniden render yapıldığında kendini güncellemez ya da tekrardan çalışmaz.
+* `findDOMNode` fonksiyonu sadece çağırıldığı andaki sonucu döndürür. Eğer alt bileşen daha sonradan farklı bir node render eder ise bu değişimden haberdar olmak mümkün değildir.
 
-* `findDOMNode` sadece React sınıf bileşenleri ile çalışır. React fonksiyon bileşeni yapısı ile uyumlu değildir.
+* `findDOMNode` sadece React sınıf bileşenleri ile çalışır, React fonksiyon bileşeni yapısı ile kullanılamaz.
 
 ---
 
@@ -79,11 +79,11 @@ class AutoselectingInput extends Component {
 
 Yukarıdaki kod parçacığında `ìnput` değişkeni `findDOMNode` fonksiyonu aracılığı ile render metodu içerisindeki `<input>` DOM nesnesine ulaşır.
 
-Şimdi ulaşılan input nesnesiyle bir şeyler yapalım. Bir `show` state'i oluşturalım ve varsayılan değeri `false` olsun. `Göster` buton elementi aracılığı ile state'i güncelliyelim. Güncellenen `show` state'i ile `<AutoSelectingInput />` bileşeni render edilsin.
+Şimdi ulaşılan input nesnesiyle bir şeyler yapalım. Bir `show` state'i oluşturalım ve varsayılan değeri `false` olsun. `Göster` buton elementi aracılığı ile state'i güncelleyelim. Güncellenen `show` state'i ile `<AutoSelectingInput />` bileşeni render edilsin.
 
 Alt tarafta gerekli kaynak kodu görüntüleyebilirsiniz, şimdi de neler olduğunu açıklayalım.
 
-Nihai kodda `Göster` butonuna tıklatıldığında `AutoselectingInput` bileşeni ekranda gösterilmeye başlanır. Ekranda gösterildiği için render edilir, render edildikten sonra ise `findDOMNode` fonksiyonu çağrılarak input nesnesi bulunur.
+`Göster` butonuna tıklandığında `AutoselectingInput` bileşeni render edilir ve tarayıcı ekranında görünür hale gelir. Ardından `findDOMNode` fonksiyonu çağrılarak input nesnesi bulunur.
 
 Bulunan nesnede [`input.select()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select) metodu aracılığı ile içinde yazılı olan `Merhaba` yazısı seçili olarak gösterilir.
 
@@ -133,9 +133,7 @@ export default AutoselectingInput;
 
 ### Referans değerinden bileşene ait DOM nesnesine ulaşma {/*reading-components-own-dom-node-from-a-ref*/}
 
-`findDOMNode` JSX nesnesi seçimi konusunda oldukça hassas çalışır. Bu yüzden bazen istediğimiz DOM nesnesine ulaşamayabiliriz.
-
-Bu durumu daha da iyi anlayabilmek adına `<input />` elementinin bir üst katmanına `<div>` elementi ekleyelim. Eklediğimiz element `<input />`'u kapsadığından dolayı `findDOMNode` bizlere en üst element olan `<div>` DOM nesnesini döndürecektir.
+`findDOMNode` fonksiyonunun kullanıldığı kodlar kırılgan kodlardır. Çünkü JSX nesnesi ile DOM nesnesi arasındaki bağlantı açık bir şekilde ifade edilmemektedir. Örn, kod içerisindeki `<input />` kısmını `<div>` ile sarmayı deneyelim:
 
 <Sandpack>
 
@@ -176,15 +174,15 @@ export default AutoselectingInput;
 
 </Sandpack>
 
-`findDOMNode` bizlere `<input />` elementi yerine `<div>` DOM nesnesini döndürdüğü için artık `ìnput.select()` metodu hata verecektir ve uygulamamız çalışmayacaktır.
+Bu kullanım kodun çalışmasına engel olacaktır. Çünkü `findDOMNode` geriye `<div>` DOM nesnesini döndürecektir fakat kod dönüş değerinin `<input />` DOM nesnesi olmasını bekler.
 
-Bu sorunu çözmek adına `<input>` elementine [`createRef`](/reference/react/createRef) aracılığı ile bir referans oluşturup atayabilir. Referans üzerinden DOM nesnesine ulaşabiliriz.
+Bu tür problemlerin önüne geçmek spesifik bir DOM nesnesi seçebilen için [`createRef`](/reference/react/createRef) fonksiyonunu kullanın.
 
 Alt kısımdaki örnekte `findDOMNode` yerine `createRef`'in nasıl kullanıdğını daha iyi anlayabilirsiniz.
 
-Açıklamak gerekirse, `ìnputRef = createRef(null)` kodunda null değer tanımlamasına sahip yeni bir referans oluşturduk. Oluşturduğumuz bu referansı `ref={this.inputRef}` niteliği aracılığıyla `input` elementine tanımladık.
+Bu örnekte, `ìnputRef = createRef(null)` kodunda `null` değer tanımlamasına sahip yeni bir referans oluşturduk. Oluşturduğumuz bu referansı `ref={this.inputRef}` niteliği aracılığıyla `input` elementine tanımladık.
 
-Bileşen oluturulduğunda ise `this.inputRef.current` notasyonu ile DOM nesnesine ulaştık ve `input.select()` metodunu yeniden kullanılabilir hale getirdik.
+Bileşen oluşturulduğunda ise `this.inputRef.current` notasyonu ile DOM nesnesine ulaştık ve `input.select()` metodunu yeniden kullanılabilir hale getirdik.
 
 <Sandpack>
 
@@ -270,15 +268,13 @@ export default function AutoselectingInput() {
 
 </Sandpack>
 
-[Ref'ler ile DOM Manipülasyonu hakkında daha fazla bilgi almak için tıklayın.](/learn/manipulating-the-dom-with-refs)
+[Ref'ler ile DOM manipülasyonu hakkında daha fazla bilgi almak için tıklayın.](/learn/manipulating-the-dom-with-refs)
 
 ---
 
 ### Alt bileşene ait DOM nesnesine forwarded ref aracılığı ile ulaşma {/*reading-a-child-components-dom-node-from-a-forwarded-ref*/}
 
-Bu örnekte, `findDOMNode(this)` ile başka bir bileşene ait DOM nesnesini bulacağız.
-
-Senaryomuzda `AutoselectingInput` bileşeni, `input` elementinin bulunduğu `MyInput` bileşenini render edecek ve bizler `findDOMNode(this)` aracılığı ile `input` elementine ulaşmaya çalışıcağız.
+Bu örnekte, `findDOMNode(this)` ile başka bir bileşene ait DOM nesnesini bulacağız. `AutoselectingInput` bileşeni, `input` elementinin bulunduğu `MyInput` bileşenini render edecek ve `findDOMNode(this)` fonksiyonunu kullanarak `input` elementine ulaşmaya çalışacağız.
 
 <Sandpack>
 
@@ -326,14 +322,10 @@ export default function MyInput() {
 
 </Sandpack>
 
-Unutmamalıyız ki `findDOMNode(this)`, `AutoselectingInput` içerisinde çağrıldığında bizlere DOM nesnesi olarak `input` elementini döndürmektedir. --bunun sebebi `AutoselectingInput`'in içinde render ettiğimiz `MyInput` bileşeninin sadece `input` elementini döndürmesidir.
-
-Ancak ilerleyen zamanlarda `MyInput` bileşeninde bir değişikliğe gidip, `input` elementini bir `div` elementi ile kapsayacak durumda olursak. Bu kod çalışmayacaktır ve uygulamamız `input` elementini bulamadığı için metod hata verecektir.
+`AutoselectingInput` içindeki `findDOMNode(this)` çağrısının size hala DOM `<input>` verdiğini unutmayın; bu `<input>` için JSX `MyInput` bileşeninin içinde gizli olsa bile. Bu, yukarıdaki örnek için uygun gibi görünse de kodun kırılgan olmasına neden olur. Daha sonra `MyInput`'u düzenlemek ve etrafına bir `<div>` sarmalayıcısı eklemek istediğinizi düşünün. Bu durumda, (bir `<input>` bulmayı bekleyen) `AutoselectingInput` bileşeni doğru çalışmayacaktır.
 
 `findDOMNode` yerine ref kullanabilmemiz için iki bileşende de belirli düzenlemeler yapmalıyız.
 
-Bu düzenlemeler:
-
 1. [Önceki örneklerde](#reading-components-own-dom-node-from-a-ref) işlediğimiz üzere `AutoSelectingInput` içinde bir referans tanımlamalıyız ve bu referansı `MyInput` bileşenine iletmeliyiz.
 2. `MyInput` bileşeni ise [`forwardRef`](/reference/react/forwardRef) aracılığı ile bir referans değer döndürmeli ki ortadaki iki referans değeri birbiriyle eşleşsin ve üst bileşen yapısında `input` elementine ait referansı kullanabilelim.
 
@@ -393,7 +385,7 @@ export default MyInput;
 
 </Sandpack>
 
-Alt taraftaki örnek ise aynı kodun fonksiyon bileşeninde nasıl kullanılacağını gösteriyor.
+Aşağıdaki örnek bu kodun sınıf bileşeni yerine fonksiyon bileşeninde nasıl kullanılacağını gösteriyor:
 
 <Sandpack>
 
@@ -445,13 +437,13 @@ export default MyInput;
 
 ---
 
-### Kapsayıcı `<div>` elementini ekleme {/*adding-a-wrapper-div-element*/}
+### Kapsayıcı `<div>` elementi ekleme {/*adding-a-wrapper-div-element*/}
 
 Bazen bir bileşenin alt bileşenlerinin konumunu ve boyutunu bilmesi gerekir. Bu durum, `findDOMNode(this)` ile bulunan nesnelerle ve ardından ölçümler için bu nesnelerin [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) gibi DOM yöntemleriyle kullanılmasıyla sonuçlanır.
 
-Şu anda bu kullanım durumu için doğrudan bir eşdeğer alternatif yoktur, bu nedenle `findDOMNode` kullanımdan kaldırılmış olsa da henüz React'tan tamamen kaldırılmamıştır.
+Şu anda bu kullanım için doğrudan bir alternatif yoktur, bu nedenle `findDOMNode` kullanımdan kaldırılmış olsa da henüz React'tan tamamen kaldırılmamıştır.
 
-Bu durumda çözüm olarak içeriği kapasayacak bir `<div>` elementi oluşturabiliriz. Oluşturduğumuz `<div>` elementinin referansı üzerinden yürüyerek işlemlerimizi yapabiliriz. Ancak unutmamak gerekir ki ekstra oluşturduğumuz kapsayıcılar stil bozulmalarına sebep olabilir.
+Bu durumda çözüm olarak içeriği kapasayacak bir `<div>` elementi oluşturabilirsiniz ve oluşturduğunuz `<div>` elementine bir referans tanımlayabilirsiniz. Ancak unutmamak gerekir ki ekstra oluşturduğunuz kapsayıcılar stil bozulmalarına sebep olabilir.
 
 ```js
 <div ref={someRef}>
@@ -459,4 +451,4 @@ Bu durumda çözüm olarak içeriği kapasayacak bir `<div>` elementi oluşturab
 </div>
 ```
 
-Bu aynı zamanda alt bileşenlere focusing ve scrolling olayları için de geçerlidir.
+Bu aynı zamanda alt bileşenlere `focusing` ve `scrolling` olayları için de geçerlidir.

From 19230535efdebd5c63bd9d8567b84ec5eb531131 Mon Sep 17 00:00:00 2001
From: Enes Bayraktar <enes.bayraktar@outlook.com.tr>
Date: Thu, 5 Oct 2023 14:45:48 +0300
Subject: [PATCH 3/4] refactor: fix dom node translate

refactor: fix a class component translate
---
 src/content/reference/react-dom/findDOMNode.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/reference/react-dom/findDOMNode.md b/src/content/reference/react-dom/findDOMNode.md
index 0cb4145ac..3074e2d08 100644
--- a/src/content/reference/react-dom/findDOMNode.md
+++ b/src/content/reference/react-dom/findDOMNode.md
@@ -10,7 +10,7 @@ Bu API, React'in gelecekteki bir ana sürümünde kaldırılacaktır. [Alternati
 
 <Intro>
 
-`findDOMNode`, fonksiyonu React [sınıf bileşenine](/reference/react/Component) ait tarayıcı DOM nesnesini döndürür.
+`findDOMNode`, React bir [sinif bileseni](/reference/react/Component) nesnesine ait tarayıcı DOM düğümünü döndürür.
 
 ```js
 const domNode = findDOMNode(componentInstance)
@@ -26,7 +26,7 @@ const domNode = findDOMNode(componentInstance)
 
 ### `findDOMNode(componentInstance)` {/*finddomnode*/}
 
-Bir React [sınıf bileşenine](/reference/react/Component) ait DOM nesnesini bulmak için `findDOMNode` fonksiyonunu çağırın.
+Bir React [sınıf bileşenine](/reference/react/Component) ait DOM düğümünü bulmak için `findDOMNode` fonksiyonunu çağırın.
 
 ```js
 import { findDOMNode } from 'react-dom';
@@ -43,7 +43,7 @@ const domNode = findDOMNode(componentInstance);
 
 #### Dönüş Değerleri {/*returns*/}
 
-`findDOMNode`, verilen `componentInstance` bileşenini içeren en yakın DOM nesnesini döndürür. Eğer bir bileşen `null` veya `false` olarak render edilirse, `findDOMNode` fonksiyonu `null` değerini döndürür. Eğer bileşen sadece metin içerecek şekilde render edilirse, `findDOMNode`, o değeri içeren bir metin DOM nesnesi döndürür.
+`findDOMNode`, verilen `componentInstance` bileşenini içeren en yakın DOM düğümünü döndürür. Eğer bir bileşen `null` veya `false` olarak render edilirse, `findDOMNode` fonksiyonu `null` değerini döndürür. Eğer bileşen sadece metin içerecek şekilde render edilirse, `findDOMNode`, o değeri içeren bir metin DOM nesnesi döndürür.
 
 #### Uyarılar {/*caveats*/}
 
@@ -61,7 +61,7 @@ const domNode = findDOMNode(componentInstance);
 
 ### Sınıf bileşeninin ana DOM objesinin bulunması {/*finding-the-root-dom-node-of-a-class-component*/}
 
-Render edilmiş DOM nesnesini bulabilmek için `findDOMNode` fonksiyonunu bir React sınıf bileşeni içerisinde çağırın. (React sınıf bileşenine `this` niteliğini kullanarak erişebilirsiniz)
+Render edilmiş DOM düğümünü bulabilmek için `findDOMNode` fonksiyonunu bir React sınıf bileşeni içerisinde çağırın. (React sınıf bileşenine `this` niteliğini kullanarak erişebilirsiniz)
 
 
 ```js {3}
@@ -174,7 +174,7 @@ export default AutoselectingInput;
 
 </Sandpack>
 
-Bu kullanım kodun çalışmasına engel olacaktır. Çünkü `findDOMNode` geriye `<div>` DOM nesnesini döndürecektir fakat kod dönüş değerinin `<input />` DOM nesnesi olmasını bekler.
+Bu kullanım kodun çalışmasına engel olacaktır. Çünkü `findDOMNode` geriye `<div>` DOM düğümünü döndürecektir fakat kod dönüş değerinin `<input />` DOM nesnesi olmasını bekler.
 
 Bu tür problemlerin önüne geçmek spesifik bir DOM nesnesi seçebilen için [`createRef`](/reference/react/createRef) fonksiyonunu kullanın.
 
@@ -274,7 +274,7 @@ export default function AutoselectingInput() {
 
 ### Alt bileşene ait DOM nesnesine forwarded ref aracılığı ile ulaşma {/*reading-a-child-components-dom-node-from-a-forwarded-ref*/}
 
-Bu örnekte, `findDOMNode(this)` ile başka bir bileşene ait DOM nesnesini bulacağız. `AutoselectingInput` bileşeni, `input` elementinin bulunduğu `MyInput` bileşenini render edecek ve `findDOMNode(this)` fonksiyonunu kullanarak `input` elementine ulaşmaya çalışacağız.
+Bu örnekte, `findDOMNode(this)` ile başka bir bileşene ait DOM düğümünü bulacağız. `AutoselectingInput` bileşeni, `input` elementinin bulunduğu `MyInput` bileşenini render edecek ve `findDOMNode(this)` fonksiyonunu kullanarak `input` elementine ulaşmaya çalışacağız.
 
 <Sandpack>
 

From 3b19cebc10049cee6e9561904efac5ba3b9144a5 Mon Sep 17 00:00:00 2001
From: Enes Bayraktar <enes.bayraktar@outlook.com.tr>
Date: Thu, 5 Oct 2023 15:36:44 +0300
Subject: [PATCH 4/4] refactor: fix typo

---
 src/content/reference/react-dom/findDOMNode.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/findDOMNode.md b/src/content/reference/react-dom/findDOMNode.md
index 3074e2d08..d1d1f999c 100644
--- a/src/content/reference/react-dom/findDOMNode.md
+++ b/src/content/reference/react-dom/findDOMNode.md
@@ -10,7 +10,7 @@ Bu API, React'in gelecekteki bir ana sürümünde kaldırılacaktır. [Alternati
 
 <Intro>
 
-`findDOMNode`, React bir [sinif bileseni](/reference/react/Component) nesnesine ait tarayıcı DOM düğümünü döndürür.
+`findDOMNode`, bir [sınıf bileşeni](/reference/react/Component) nesnesine ait tarayıcı DOM düğümünü döndürür.
 
 ```js
 const domNode = findDOMNode(componentInstance)