You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/manipulating-the-dom-with-refs.md
+1-14Lines changed: 1 addition & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -644,21 +644,12 @@ Ancak bu hiç yapamayacağınız anlamına gelmez. Dikkat gerektirir. **React'in
644
644
645
645
<Recap>
646
646
647
-
<<<<<<<HEAD
648
647
- Ref'ler genel bir kavramdır ancak çoğu zaman bunları DOM elemanlarını tutmak için kullanırsınız.
649
648
- React'e `<div ref={myRef}>` elemanını geçerek `myRef.current`'a bir DOM elemanı koymasını söylersiniz.
650
649
- Genellikle DOM elemanlarına odaklama, kaydırma veya ölçme gibi zararsız işlevler için ref'leri kullanırsınız.
651
650
- Bir bileşen varsayılan olarak DOM elemanlarını göstermez. `forwardRef` kullanarak ve ikinci `ref` parametresini belirli bir elemana geçirerek bir DOM elemanını göstermeyi seçebilirsiniz.
652
651
- React tarafından yönetilen DOM elemanlarını değiştirmekten kaçının.
653
652
- React tarafından yönetilen DOM elemanlarını değiştirmek isterseniz React'in güncellemek için bir nedeni olmayan kısımlarını değiştirin.
654
-
=======
655
-
- Refs are a generic concept, but most often you'll use them to hold DOM elements.
656
-
- You instruct React to put a DOM node into `myRef.current` by passing `<div ref={myRef}>`.
657
-
- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
658
-
-A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using the `ref` prop.
659
-
- Avoid changing DOM nodes managed by React.
660
-
- If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
661
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
662
653
663
654
</Recap>
664
655
@@ -1058,11 +1049,7 @@ img {
1058
1049
1059
1050
<Hint>
1060
1051
1061
-
<<<<<<< HEAD
1062
-
`SearchInput` gibi kendi bileşeninizden bir DOM elemanı gösterebilmek için `forwardRef`'e ihtiyacınız olacak.
1063
-
=======
1064
-
You'll need to pass `ref` as a prop to opt into exposing a DOM node from your own component like `SearchInput`.
1065
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
1052
+
Kendi bileşeniniz olan `SearchInput` gibi bir bileşenden bir DOM düğümünü dışa açmak için `ref`'i bir prop olarak iletmeniz gerekecek.
Copy file name to clipboardExpand all lines: src/content/learn/render-and-commit.md
-17Lines changed: 0 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -70,15 +70,9 @@ export default function Image() {
70
70
Bir bileşen ilk defa render edildikten sonra, [`set` fonksiyonu](/reference/react/useState#setstate) ile state'i güncelleyerek bileşenin tekrar render edilmesini sağlayabilirsiniz. Bileşeninizin state'ini güncellemek otomatik olarak sıraya bir render almaktadır. (Bunu restorandaki bir müşterinin susuzluk ve açlık durumuna göre ilk siparişini verdikten sonra çay, tatlı ve benzeri şeyleri sipariş etmesi gibi düşünebilirsiniz.)
71
71
72
72
<IllustrationBlocksequential>
73
-
<<<<<<< HEAD
74
-
<Illustrationcaption="State'i güncelle..."alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!"src="/images/docs/illustrations/i_rerender1.png" />
75
-
<Illustrationcaption="...tetikle..."alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card."src="/images/docs/illustrations/i_rerender2.png" />
76
-
<Illustrationcaption="...render et!"alt="The Card Chef gives React the pink Card."src="/images/docs/illustrations/i_rerender3.png" />
77
-
=======
78
73
<Illustrationcaption="State update..."alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. The patron expresses they want a pink card, not a black one!"src="/images/docs/illustrations/i_rerender1.png" />
79
74
<Illustrationcaption="...triggers..."alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card."src="/images/docs/illustrations/i_rerender2.png" />
80
75
<Illustrationcaption="...render!"alt="The Card Chef gives React the pink Card."src="/images/docs/illustrations/i_rerender3.png" />
81
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
82
76
</IllustrationBlock>
83
77
84
78
## 2. Adım: React bileşeninizi render eder {/*step-2-react-renders-your-components*/}
@@ -90,11 +84,7 @@ Bir render tetiklediğiniz zaman React, ekranda neyin görüntüleneceğini beli
90
84
91
85
Bu süreç recursive'dir (özyinelemeli): eğer güncellenmiş bileşen başka bir bileşen döndürüyorsa React bir sonra _o_ bileşeni render edecek, o bileşen de bir şey döndürüyorsa React bir sonra _o_ bileşeni render edecektir. Bu süreç daha fazla iç içe geçmiş bileşen kalmayıncaya ve React ekranda neyin görüntülenmesi gerektiğini bilene kadar deveam edecektir.
92
86
93
-
<<<<<<< HEAD
94
87
Aşağıdaki örnekte React, `Gallery()` ve `Image()` bileşenlerini birkaç kez çağıracaktır:
95
-
=======
96
-
In the following example, React will call `Gallery()` and `Image()` several times:
97
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
98
88
99
89
<Sandpack>
100
90
@@ -158,17 +148,10 @@ Eğer güncellenen bileşen ağaçta çok yüksekteyse (üst bir eleman ise), g
158
148
159
149
## 3. Adım: React değişiklikleri DOM'a işler {/*step-3-react-commits-changes-to-the-dom*/}
160
150
161
-
<<<<<<< HEAD
162
-
Bileşenleriniz render edildikten (çağırıldıktan) sonra React, DOM'u değiştirir.
163
-
164
-
***İlk render için** React, [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API'nı kullanarak tüm DOM node'larını ekranda görüntüler.
165
-
***Yeniden renderler için** React, DOM'un son render'daki çıktıyla eşleşmesi için gerekli olan asgari hesaplamaları (render edilme esnasında hesaplanmış!) yapar.
166
-
=======
167
151
After rendering (calling) your components, React will modify the DOM.
168
152
169
153
***For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen.
170
154
***For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
171
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
172
155
173
156
**React DOM node'larını sadece render'lar arasında farklılık varsa değiştirir.** Örneğin aşağıda, üst bileşeninden her saniye aldığı farklı prop'lar ile yeniden render edilen bir bileşen var. `<input>` elementine yazı yazmanıza ve `değerini` güncellemenize rağmen yeniden render edilen bileşende yazdığınız yazının kaybolmadığına dikkat edin:
Bu örnekte düğme tıklandığında kullanıcının adını istemesi ve ardından onları selamlayan bir uyarı görüntülemesi gerekiyordu. İsim bilgisini tutmak için state kullanmaya çalıştınız, ancak her zaman "Merhaba, !" şeklinde görüntüleniyor.
1457
-
=======
1458
-
When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason the first time it shows "Hello, !", and then "Hello, [name]!" with the previous input every time after.
1459
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
1460
1456
1461
1457
Bu kodu düzeltmek için gereksiz state değişkenini kaldırın. ([Bunun neden işe yaramadığını](/learn/state-as-a-snapshot) daha sonra tartışacağız.)
Copy file name to clipboardExpand all lines: src/content/learn/tutorial-tic-tac-toe.md
-16Lines changed: 0 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -295,11 +295,7 @@ export default function Square() {
295
295
}
296
296
```
297
297
298
-
<<<<<<< HEAD
299
298
_Tarayıcı_ bölümü, içinde X olan bir kare göstermelidir:
300
-
=======
301
-
The _browser_ section should be displaying a square with an X in it like this:
302
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
303
299
304
300

305
301
@@ -1329,11 +1325,7 @@ Bir kullanıcı tahtadaki solt üst kareye bir `X` eklemek için tıkladığınd
1329
1325
1. `handleClick` fonksiyonu (`0`) argümanını `square` dizisinin ilk elemanını `null`'dan `X`'e güncellemek için kullanır.
1330
1326
1. `Board` bileşeninin `squares` state'i güncellendi, bundan dolayı `Board` bileşeni ve alt bileşenleri yeniden renderlandı. Bu da `0` indeksli `Square` bileşeninin `value` prop'unun `null`'dan `X`'e değişmesine neden oldu.
1331
1327
1332
-
<<<<<<< HEAD
1333
1328
Sonuçta, kullanıcı tıklamayı yaptıktan sonra sol üst karenin `X` ile doldurulduğunu gördü.
1334
-
=======
1335
-
In the end the user sees that the upper left square has changed from empty to having an `X` after clicking it.
1336
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
1337
1329
1338
1330
<Note>
1339
1331
@@ -1414,11 +1406,7 @@ Ama durun, bir sorun var. Aynı kareye birden çok kez tıklamayı deneyin:
1414
1406
1415
1407
`X`'in üzerine bir `O` yazılıyor! Bu oyuna çok ilginç bir değişiklik katacak olsa da, şimdilik orijinal kurallara bağlı kalacağız.
1416
1408
1417
-
<<<<<<< HEAD
1418
1409
Bir kareyi `X` veya `O` ile işaretlediğinizde, önce karenin zaten bir `X` veya `O` değerine sahip olup olmadığını kontrol etmiyorsunuz. Bunu *erken döndürerek* düzeltebilirsiniz. Karenin zaten bir `X` veya `O` değerine sahip olup olmadığını kontrol edeceksiniz. Eğer kare zaten doluysa, `handleClick` fonksiyonunda erken `return` yapacaksınız - tahta state'ini güncellemeye çalışmadan önce.
1419
-
=======
1420
-
When you mark a square with an `X` or an `O` you aren't first checking to see if the square already has an `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has an `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
1421
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
1422
1410
1423
1411
```js {2,3,4}
1424
1412
functionhandleClick(i) {
@@ -1568,11 +1556,7 @@ function calculateWinner(squares) {
1568
1556
1569
1557
</Note>
1570
1558
1571
-
<<<<<<< HEAD
1572
1559
Bir oyuncunun kazanıp kazanmadığını kontrol etmek için `Board` bileşeninin `handleClick` fonksiyonunda `calculateWinner(squares)` fonksiyonunu çağıracaksınız. Bu kontrolü, kullanıcının zaten `X` veya `O` olan bir kareye tıklayıp tıklamadığını kontrol ederken aynı anda gerçekleştirebilirsiniz. Her iki durumda da erken döndürmek istiyoruz:
1573
-
=======
1574
-
You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has an `X` or an `O`. We'd like to return early in both cases:
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/input.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -298,11 +298,7 @@ Tüm `<input>` elemanlarınıza bir `name` değeri verin, örneğin `<input name
298
298
299
299
<Pitfall>
300
300
301
-
<<<<<<< HEAD
302
-
Varsayılan olarak `<form>` içindeki *herhangi bir*`<button>` elemanı forumu gönderecektir. Bu biraz şaşırtıcı olabilir, kendinize ait React `Button` elemanınız varsa, `<button>` yerine [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) döndürmeyi düşünebilirsiniz. Daha açık olmak gerekise formu göndermesi gereken *butonlar* için `<button type="submit">` kullanınız.
303
-
=======
304
-
By default, a `<button>` inside a `<form>` without a `type` attribute will submit it. This can be surprising! If you have your own custom `Button` React component, consider using [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) instead of `<button>` (with no type). Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
305
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
301
+
Varsayılan olarak, `type` niteliği olmayan bir `<form>` içindeki bir `<button>` formu gönderir. Bu şaşırtıcı olabilir! Kendi özel `Button` React bileşeniniz varsa, `<button>` (type belirtilmeden) yerine [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) kullanmayı düşünün. Daha açık olmak için, formu gerçekten *göndermesi gereken* butonlar için `<button type="submit">` kullanın.
Copy file name to clipboardExpand all lines: src/content/reference/react/useDeferredValue.md
+1-7Lines changed: 1 addition & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -88,15 +88,9 @@ Güncellemeler esnasında, <CodeStep step={2}>ertelenmiş değer</CodeStep> en s
88
88
89
89
Bu örnekte Suspense etkinleştirilmiş veri kaynaklarından birini kullandığınız varsayılmaktadır:
90
90
91
-
<<<<<<< HEAD
92
-
-[Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) ve [Next.js](https://nextjs.org/docs/getting-started/react-essentials) gibi Suspense etkinleştirilmiş framework'ler vasıtasıyla veri çekilmesi
91
+
- Suspense'in etkinleştirildiği çerçevelerle veri çekme [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) ve [Next.js](https://nextjs.org/docs/app/getting-started/fetching-data#with-suspense)
93
92
-[`lazy`](/reference/react/lazy) ile bileşen kodunun lazy yüklenmesi
94
93
-[`use`](/reference/react/use) ile bir Promise'in değerini okuma.
95
-
=======
96
-
- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/getting-started/fetching-data#with-suspense)
97
-
- Lazy-loading component code with [`lazy`](/reference/react/lazy)
98
-
- Reading the value of a Promise with [`use`](/reference/react/use)
99
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
100
94
101
95
[Suspense ve sınırlamaları hakkında daha fazla bilgi edinin.](/reference/react/Suspense)
Copy file name to clipboardExpand all lines: src/content/reference/rsc/server-components.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -299,8 +299,4 @@ function Comments({commentsPromise}) {
299
299
300
300
`note` içeriği, sayfanın render edilmesi için önemli bir veri olduğu için, sunucuda `await` edilir. Yorumlar ise daha aşağıda ve önceliği düşük olduğundan, promise'i sunucuda başlatırız ve istemcide `use` API'si ile bekleriz. Bu, istemcide askıya alınacak, ancak `note` içeriğinin render edilmesini engellemeyecektir.
301
301
302
-
<<<<<<< HEAD
303
-
Async bileşenler [istemcide desteklenmediği için](#why-cant-i-use-async-components-on-the-client), promise'i `use` ile bekleriz.
304
-
=======
305
-
Since async components are not supported on the client, we await the promise with `use`.
306
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
302
+
Asyn bileşenler client'ta desteklenmez, Promiseları `use` ile bekleriz.
0 commit comments