From 00f1ce3f3c4cd74b978e5c8d6b36c203dc675456 Mon Sep 17 00:00:00 2001 From: lukbar48 Date: Mon, 20 Dec 2021 19:35:30 +0100 Subject: [PATCH 01/67] Translated half of conditional rendering article --- beta/src/pages/learn/conditional-rendering.md | 147 +++++++++--------- 1 file changed, 74 insertions(+), 73 deletions(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index 8c5288f8f..241f0e951 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -1,24 +1,25 @@ --- -title: Conditional Rendering +title: Renderowanie warunkowe --- -Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators. +Twoje komponenty zazwyczaj będą wyświetlały różne informacje w zależności od różnych warunków. W Reakcie, możesz renderować warunkowo JSX używając syntaxu JavaScript, takiego jak warunek `if`, `&&` oraz operatorów `? :`. + -* How to return different JSX depending on a condition -* How to conditionally include or exclude a piece of JSX -* Common conditional syntax shortcuts you’ll encounter in React codebases +* Jak zwrócić różny JSX w zależności od warunku +* Jak warunkowo zawrzeć lub wykluczyć część JSX +* Powszechne skróty składni warunkowej, które napotkasz w bazach kodu Reacta -## Conditionally returning JSX {/*conditionally-returning-jsx*/} +## Warunkowe zwracanie JSX {/*conditionally-returning-jsx*/} -Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not: +Załóżmy, że posiadasz komponent `PackingList` renderujący kilka `Item`'ów, który może być oznaczony jako spakowany `isPacked={true}` lub niespakowany `isPacked={false}`: @@ -30,19 +31,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
-

Sally Ride's Packing List

+

Lista rzeczy do spakowania Sally

@@ -52,9 +53,9 @@ export default function PackingList() { -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}`. +Zauważ, że niektóre z komponentów `Item` posiada prop `isPacked` ustawiony na `true` zamast `false`. Chcesz dodać znacznik (✔) do spakowanych przedmiotów, jeśli `isPacked={true}`. -You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so: +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: ```js if (isPacked) { @@ -63,7 +64,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -If the `isPacked` prop is `true`, this code **returns a different JSX tree**. With this change, some of the items get a checkmark at the end: +Jeśli prop `isPacked` jest ustawiony na `true`, ten kod **zwróci odmienne drzewo JSX**. Wraz z tą zmianą, pewne przedmioty dostaną znacznik (✔). @@ -78,19 +79,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Lista rzeczy do spakowania Sally

    @@ -100,13 +101,13 @@ export default function PackingList() {     -Try editing what gets returned in either case, and see how the result changes! +Spróbuj edytować kod i sprawdź, co zostanie zwrócone w obu przypadkach oraz jak zmieni się wynik! -Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript. +Zwróć uwagę, jak tworzysz logikę rozgałęzień za pomocą warunków JavaScriptu `if` oraz `return`. W Reakcie, kontrola przepływu (taka jak warunki) jest obsługiwana przez JavaScript. -### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/} +### Warunkowe zwracanie niczego z użyciem `null` {/*conditionally-returning-nothing-with-null*/} -In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`: +W pewnych sytuacjach nie będziesz chciał niczego renderować. Dla przykładu, załóżmy, że w ogóle nie chcesz pokazywać spakowanych przedmiotów. Komponent jednak musi coś zwrócić. W takim przypadku, możesz zwrócić `null`. ```js if (isPacked) { @@ -115,7 +116,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render. +Jeśli `isPacked` ma wartość `true`, komponent nic nie zwróci - `null`. W przeciwnym razie zwróci JSX do wyrenderowania. @@ -130,19 +131,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Lista rzeczy do spakowania Sally

    @@ -152,23 +153,24 @@ export default function PackingList() {     -In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that! +W praktyce, zwracanie `null` z komponentu nie jest powszechne, ponieważ może to zaskoczyć programistę, który próbuje go wyrenderować. Częściej zdarza się, że warunkowo dołączysz lub wykluczysz komponent w JSX komponentu nadrzędnego. Oto jak to zrobić! -## Conditionally including JSX {/*conditionally-including-jsx*/} +## Warunkowe dołączanie JSX {/*conditionally-including-jsx*/} -In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output: +W poprzednim przykładzie, kontrolowałeś które (jeśli którekolwiek) drzewo JSX zostanie zwrócone przez komponent. Być może zauważyłeś pewne powielenia w wyniku renderowania: ```js
  • {name} ✔
    • ``` -is very similar to +jest bardzo podobne do: ```js
  • {name}
    • ``` -Both of the conditional branches return `
  • ...
    • `: +Oba warunkowe rozgałęzienia zwracają `
  • ...
    • `: + ```js if (isPacked) { @@ -177,13 +179,13 @@ if (isPacked) { return
  • {name}
    • ; ``` -While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). +W tym przypadku powielenia nie są szkodliwe, jednak może to utrudniać utrzymanie kodu. Co w sytuacji, jeśli chciałyś zmienić `className`? Wówczas, musiałbyś to zrobić w dwóch miejscach w kodzie. W takich sytuacjach, mógłbyś warunkowo dołączyć JSX, aby twój kod był bardziej [DRY](https://pl.wikipedia.org/wiki/DRY). -### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/} +### Operator warunkowy (`? :`) {/*conditional-ternary-operator--*/} -JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator." +JavaScript posiada zwartą składnię do tworzenia wyrażenia warunkowego -- [operator warunkowy](https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) -Instead of this: +Zamiast poniższego kodu: ```js if (isPacked) { @@ -192,7 +194,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -You can write this: +Możesz napisać w ten sposób: ```js return ( @@ -202,15 +204,15 @@ return ( ); ``` -You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`."*) +Możesz to wyrażenie przeczytać jako *"jeśli `isPacked` ma wartość `true`, wtedy (`?`) wyrenderuj `name + ' ✔'`, w przeciwnym razie (`:`) wyrenderuj `name`."*) - + -If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `
  • `. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works. +Jeśli wywodzisz się z programowania obiektowego, możesz założyć, że dwa powyższe przykłady są nieco inne, ponieważ jeden z nich może tworzyć dwie różne "instancje" `
  • `. Jednak elementy JSX nie są "instancjami", ponieważ nie przechowują żadnego stanu wewnętrznego oraz nie są prawdziwymi węzłami DOM. Tak więc te dwa przykłady *są* w pełni równoważne. [Zachowywanie i Resetowanie Stanu](/learn/preserving-and-resetting-state) zawiera szczegółowe informacje o tym, jak to działa. -Now let's say you want to wrap the completed item's text into another HTML tag, like `` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX each of the cases: +Załóżmy, że chciałbyś umieścić tekst ukończonego elementu w innym znaczniku HTML, na przykład ``, aby uzyskać efekt przekreślenia. Możesz dodać więcej nowych linii i nawiasów, aby było łatwiej zagnieżdżać więcej JSX w każdym z przypadków: @@ -232,19 +234,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Lista rzeczy do spakowania Sally

    @@ -254,11 +256,11 @@ export default function PackingList() {     -This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions. +Ten sposób sprawdza się przy prostch warunkach, używaj go jednak z umiarem. Jeśli twój komponent robi się nieczytelny, ponieważ posiada zbyt dużą ilość znaczników warunkowych, rozważ wyodrębnienie komponentów podrzędnych, aby go uporządkować. W Reakcie, znaczniki są częścią twojego kodu, więc możesz używać narzędzi takich jak zmienne oraz funkcje do porządkowania złożonych wyrażeń. -### Logical AND operator (`&&`) {/*logical-and-operator-*/} +### Operator logiczny AND (`&&`) {/*logical-and-operator-*/} -Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.). Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`: +Kolejnym powszechnie stosowanym skrótem z którym będziesz miał styczność jest [JavaScript'owy operator logiczny AND (`&&`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.). Wewnątrz komponentu React, często wykorzystuje się go gdy chcesz wyrenderować JSX, gdy warunek jest spełniony (posiada wartość `true`) **lub gdy nie chcesz nic wyrenderować.** Ze znacznikiem `&&`, możesz warunkowo wyrenderować znacznik (✔) tylko wtedy, jeśli `isPacked` posiada wartość `true`. ```js return ( @@ -267,10 +269,9 @@ return (
    • ); ``` +Możesz to wyrażenie przeczytać jako *“jeśli `isPacked`, wtedy (`&&`) wyrenderuj znacznik (✔), w przeciwnym razie nic nie renderuj.”* -You can read this as *“if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing.”* - -Here it is in action: +Poniżej przedstawiono przykład: @@ -286,19 +287,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Lista rzeczy do spakowania Sally

    @@ -371,15 +372,15 @@ export default function PackingList() {
    @@ -417,15 +418,15 @@ export default function PackingList() {
    @@ -474,15 +475,15 @@ export default function PackingList() {
    @@ -512,15 +513,15 @@ export default function PackingList() {
    @@ -560,15 +561,15 @@ export default function PackingList() {
    @@ -604,15 +605,15 @@ export default function PackingList() {
    From 282138825125e9553e7950ffb5657b254065cc53 Mon Sep 17 00:00:00 2001 From: lukbar48 Date: Mon, 20 Dec 2021 20:13:25 +0100 Subject: [PATCH 02/67] Translated Logical AND operator section --- beta/src/pages/learn/conditional-rendering.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index 241f0e951..fd1d78f64 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -53,7 +53,7 @@ export default function PackingList() {     -Zauważ, że niektóre z komponentów `Item` posiada prop `isPacked` ustawiony na `true` zamast `false`. Chcesz dodać znacznik (✔) do spakowanych przedmiotów, jeśli `isPacked={true}`. +Zauważ, że niektóre z komponentów `Item` posiada prop `isPacked` ustawiony na `true` zamiast `false`. Chcesz dodać znacznik ✔ do spakowanych przedmiotów, jeśli `isPacked={true}`. 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: @@ -64,7 +64,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -Jeśli prop `isPacked` jest ustawiony na `true`, ten kod **zwróci odmienne drzewo JSX**. Wraz z tą zmianą, pewne przedmioty dostaną znacznik (✔). +Jeśli prop `isPacked` jest ustawiony na `true`, ten kod **zwróci odmienne drzewo JSX**. Wraz z tą zmianą, pewne przedmioty dostaną znacznik ✔. @@ -260,7 +260,7 @@ Ten sposób sprawdza się przy prostch warunkach, używaj go jednak z umiarem. J ### Operator logiczny AND (`&&`) {/*logical-and-operator-*/} -Kolejnym powszechnie stosowanym skrótem z którym będziesz miał styczność jest [JavaScript'owy operator logiczny AND (`&&`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.). Wewnątrz komponentu React, często wykorzystuje się go gdy chcesz wyrenderować JSX, gdy warunek jest spełniony (posiada wartość `true`) **lub gdy nie chcesz nic wyrenderować.** Ze znacznikiem `&&`, możesz warunkowo wyrenderować znacznik (✔) tylko wtedy, jeśli `isPacked` posiada wartość `true`. +Kolejnym powszechnie stosowanym skrótem z którym będziesz miał styczność jest [operator logiczny AND (`&&`) JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.). Wewnątrz komponentu React, często wykorzystuje się go gdy chcesz wyrenderować JSX, gdy warunek jest spełniony (posiada wartość `true`) **lub gdy nie chcesz nic wyrenderować.** Ze znacznikiem `&&`, możesz warunkowo wyrenderować znacznik ✔ tylko wtedy, jeśli `isPacked` posiada wartość `true`. ```js return ( @@ -269,7 +269,7 @@ return ( ); ``` -Możesz to wyrażenie przeczytać jako *“jeśli `isPacked`, wtedy (`&&`) wyrenderuj znacznik (✔), w przeciwnym razie nic nie renderuj.”* +Możesz to wyrażenie przeczytać jako *“jeśli `isPacked`, wtedy (`&&`) wyrenderuj znacznik ✔, w przeciwnym razie nic nie renderuj.”* Poniżej przedstawiono przykład: @@ -309,18 +309,17 @@ export default function PackingList() { -A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place. - +[Wyrażenie && JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) zwraca wartości z prawej strony (w naszym przypadku znacznik ✔), jeśli po lewej stronie warunek został spełniony (posiada wartość `true`). Jeśli jednak warunek posiada wartość `false`, całe wyrażenie staje się `false` i nie zostaje spełnione. React traktuje `false` jako "dziurę" w drzewie JSX, podobnie jak `null` czy `undefined` i nie renderuje niczego w tym miejscu. -**Don't put numbers on the left side of `&&`.** +**Nie umieszczaj liczb po lewej stronie znacznika `&&`.** -To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing. +Aby sprawdzić warunek, JavaScript automatycznie konwertuje lewą stronę na wartość logiczną. Jeśli jednak lewa strona wyrażenia posiada wartość `0`, całe wyrażenie otrzyma tę wartość (`0`), a React z radością wyrenderuje `0`, zamiast niczego nie wyrenderować. -For example, a common mistake is to write code like `messageCount &&

    New messages

    `. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself! +Na przykład, powszechnym błędem jest pisanie kodu `messageCount &&

    New messages

    `. Łatwo założyć, że nic nie zostanie wyrenderowane, kiedy `messageCount` posiada wartość `0`, jednak tak naprawde wyrenderowane zostanie samo `0`! -To fix it, make the left side a boolean: `messageCount > 0 &&

    New messages

    `. +Aby to naprawić, zastosuj wartość logiczną po lewej stronie: `messageCount > 0 &&

    New messages

    `.     From b1dea7f39fbbdf8cadc0394e98ba89dae0ef6236 Mon Sep 17 00:00:00 2001 From: lukbar48 Date: Tue, 21 Dec 2021 13:23:32 +0100 Subject: [PATCH 03/67] Finished translation of Conditional Rendering article --- beta/src/pages/learn/conditional-rendering.md | 177 +++++++++--------- 1 file changed, 89 insertions(+), 88 deletions(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index fd1d78f64..8ba552570 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -4,15 +4,15 @@ title: Renderowanie warunkowe -Twoje komponenty zazwyczaj będą wyświetlały różne informacje w zależności od różnych warunków. W Reakcie, możesz renderować warunkowo JSX używając syntaxu JavaScript, takiego jak warunek `if`, `&&` oraz operatorów `? :`. +Twoje komponenty zazwyczaj będą wyświetlały różne informacje w zależności od różnych warunków. W Reakcie, możesz renderować warunkowo JSX używając składni JavaScriptu, takiego jak warunek `if`, `&&` oraz operatorów `? :`. -* Jak zwrócić różny JSX w zależności od warunku -* Jak warunkowo zawrzeć lub wykluczyć część JSX +* Jak zwrócić różny kod JSX w zależności od warunku +* Jak warunkowo wyświetlić lub wykluczyć część JSX * Powszechne skróty składni warunkowej, które napotkasz w bazach kodu Reacta @@ -53,7 +53,7 @@ export default function PackingList() { -Zauważ, że niektóre z komponentów `Item` posiada prop `isPacked` ustawiony na `true` zamiast `false`. Chcesz dodać znacznik ✔ do spakowanych przedmiotów, jeśli `isPacked={true}`. +Zauważ, że niektóre z komponentów `Item` posiada prop `isPacked` ustawiony na `true` zamiast `false`. Załóżmy, że dodać znacznik ✔ do spakowanych przedmiotów, jeśli `isPacked={true}`. 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: @@ -107,7 +107,7 @@ Zwróć uwagę, jak tworzysz logikę rozgałęzień za pomocą warunków JavaScr ### Warunkowe zwracanie niczego z użyciem `null` {/*conditionally-returning-nothing-with-null*/} -W pewnych sytuacjach nie będziesz chciał niczego renderować. Dla przykładu, załóżmy, że w ogóle nie chcesz pokazywać spakowanych przedmiotów. Komponent jednak musi coś zwrócić. W takim przypadku, możesz zwrócić `null`. +W pewnych sytuacjach nie będziesz chciał niczego renderować. Dla przykładu, załóżmy, że w ogóle nie chcesz wyświetlać spakowanych przedmiotów. Komponent jednak musi coś zwrócić. W takim przypadku, możesz zwrócić `null`. ```js if (isPacked) { @@ -153,9 +153,9 @@ export default function PackingList() { -W praktyce, zwracanie `null` z komponentu nie jest powszechne, ponieważ może to zaskoczyć programistę, który próbuje go wyrenderować. Częściej zdarza się, że warunkowo dołączysz lub wykluczysz komponent w JSX komponentu nadrzędnego. Oto jak to zrobić! +W praktyce, zwracanie `null` z komponentu nie jest powszechne, ponieważ może to zaskoczyć programistę, który próbuje go wyrenderować. Częściej zdarza się, że warunkowo wyświetlisz lub wykluczysz komponent w JSX komponentu nadrzędnego. Oto jak to zrobić! -## Warunkowe dołączanie JSX {/*conditionally-including-jsx*/} +## Warunkowe wyświetlanie JSX {/*conditionally-including-jsx*/} W poprzednim przykładzie, kontrolowałeś które (jeśli którekolwiek) drzewo JSX zostanie zwrócone przez komponent. Być może zauważyłeś pewne powielenia w wyniku renderowania: @@ -204,7 +204,7 @@ return ( ); ``` -Możesz to wyrażenie przeczytać jako *"jeśli `isPacked` ma wartość `true`, wtedy (`?`) wyrenderuj `name + ' ✔'`, w przeciwnym razie (`:`) wyrenderuj `name`."*) +Możesz to wyrażenie przeczytać jako: *"jeśli `isPacked` ma wartość `true`, wtedy (`?`) wyrenderuj `name + ' ✔'`, w przeciwnym razie (`:`) wyrenderuj `name`."*) @@ -260,7 +260,7 @@ Ten sposób sprawdza się przy prostch warunkach, używaj go jednak z umiarem. J ### Operator logiczny AND (`&&`) {/*logical-and-operator-*/} -Kolejnym powszechnie stosowanym skrótem z którym będziesz miał styczność jest [operator logiczny AND (`&&`) JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.). Wewnątrz komponentu React, często wykorzystuje się go gdy chcesz wyrenderować JSX, gdy warunek jest spełniony (posiada wartość `true`) **lub gdy nie chcesz nic wyrenderować.** Ze znacznikiem `&&`, możesz warunkowo wyrenderować znacznik ✔ tylko wtedy, jeśli `isPacked` posiada wartość `true`. +Kolejnym powszechnie stosowanym skrótem z którym będziesz miał styczność jest [operator logiczny AND (`&&`) JavaScriptu](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.). Wewnątrz komponentu React, często wykorzystuje się go gdy chcesz wyrenderować JSX, gdy warunek jest spełniony (posiada wartość `true`) **lub gdy nie chcesz nic wyrenderować.** Ze znacznikiem `&&`, możesz warunkowo wyrenderować znacznik ✔ tylko wtedy, jeśli `isPacked` posiada wartość `true`. ```js return ( @@ -269,7 +269,7 @@ return ( ); ``` -Możesz to wyrażenie przeczytać jako *“jeśli `isPacked`, wtedy (`&&`) wyrenderuj znacznik ✔, w przeciwnym razie nic nie renderuj.”* +Możesz to wyrażenie przeczytać jako: *“jeśli `isPacked`, wtedy (`&&`) wyrenderuj znacznik ✔, w przeciwnym razie nic nie renderuj.”* Poniżej przedstawiono przykład: @@ -309,7 +309,7 @@ export default function PackingList() { -[Wyrażenie && JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) zwraca wartości z prawej strony (w naszym przypadku znacznik ✔), jeśli po lewej stronie warunek został spełniony (posiada wartość `true`). Jeśli jednak warunek posiada wartość `false`, całe wyrażenie staje się `false` i nie zostaje spełnione. React traktuje `false` jako "dziurę" w drzewie JSX, podobnie jak `null` czy `undefined` i nie renderuje niczego w tym miejscu. +[Wyrażenie && w JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) zwraca wartości z prawej strony (w naszym przypadku znacznik ✔), jeśli po lewej stronie warunek został spełniony (posiada wartość `true`). Jeśli jednak warunek posiada wartość `false`, całe wyrażenie staje się `false` i nie zostaje spełnione. React traktuje `false` jako "dziurę" w drzewie JSX, podobnie jak `null` czy `undefined` i nie renderuje niczego w tym miejscu. @@ -323,15 +323,15 @@ Aby to naprawić, zastosuj wartość logiczną po lewej stronie: `messageCount > -### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/} +### Warunkowe przypisywanie JSX do zmiennej {/*conditionally-assigning-jsx-to-a-variable*/} -When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name: +Jeśli skróty przeszkadzają w pisaniu zwykłego kodu, spróbuj użyć warunku `if` oraz zmiennej. Możesz ponownie przypisać wartości do zmiennej, zdefiniowanej za pomocą [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), zacznij więc od podania domyślnej wartości, którą wyświetlić: ```js let itemContent = name; ``` -Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`: +Użyj warunku `if`, aby przypisać ponownie wyrażenie JSX do `itemContent`, jeśli `isPacked` posiada wartość `true`: ```js if (isPacked) { @@ -339,7 +339,7 @@ if (isPacked) { } ``` -[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX: +[Używanie nawiasów klamrowych otwiera "okno na świat JavaScriptu".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Ulokuj zmienną z nawiasami klamrowymi w zwróconym drzewie JSX, zagnieżdżając uprzednio przeliczone wyrażenie wewnątrz JSX: ```js
  • @@ -347,7 +347,7 @@ if (isPacked) {
    • ``` -This style is the most verbose, but it's also the most flexible. Here it is in action: +Ten sposób jest najbardziej rozwlekły, jednocześnie jednak najbardziej elastyczny. Poniżej przedstawiono przykład: @@ -367,7 +367,7 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Lista rzeczy do spakowania Sally