From 37a93158921142f8995ab193d5663f34172de891 Mon Sep 17 00:00:00 2001 From: Dawid Date: Wed, 24 Jul 2024 21:21:48 +0200 Subject: [PATCH 01/13] Intro --- src/components/Layout/Footer.tsx | 2 +- src/content/learn/adding-interactivity.md | 18 +++++++++--------- src/sidebarHome.json | 2 +- src/sidebarLearn.json | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 1e34b5173..c2b8e5e79 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -318,7 +318,7 @@ export function Footer() { Instalacja Opisywanie UI - Adding Interactivity + Dodawanie interaktywności Zarządzanie stanem diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index c5124abb9..e8eafb3be 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -1,22 +1,22 @@ --- -title: Adding Interactivity +title: Dodawanie interaktywności --- -Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time. +Niektóre elementy na ekranie aktualizują się w odpowiedzi na interakcje użytkownika. Na przykład kliknięcie w galerię obrazów zmienia aktywny obraz. W Reakcie dane, które zmieniają się w czasie, nazywane są *stanem* (ang. _state_). Możesz dodać stan do każdego komponentu i aktualizować go w razie potrzeby. W tym rozdziale nauczysz się, jak pisać komponenty obsługujące interakcje, aktualizujące swój stan i wyświetlające różne wyniki w czasie. -* [How to handle user-initiated events](/learn/responding-to-events) -* [How to make components "remember" information with state](/learn/state-a-components-memory) -* [How React updates the UI in two phases](/learn/render-and-commit) -* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot) -* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates) -* [How to update an object in state](/learn/updating-objects-in-state) -* [How to update an array in state](/learn/updating-arrays-in-state) +* [Jak obsługiwać zdarzenia inicjowane przez użytkownika](/learn/responding-to-events) +* [Jak sprawić, aby komponenty "pamiętały" informacje za pomocą stanu](/learn/state-a-components-memory) +* [Jak React aktualizuje interfejs użytkownika w dwóch fazach](/learn/render-and-commit) +* [Dlaczego stan nie aktualizuje się od razu po jego zmianie](/learn/state-as-a-snapshot) +* [Jak kolejkować wiele aktualizacji stanu](/learn/queueing-a-series-of-state-updates) +* [Jak zaktualizować obiekt w stanie](/learn/updating-objects-in-state) +* [Jak zaktualizować tablicę w stanie](/learn/updating-arrays-in-state) diff --git a/src/sidebarHome.json b/src/sidebarHome.json index 3066e45ab..e24e49a53 100644 --- a/src/sidebarHome.json +++ b/src/sidebarHome.json @@ -23,7 +23,7 @@ "path": "/learn/describing-the-ui" }, { - "title": "Adding Interactivity", + "title": "Dodawanie interaktywności", "path": "/learn/adding-interactivity" }, { diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index c7974d806..935fc852b 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -99,7 +99,7 @@ ] }, { - "title": "Adding Interactivity", + "title": "Dodawanie interaktywności", "path": "/learn/adding-interactivity", "tags": [], "routes": [ From 262111f4af118089f5fcc51175dd2770eff764d5 Mon Sep 17 00:00:00 2001 From: Dawid Date: Wed, 24 Jul 2024 22:01:25 +0200 Subject: [PATCH 02/13] responding-to-events --- src/content/learn/adding-interactivity.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index e8eafb3be..6dad1bc2f 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -20,11 +20,11 @@ Niektóre elementy na ekranie aktualizują się w odpowiedzi na interakcje użyt -## Responding to events {/*responding-to-events*/} +## Reagowanie na zdarzenia {/*responding-to-events*/} -React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on. +React pozwala na dodawanie *procedur obsługi zdarzeń* (ang. _event handlers_) do twojej składni JSX. Procedury obsługi zdarzeń to twoje własne funkcje, które zostaną wywołane w odpowiedzi na interakcje użytkownika, takie jak kliknięcia, najechanie kursorem, skupienie na elementach formularza i inne. -Built-in components like ` ); @@ -68,7 +68,7 @@ button { margin-right: 10px; } -Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers. +Przeczytaj **[Reagowanie na zdarzenia](/learn/responding-to-events)**, aby dowiedzieć się, jak dodawać procedury obsługi zdarzeń. From 9e9f440b0dec9af2d318fbe2140556bc8e840746 Mon Sep 17 00:00:00 2001 From: Dawid Date: Wed, 24 Jul 2024 22:56:29 +0200 Subject: [PATCH 03/13] tate-a-components-memory --- src/content/learn/adding-interactivity.md | 74 +++++++++++------------ 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 6dad1bc2f..9b0ccb2a2 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -72,18 +72,18 @@ Przeczytaj **[Reagowanie na zdarzenia](/learn/responding-to-events)**, aby dowie -## Stan - Pamięć komponentu {/*state-a-components-memory*/} +## Stan - pamięć komponentu {/*s*/} -Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.* +Komponenty często muszą zmieniać to, co jest wyświetlane na ekranie w wyniku interakcji. Wpisywanie w formularzu powinno aktualizować jego pole, kliknięcie "następny" w kolejce obrazów powinno zmieniać wyświetlany obraz, kliknięcie "kup" powinno umieścić produkt w koszyku. Komponenty muszą "pamiętać" różne rzeczy: bieżącą wartość pola, bieżący obraz, zawartość koszyka. W Reakcie tego rodzaju pamięć specyficzna dla komponentu nazywana jest *stanem*. -You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it. +Możesz dodać stan do komponentu za pomocą hooka [`useState`](/reference/react/useState). *Hooki* to specjalne funkcje, które pozwalają twoim komponentom korzystać z funkcjonalności Reacta (stan jest jedną z tych funkcjonalności). Hook `useState` pozwala zadeklarować zmienną stanu. Przyjmuje on stan początkowy i zwraca parę wartości: bieżący stan oraz funkcję ustawiającą stan, która pozwala na jego aktualizację. ```js const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); ``` -Here is how an image gallery uses and updates state on click: +Oto jak galeria obrazów wykorzystuje i aktualizuje stan po kliknięciu: @@ -112,17 +112,17 @@ export default function Gallery() { return ( <>

{sculpture.name} - by {sculpture.artist} + autorstwa {sculpture.artist}

({index + 1} of {sculptureList.length})

{showMore &&

{sculpture.description}

} -Read **[Stan - Pamięć komponentu](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction. +Przeczytaj **[Stan - Pamięć komponentu](/learn/state-a-components-memory)**, aby dowiedzieć się, jak zapamiętywać wartość i aktualizować ją podczas interakcji. From f8a0cdc0f01a204f34494f03e86b35225e640f05 Mon Sep 17 00:00:00 2001 From: Dawid Date: Wed, 24 Jul 2024 22:57:16 +0200 Subject: [PATCH 04/13] state-a-components-memory - fix typo --- src/content/learn/adding-interactivity.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 9b0ccb2a2..d9d6237ba 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -72,7 +72,7 @@ Przeczytaj **[Reagowanie na zdarzenia](/learn/responding-to-events)**, aby dowie -## Stan - pamięć komponentu {/*s*/} +## Stan - pamięć komponentu {/*state-a-components-memory*/} Komponenty często muszą zmieniać to, co jest wyświetlane na ekranie w wyniku interakcji. Wpisywanie w formularzu powinno aktualizować jego pole, kliknięcie "następny" w kolejce obrazów powinno zmieniać wyświetlany obraz, kliknięcie "kup" powinno umieścić produkt w koszyku. Komponenty muszą "pamiętać" różne rzeczy: bieżącą wartość pola, bieżący obraz, zawartość koszyka. W Reakcie tego rodzaju pamięć specyficzna dla komponentu nazywana jest *stanem*. From da1e650bdd35d153a3be747728dc315b1181d666 Mon Sep 17 00:00:00 2001 From: Dawid Date: Wed, 24 Jul 2024 23:08:57 +0200 Subject: [PATCH 05/13] render-and-commit --- src/content/learn/adding-interactivity.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index d9d6237ba..24f61a999 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -233,25 +233,25 @@ Przeczytaj **[Stan - Pamięć komponentu](/learn/state-a-components-memory)**, a -## Render and commit {/*render-and-commit*/} +## Renderowanie i aktualizowanie {/*render-and-commit*/} -Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +Zanim twoje komponenty zostaną wyświetlone na ekranie, muszą zostać wyrenderowane przez Reacta. Zrozumienie kroków w tym procesie pomoże ci zrozumieć, jak wykonuje się twój kod i wyjaśnić jego działanie. -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +Wyobraź sobie, że twoje komponenty to kucharze w kuchni, którzy przygotowują smaczne dania z dostępnych składników. W tej sytuacji React jest kelnerem, który przyjmuje zamówienia od klientów i przynosi im zamówione potrawy. Ten proces zgłaszania i obsługi interfejsu użytkownika składa się z trzech kroków: -1. **Triggering** a render (delivering the diner's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **Wywołanie (ang. _triggering_)** renderowania (przekazanie zamówienia od gościa do kuchni) +2. **Renderowanie (ang. _rendering_)** komponentu (przygotowanie zamówienia w kuchni) +3. **Aktualizowanie (ang. _committing_)** drzewa DOM (umieszczenie zamówienia na stole) - - - + + + -Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update. +Przeczytaj **[Renderowanie i aktualizowanie](/learn/render-and-commit)**, aby dowiedzieć się o cyklu życia aktualizacji interfejsu użytkownika. From a4cfaf3a90798879178d4371ea4bf6b338ef2b21 Mon Sep 17 00:00:00 2001 From: Dawid Date: Thu, 25 Jul 2024 00:14:28 +0200 Subject: [PATCH 06/13] state-as-a-snapshot --- src/content/learn/adding-interactivity.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 24f61a999..f9bdccec7 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -255,17 +255,17 @@ Przeczytaj **[Renderowanie i aktualizowanie](/learn/render-and-commit)**, aby do -## State as a snapshot {/*state-as-a-snapshot*/} +## Stan jako migawka {/*state-as-a-snapshot*/} -Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! +W przeciwieństwie do zwykłych zmiennych javascriptowych, stan w Reakcie zachowuje się bardziej jak migawka. Ustawienie stanu nie zmienia już istniejącej zmiennej stanu, lecz wywołuje przerenderowanie. Może to być na początki zaskakujące! ```js console.log(count); // 0 -setCount(count + 1); // Request a re-render with 1 -console.log(count); // Still 0! +setCount(count + 1); // Żądanie ponownego renderowania z wartością 1 +console.log(count); // Nadal 0! ``` -This behavior help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later? +To zachowanie pomaga unikać subtelnych błędów. Oto mała aplikacja do czatu. Spróbuj zgadnąć, co się stanie, jeśli najpierw naciśniesz "Wyślij", a *potem* zmienisz odbiorcę na Boba. Czyje imię pojawi się w `alert` pięć sekund później? @@ -274,12 +274,12 @@ import { useState } from 'react'; export default function Form() { const [to, setTo] = useState('Alice'); - const [message, setMessage] = useState('Hello'); + const [message, setMessage] = useState('Cześć'); function handleSubmit(e) { e.preventDefault(); setTimeout(() => { - alert(`You said ${message} to ${to}`); + alert(`Wysłano wiadomość "${message}" do użytkownika ${to}`); }, 5000); } @@ -299,7 +299,7 @@ export default function Form() { value={message} onChange={e => setMessage(e.target.value)} /> - + ); } @@ -314,7 +314,7 @@ label, textarea { margin-bottom: 10px; display: block; } -Read **[State as a Snapshot](/learn/state-as-a-snapshot)** to learn why state appears "fixed" and unchanging inside the event handlers. +Przeczytaj **[Stan jako migawka](/learn/state-as-a-snapshot)**, aby dowiedzieć się, dlaczego stan wydaje się być "ustalony" i niezmienny wewnątrz funkcji obsługujących zdarzenia. From f377f4680b251cd01852f84ea57a1fc62fe0f453 Mon Sep 17 00:00:00 2001 From: Dawid Date: Thu, 25 Jul 2024 00:28:24 +0200 Subject: [PATCH 07/13] queueing-a-series-of-state-updates --- src/content/learn/adding-interactivity.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index f9bdccec7..d1e66526c 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -318,9 +318,9 @@ Przeczytaj **[Stan jako migawka](/learn/state-as-a-snapshot)**, aby dowiedzieć -## Queueing a series of state updates {/*queueing-a-series-of-state-updates*/} +## Kolejkowanie serii aktualizacji stanu {/*queueing-a-series-of-state-updates*/} -This component is buggy: clicking "+3" increments the score only once. +Ten komponent zawiera błąd: kliknięcie "+3" zwiększa wynik tylko raz. @@ -342,7 +342,7 @@ export default function Counter() { increment(); increment(); }}>+3 -

Score: {score}

+

Wynik: {score}

) } @@ -354,7 +354,7 @@ button { display: inline-block; margin: 10px; font-size: 20px; } -[State as a Snapshot](/learn/state-as-a-snapshot) explains why this is happening. Setting state requests a new re-render, but does not change it in the already running code. So `score` continues to be `0` right after you call `setScore(score + 1)`. +**[Stan jako migawka](/learn/state-as-a-snapshot)** wyjaśnia, dlaczego tak się dzieje. Ustawienie stanu tworzy żądanie nowego przerenderowania, ale nie zmienia tego stanu w już działającym kodzie. Dlatego `score` nadal wynosi `0` tuż po wywołaniu `setScore(score + 1)`. ```js console.log(score); // 0 @@ -366,7 +366,7 @@ setScore(score + 1); // setScore(0 + 1); console.log(score); // 0 ``` -You can fix this by passing an *updater function* when setting state. Notice how replacing `setScore(score + 1)` with `setScore(s => s + 1)` fixes the "+3" button. This lets you queue multiple state updates. +Możesz naprawić to, przekazując *funkcję aktualizującą* (ang. _updater function_) podczas ustawiania stanu. Zauważ, jak zastąpienie `setScore(score + 1)` przez `setScore(s => s + 1)` naprawia przycisk "+3". Dzięki temu możesz kolejkować wiele aktualizacji stanu. @@ -388,7 +388,7 @@ export default function Counter() { increment(); increment(); }}>+3 -

Score: {score}

+

Wynik: {score}

) } @@ -402,7 +402,7 @@ button { display: inline-block; margin: 10px; font-size: 20px; } -Read **[Queueing a Series of State Updates](/learn/queueing-a-series-of-state-updates)** to learn how to queue a sequence of state updates. +Przeczytaj **[Kolejkowanie serii aktualizacji stanu](/learn/queueing-a-series-of-state-updates)**, aby dowiedzieć się, jak kolejkować sekwencję aktualizacji stanu. From bf9187b679793a25066936894a0b69c30969f55d Mon Sep 17 00:00:00 2001 From: Dawid Date: Fri, 26 Jul 2024 21:57:19 +0200 Subject: [PATCH 08/13] updating-objects-in-state --- src/content/learn/adding-interactivity.md | 32 +++++++++++------------ 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index d1e66526c..46ef2d553 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -408,9 +408,9 @@ Przeczytaj **[Kolejkowanie serii aktualizacji stanu](/learn/queueing-a-series-of ## Aktualizowanie obiektów w stanie {/*updating-objects-in-state*/} -State can hold any kind of JavaScript value, including objects. But you shouldn't change objects and arrays that you hold in the React state directly. Instead, when you want to update an object and array, you need to create a new one (or make a copy of an existing one), and then update the state to use that copy. +Stan może przechowywać dowolne wartości javascriptowe, w tym obiekty. Nie powinno się jednak bezpośrednio zmieniać obiektów i tablic, które przechowuje się w stanie Reacta. Zamiast tego, gdy chcesz zaktualizować obiekt lub tablicę, musisz stworzyć nowy obiekt (lub skopiować istniejący), a następnie zaktualizować stan, aby używał tej kopii. -Usually, you will use the `...` spread syntax to copy objects and arrays that you want to change. For example, updating a nested object could look like this: +Zazwyczaj używa się składni rozproszenia (ang. _spread syntax_) `...`, aby skopiować obiekty i tablice, które chcesz zmienić. Na przykład, aktualizacja zagnieżdżonego obiektu może wyglądać tak: @@ -467,28 +467,28 @@ export default function Form() { return ( <>