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 e827f29f9..b859c544f 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -1,30 +1,30 @@ --- -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) -## 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,22 +68,22 @@ button { margin-right: 10px; } -Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers. +Przeczytaj rozdział **[Reagowanie na zdarzenia](/learn/responding-to-events)**, aby dowiedzieć się, jak dodawać procedury obsługi zdarzeń. -## Stan - Pamięć komponentu {/*state-a-components-memory*/} +## Stan - pamięć komponentu {/*state-a-components-memory*/} -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 rozdział **[Stan - Pamięć komponentu](/learn/state-a-components-memory)**, aby dowiedzieć się, jak zapamiętywać wartość i aktualizować ją podczas interakcji. -## 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 rozdział **[Renderowanie i aktualizowanie](/learn/render-and-commit)**, aby dowiedzieć się o cyklu życia aktualizacji interfejsu użytkownika. -## 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 helps 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,13 +314,13 @@ 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 rozdział **[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. -## 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,15 +402,15 @@ 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 rozdział **[Kolejkowanie serii aktualizacji stanu](/learn/queueing-a-series-of-state-updates)**, aby dowiedzieć się, jak kolejkować sekwencję aktualizacji stanu. ## 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 ( <>