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/conditional-rendering.md
+22-14
Original file line number
Diff line number
Diff line change
@@ -53,13 +53,17 @@ export default function PackingList() {
53
53
54
54
</Sandpack>
55
55
56
+
<<<<<<< HEAD
56
57
Zauważ, że dla niektórych komponentów `Item` właściwość `isPacked` ustawiono na `true` zamiast `false`. Chcielibyśmy, żeby przy spakowanych przedmiotach, które mają ustawione `isPacked={true}`, wyświetlał się "ptaszek" (✔).
58
+
=======
59
+
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}`.
60
+
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
57
61
58
62
Możesz to zapisać za pomocą [warunku `if`/`else`](https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Statements/if...else) w ten sposób:
59
63
60
64
```js
61
65
if (isPacked) {
62
-
return<li className="item">{name} ✔</li>;
66
+
return<li className="item">{name} ✅</li>;
63
67
}
64
68
return<li className="item">{name}</li>;
65
69
```
@@ -71,7 +75,7 @@ Jeśli właściwość `isPacked` jest ustawiona na `true`, ten kod **zwróci odm
71
75
```js
72
76
functionItem({ name, isPacked }) {
73
77
if (isPacked) {
74
-
return<li className="item">{name} ✔</li>;
78
+
return<li className="item">{name} ✅</li>;
75
79
}
76
80
return<li className="item">{name}</li>;
77
81
}
@@ -160,7 +164,7 @@ W praktyce, zwykle komponenty nie zwracają `null`, ponieważ może to okazać s
160
164
W poprzednim przykładzie nasz kod decydował, które (jeśli którekolwiek) drzewo JSX-owe zostanie zwrócone przez komponent. Być może widzisz pewne powtórzenia w wyniku renderowania:
161
165
162
166
```js
163
-
<li className="item">{name} ✔</li>
167
+
<li className="item">{name} ✅</li>
164
168
```
165
169
166
170
jest bardzo podobne do:
@@ -174,7 +178,7 @@ Oba warunkowe rozgałęzienia zwracają `<li className="item">...</li>`:
174
178
175
179
```js
176
180
if (isPacked) {
177
-
return<li className="item">{name} ✔</li>;
181
+
return<li className="item">{name} ✅</li>;
178
182
}
179
183
return<li className="item">{name}</li>;
180
184
```
@@ -189,7 +193,7 @@ Zamiast poniższego kodu:
189
193
190
194
```js
191
195
if (isPacked) {
192
-
return<li className="item">{name} ✔</li>;
196
+
return<li className="item">{name} ✅</li>;
193
197
}
194
198
return<li className="item">{name}</li>;
195
199
```
@@ -199,12 +203,16 @@ Możesz napisać w ten sposób:
199
203
```js
200
204
return (
201
205
<li className="item">
202
-
{isPacked ? name +'✔': name}
206
+
{isPacked ? name +'✅': name}
203
207
</li>
204
208
);
205
209
```
206
210
211
+
<<<<<<< HEAD
207
212
Możesz to wyrażenie przeczytać jako: *"jeśli `isPacked` ma wartość `true`, wtedy (`?`) wyrenderuj `name + ' ✔'`, w przeciwnym razie (`:`) wyrenderuj `name`."*)
213
+
=======
214
+
You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*.
215
+
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
208
216
209
217
<DeepDive>
210
218
@@ -224,7 +232,7 @@ function Item({ name, isPacked }) {
224
232
<li className="item">
225
233
{isPacked ? (
226
234
<del>
227
-
{name +'✔'}
235
+
{name +'✅'}
228
236
</del>
229
237
) : (
230
238
name
@@ -267,7 +275,7 @@ Kolejnym powszechnie stosowanym skrótem, z którym możesz się zetknąć, jest
267
275
```js
268
276
return (
269
277
<li className="item">
270
-
{name} {isPacked &&'✔'}
278
+
{name} {isPacked &&'✅'}
271
279
</li>
272
280
);
273
281
```
@@ -282,7 +290,7 @@ Poniżej przedstawiono przykład:
282
290
functionItem({ name, isPacked }) {
283
291
return (
284
292
<li className="item">
285
-
{name} {isPacked &&'✔'}
293
+
{name} {isPacked &&'✅'}
286
294
</li>
287
295
);
288
296
}
@@ -338,7 +346,7 @@ Użyj warunku `if`, aby przypisać ponownie wyrażenie JSX-owe do `itemContent`,
338
346
339
347
```js
340
348
if (isPacked) {
341
-
itemContent = name +"✔";
349
+
itemContent = name +"✅";
342
350
}
343
351
```
344
352
@@ -358,7 +366,7 @@ Ten sposób jest najbardziej rozwlekły, jednocześnie jednak najbardziej elasty
358
366
functionItem({ name, isPacked }) {
359
367
let itemContent = name;
360
368
if (isPacked) {
361
-
itemContent = name +"✔";
369
+
itemContent = name +"✅";
362
370
}
363
371
return (
364
372
<li className="item">
@@ -402,7 +410,7 @@ function Item({ name, isPacked }) {
402
410
if (isPacked) {
403
411
itemContent = (
404
412
<del>
405
-
{name +"✔"}
413
+
{name +"✅"}
406
414
</del>
407
415
);
408
416
}
@@ -465,7 +473,7 @@ Użyj operatora warunkowego (`warunek ? a : b`), aby wyświetlić ❌, jeśli `i
465
473
functionItem({ name, isPacked }) {
466
474
return (
467
475
<li className="item">
468
-
{name} {isPacked &&'✔'}
476
+
{name} {isPacked &&'✅'}
469
477
</li>
470
478
);
471
479
}
@@ -503,7 +511,7 @@ export default function PackingList() {
Copy file name to clipboardExpand all lines: src/content/learn/react-compiler.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -121,7 +121,7 @@ In addition to these docs, we recommend checking the [React Compiler Working Gro
121
121
Prior to installing the compiler, you can first check to see if your codebase is compatible:
122
122
123
123
<TerminalBlock>
124
-
npx react-compiler-healthcheck@latest
124
+
npx react-compiler-healthcheck@experimental
125
125
</TerminalBlock>
126
126
127
127
This script will:
@@ -143,7 +143,7 @@ Found no usage of incompatible libraries.
143
143
React Compiler also powers an eslint plugin. The eslint plugin can be used **independently** of the compiler, meaning you can use the eslint plugin even if you don't use the compiler.
Copy file name to clipboardExpand all lines: src/content/learn/you-might-not-need-an-effect.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -408,9 +408,9 @@ function Game() {
408
408
409
409
There are two problems with this code.
410
410
411
-
One 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.
411
+
The 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.
412
412
413
-
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.
413
+
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.
414
414
415
415
In this case, it's better to calculate what you can during rendering, and adjust the state in the event handler:
0 commit comments