Skip to content

Commit 3f49823

Browse files
merging all conflicts
2 parents 052a30d + 7d50c3f commit 3f49823

File tree

5 files changed

+38
-17
lines changed

5 files changed

+38
-17
lines changed

src/content/blog/2023/03/16/introducing-react-dev.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn
269269
function Item({ name, isPacked }) {
270270
return (
271271
<li className="item">
272-
{name} {isPacked && ''}
272+
{name} {isPacked && ''}
273273
</li>
274274
);
275275
}
@@ -307,7 +307,7 @@ export default function PackingList() {
307307
function Item({ name, isPacked }) {
308308
return (
309309
<li className="item">
310-
{name} {isPacked ? '' : ''}
310+
{name} {isPacked ? '' : ''}
311311
</li>
312312
);
313313
}

src/content/learn/conditional-rendering.md

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,17 @@ export default function PackingList() {
5252
5353
</Sandpack>
5454
55+
<<<<<<< HEAD
5556
Bazı `Item` bileşenlerinin `isPacked` prop'unun `false` (`yanlış`) yerine `true` (`doğru`) olduğuna dikkat edin. Eğer bileşen prop'u `isPacked={true}` ise eşyaların yanında bir tik (✔) işareti olmalı.
57+
=======
58+
Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`.
59+
>>>>>>> 7d50c3ffd4df2dc7903f4e41069653a456a9c223
5660
5761
Bunu bir [`if`/`else` ifadesi](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) olarak şöyle yazabilirsiniz:
5862
5963
```js
6064
if (isPacked) {
61-
return <li className="item">{name} </li>;
65+
return <li className="item">{name} </li>;
6266
}
6367
return <li className="item">{name}</li>;
6468
```
@@ -70,7 +74,7 @@ Eğer `isPacked` prop'u `true` ise, bu kod **farklı bir JSX ağacı döndürür
7074
```js
7175
function Item({ name, isPacked }) {
7276
if (isPacked) {
73-
return <li className="item">{name} </li>;
77+
return <li className="item">{name} </li>;
7478
}
7579
return <li className="item">{name}</li>;
7680
}
@@ -159,7 +163,7 @@ Uygulamada, bir bileşenin `null` döndürmesi yaygın olarak kullanılan bir ş
159163
Önceki örnekte bileşen tarafından (eğer varsa!) hangi JSX ağacının döndüreleceğini belirlediniz. Render edilen çıktıda bazı tekrarlamalar olduğunu farketmişsinizdir:
160164

161165
```js
162-
<li className="item">{name} </li>
166+
<li className="item">{name} </li>
163167
```
164168

165169
bu iki ifade birbirine çok benzemekte
@@ -172,7 +176,7 @@ Her iki koşul da `<li className="item">...</li>` ifadesini döndürmekte:
172176

173177
```js
174178
if (isPacked) {
175-
return <li className="item">{name} </li>;
179+
return <li className="item">{name} </li>;
176180
}
177181
return <li className="item">{name}</li>;
178182
```
@@ -187,7 +191,7 @@ Böyle yazmak yerine:
187191
188192
```js
189193
if (isPacked) {
190-
return <li className="item">{name} </li>;
194+
return <li className="item">{name} </li>;
191195
}
192196
return <li className="item">{name}</li>;
193197
```
@@ -197,12 +201,16 @@ return <li className="item">{name}</li>;
197201
```js
198202
return (
199203
<li className="item">
200-
{isPacked ? name + ' ' : name}
204+
{isPacked ? name + ' ' : name}
201205
</li>
202206
);
203207
```
204208
209+
<<<<<<< HEAD
205210
Bu kodu şöyle okuyabilirsiniz: *"eğer `isPacked` prop'u true (doğru) ise, o zaman (`?`) `name + ' ✔'` render et, aksi halde (`:`) `name` render et"*.
211+
=======
212+
You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*.
213+
>>>>>>> 7d50c3ffd4df2dc7903f4e41069653a456a9c223
206214
207215
<DeepDive>
208216
@@ -222,7 +230,7 @@ function Item({ name, isPacked }) {
222230
<li className="item">
223231
{isPacked ? (
224232
<del>
225-
{name + ' '}
233+
{name + ' '}
226234
</del>
227235
) : (
228236
name
@@ -265,7 +273,7 @@ Karşınıza sıkça çıkacak bir diğer kısayol ise [JavaScript mantıksal AN
265273
```js
266274
return (
267275
<li className="item">
268-
{name} {isPacked && ''}
276+
{name} {isPacked && ''}
269277
</li>
270278
);
271279
```
@@ -280,7 +288,7 @@ Aşağıda nasıl çalıştığını görebilirsiniz:
280288
function Item({ name, isPacked }) {
281289
return (
282290
<li className="item">
283-
{name} {isPacked && ''}
291+
{name} {isPacked && ''}
284292
</li>
285293
);
286294
}
@@ -336,7 +344,7 @@ Eğer `isPacked` `true (doğru)` ise, bir JSX ifadesini `itemContent`'e tekrarda
336344

337345
```js
338346
if (isPacked) {
339-
itemContent = name + " ";
347+
itemContent = name + " ";
340348
}
341349
```
342350

@@ -356,7 +364,7 @@ Bu yöntem en ayrıntılı ama aynı zamanda en esnek olanıdır. Aşağıda nas
356364
function Item({ name, isPacked }) {
357365
let itemContent = name;
358366
if (isPacked) {
359-
itemContent = name + " ";
367+
itemContent = name + " ";
360368
}
361369
return (
362370
<li className="item">
@@ -400,7 +408,7 @@ function Item({ name, isPacked }) {
400408
if (isPacked) {
401409
itemContent = (
402410
<del>
403-
{name + " "}
411+
{name + " "}
404412
</del>
405413
);
406414
}
@@ -463,7 +471,7 @@ Koşul operatörünü (`cond ? a : b`) kullanarak eğer `isPacked` prop'u `true`
463471
function Item({ name, isPacked }) {
464472
return (
465473
<li className="item">
466-
{name} {isPacked && ''}
474+
{name} {isPacked && ''}
467475
</li>
468476
);
469477
}
@@ -501,7 +509,7 @@ export default function PackingList() {
501509
function Item({ name, isPacked }) {
502510
return (
503511
<li className="item">
504-
{name} {isPacked ? '' : ''}
512+
{name} {isPacked ? '' : ''}
505513
</li>
506514
);
507515
}

src/content/learn/describing-the-ui.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,7 @@ Bu örnekte, bir onay işaretini (checkmark) koşullu olarak render etmek için
327327
function Item({ name, isPacked }) {
328328
return (
329329
<li className="item">
330-
{name} {isPacked && ''}
330+
{name} {isPacked && ''}
331331
</li>
332332
);
333333
}

src/content/learn/you-might-not-need-an-effect.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -411,9 +411,17 @@ function Game() {
411411
412412
Bir problem bu kodun çok verimsiz olmasıdır: bileşenin (ve onun alt elemanlarının) `set` çağrıları arasında her seferinde yeniden render edilmesidir. Yukarıdaki örnekte, en kötü durumda (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) alt eleman ağacında üç gereksiz yeniden render işlemi gerçekleşir.
413413
414+
<<<<<<< HEAD
414415
Hatta hızlı olmasa bile, kodunuz geliştikçe yeni gereksinimlere uygun olmayan durumlarla karşılaşabilirsiniz. Örneğin, oyun hareketlerinin geçmişini adım adım izlemek için bir yol eklemek istediğinizi düşünün. Her bir state değişkenini geçmişteki bir değere güncelleyerek bunu yapardınız. Ancak, `card` state'ini geçmişteki bir değere ayarlamak, Efekt zincirini tekrar tetikler ve gösterilen verileri değiştirir. Bu tür bir kod genellikle sert ve kırılgan olabilir.
415416
416417
Bu durumda, yapabileceğiniz hesaplamaları render işlemi sırasında gerçekleştirmek ve durumu olay yöneticisinde ayarlamak daha iyidir.
418+
=======
419+
First problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
420+
421+
The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile.
422+
423+
In this case, it's better to calculate what you can during rendering, and adjust the state in the event handler:
424+
>>>>>>> 7d50c3ffd4df2dc7903f4e41069653a456a9c223
417425
418426
```js {6-7,14-26}
419427
function Game() {

vercel.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@
2424
"destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
2525
"permanent": false
2626
},
27+
{
28+
"source": "/docs/lists-and-keys",
29+
"destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
30+
"permanent": false
31+
},
2732
{
2833
"source": "/link/invalid-hook-call",
2934
"destination": "/warnings/invalid-hook-call-warning",

0 commit comments

Comments
 (0)