@@ -537,63 +537,63 @@ class Board extends React.Component {
}
```
-**[View the full code at this point](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)**
+**[Zobacz dotychczasowy kod](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)**
-After these changes, we're again able to click on the Squares to fill them. However, now the state is stored in the Board component instead of the individual Square components. When the Board's state changes, the Square components re-render automatically. Keeping the state of all squares in the Board component will allow it to determine the winner in the future.
+Po zastosowaniu powyższych zmian znów będziemy mogli klikać w pola planszy. Różnica polega na tym, że teraz stan planszy jest przechowywany w komponencie `Board`, nie zaś w każdym z komponentów `Square` z osobna. Gdy stan w `Board` ulegnie zmianie, wszystkie pola zostaną ponownie wyrenderowane. Przechowywanie stanu wszystkich pól w jednym miejscu pozwoli nam w przyszłości wyłonić zwycięzcę rozgrywki.
-Since the Square components no longer maintain state, the Square components receive values from the Board component and inform the Board component when they're clicked. In React terms, the Square components are now **controlled components**. The Board has full control over them.
+Przenieśliśmy stan z komponentu `Square` do `Board`, przez co każdy `Square` otrzymuje od rodzica swoją wartość i informuje go o kliknięciu. W terminologii reactowej komponenty `Square` są teraz **komponentami kontrolowanymi**. `Board` ma nad nimi pełną kontrolę.
-Note how in `handleClick`, we call `.slice()` to create a copy of the `squares` array to modify instead of modifying the existing array. We will explain why we create a copy of the `squares` array in the next section.
+Zauważ, że w metodzie `handleClick` używamy `.slice()` do stworzenia kopii tablicy `squares`, zamiast ją modyfikować bezpośrednio. W następnym podrozdziale dowiesz się dlaczego.
-### Why Immutability Is Important {#why-immutability-is-important}
+### Dlaczego niezmienność jest istotna {#why-immutability-is-important}
-In the previous code example, we suggested that you use the `.slice()` operator to create a copy of the `squares` array to modify instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn.
+W poprzednim przykładzie zasugerowaliśmy użycie metody `.slice()` do stworzenia kopii tablicy `squares`, zamiast ją bezpośrednio modyfikować. Omówimy teraz bardzo ważne zagadnienie, jakim jest niezmienność (ang. *immutability*).
-There are generally two approaches to changing data. The first approach is to *mutate* the data by directly changing the data's values. The second approach is to replace the data with a new copy which has the desired changes.
+Ogólnie rzecz biorąc, istnieją dwa sposoby na zmianę danych. Pierwszym z nich jest *mutowanie* (ang. *mutate*) danych poprzez bezpośrednią zmianę ich wartości. Drugim sposobem jest zastąpienie danych ich nową kopią, zawierającą wszystkie potrzebne zmiany.
-#### Data Change with Mutation {#data-change-with-mutation}
+#### Zmiana danych poprzez mutację {#data-change-with-mutation}
```javascript
var player = {score: 1, name: 'Jeff'};
player.score = 2;
-// Now player is {score: 2, name: 'Jeff'}
+// Teraz zmienna "player" ma wartość: {score: 2, name: 'Jeff'}
```
-#### Data Change without Mutation {#data-change-without-mutation}
+#### Zmiana danych bez mutacji {#data-change-without-mutation}
```javascript
var player = {score: 1, name: 'Jeff'};
var newPlayer = Object.assign({}, player, {score: 2});
-// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}
+// Zmienna "player" nie uległa zmianie, a "newPlayer" jest nowym obiektem o wartościach {score: 2, name: 'Jeff'}
-// Or if you are using object spread syntax proposal, you can write:
+// Jeśli używasz składni "operatora rozszczepienia" (ang. spread operator), możesz napisać:
// var newPlayer = {...player, score: 2};
```
-The end result is the same but by not mutating (or changing the underlying data) directly, we gain several benefits described below.
+Rezultat jest podobny, lecz jeśli zdecydujemy się nie mutować (ani nie zmieniać znajdujących się wewnątrz) danych bezpośrednio, zyskamy kilka korzyści opisanych poniżej.
-#### Complex Features Become Simple {#complex-features-become-simple}
+#### Skomplikowane funkcjonalności stają się proste {#complex-features-become-simple}
-Immutability makes complex features much easier to implement. Later in this tutorial, we will implement a "time travel" feature that allows us to review the tic-tac-toe game's history and "jump back" to previous moves. This functionality isn't specific to games -- an ability to undo and redo certain actions is a common requirement in applications. Avoiding direct data mutation lets us keep previous versions of the game's history intact, and reuse them later.
+Niezmienność (ang. *immutability*) sprawia, że skomplikowane funkcjonalności są łatwiejsze w implementacji. W późniejszej części tego samouczka dodamy funkcjonalność "podróży w czasie", która pozwoli nam przejrzeć historię ruchów gry w "kółko i krzyżyk" i "cofać się w czasie" do wybranego ruchu. Nie jest to jednak coś, co można zaimplementować tylko w grze - możliwość cofania i ponawiania czynności jest dość popularnym wymogiem w aplikacjach. Unikanie bezpośredniej modyfikacji danych pozwoli nam przechowywać poprzednie stany gry nienaruszone i ponownie ich używać.
-#### Detecting Changes {#detecting-changes}
+#### Wykrywanie zmian {#detecting-changes}
-Detecting changes in mutable objects is difficult because they are modified directly. This detection requires the mutable object to be compared to previous copies of itself and the entire object tree to be traversed.
+Wykrywanie zmian w mutowalnych (ang. *mutable*) obiektach jest trudne, ponieważ są one zmieniane bezpośrednio. Tego typu mechanizm detekcji zmian musiałby porównać aktualną i poprzednią wersję obiektu na każdym poziomie jego struktury.
-Detecting changes in immutable objects is considerably easier. If the immutable object that is being referenced is different than the previous one, then the object has changed.
+Wykrywanie zmian w niezmiennych (ang. *immutable*) obiektach jest stosunkowo łatwe. Jeśli referencja aktualnego obiektu jest różna od referencji poprzedniego, to znaczy, że nastąpiła jakaś zmiana.
-#### Determining When to Re-render in React {#determining-when-to-re-render-in-react}
+#### Kiedy ponownie renderować w Reakcie {#determining-when-to-re-render-in-react}
-The main benefit of immutability is that it helps you build _pure components_ in React. Immutable data can easily determine if changes have been made which helps to determine when a component requires re-rendering.
+Główną korzyścią z niezmienności danych jest możliwość tworzenia w Reakcie tzw. _czystych komponentów_ (ang. *pure components*). Taki komponent w łatwy sposób może sprawdzić, czy nastąpiły jakiekolwiek zmiany i czy w związku z tym powinien się ponownie wyrenderować.
-You can learn more about `shouldComponentUpdate()` and how you can build *pure components* by reading [Optimizing Performance](/docs/optimizing-performance.html#examples).
+Aby dowiedzieć się więcej na temat metody `shouldComponentUpdate()` i budowania *czystych komponentów*, zajrzyj do rozdziału pt. ["Optymalizacja wydajności"](/docs/optimizing-performance.html#examples).
-### Function Components {#function-components}
+### Komponenty funkcyjne {#function-components}
-We'll now change the Square to be a **function component**.
+Przekształcimy teraz `Square` w **komponent funkcyjny** (ang. *function component*).
-In React, **function components** are a simpler way to write components that only contain a `render` method and don't have their own state. Instead of defining a class which extends `React.Component`, we can write a function that takes `props` as input and returns what should be rendered. Function components are less tedious to write than classes, and many components can be expressed this way.
+W Reakcie **komponenty funkcyjne** są prostym sposobem na stworzenie komponentów posiadających tylko metodę `render` i niemających żadnego stanu. Zamiast definiować klasę dziedziczącą po `React.Component`, możemy napisać funkcję z argumentem `props`, która zwraca strukturę do wyrenderowania. Komponenty funkcyjne są prostsze i czytelniejsze od klas, a ponadto mają szerokie zastosowanie.
-Replace the Square class with this function:
+Zastąp klasę `Square` poniższą funkcją:
```javascript
function Square(props) {
@@ -605,19 +605,19 @@ function Square(props) {
}
```
-We have changed `this.props` to `props` both times it appears.
+zmieniając przy okazji wszystkie `this.props` na `props`.
-**[View the full code at this point](https://codepen.io/gaearon/pen/QvvJOv?editors=0010)**
+**[Zobacz dotychczasowy kod](https://codepen.io/gaearon/pen/QvvJOv?editors=0010)**
->Note
+>Uwaga
>
->When we modified the Square to be a function component, we also changed `onClick={() => this.props.onClick()}` to a shorter `onClick={props.onClick}` (note the lack of parentheses on *both* sides). In a class, we used an arrow function to access the correct `this` value, but in a function component we don't need to worry about `this`.
+>Po przekształceniu `Square` na komponent funkcyjny, zmieniliśmy także `onClick={() => this.props.onClick()}` na krótsze `onClick={props.onClick}` (zwróć uwagę na brak nawiasów okrągłych w *obu* miejscach). W klasie użyliśmy funkcji strzałkowej (ang. *arrow function*), aby odwołać się do właściwego `this`, natomiast w komponencie funkcyjnym nie musimy w ogóle martwić się o `this`.
-### Taking Turns {#taking-turns}
+### Granie na zmianę {#taking-turns}
-We now need to fix an obvious defect in our tic-tac-toe game: the "O"s cannot be marked on the board.
+W następnej kolejności należałoby naprawić widoczny na pierwszy rzut oka defekt: żaden z graczy nie może umieścić na planszy symbolu kółka ("O").
-We'll set the first move to be "X" by default. We can set this default by modifying the initial state in our Board constructor:
+Ustalmy, że domyślnie "X" wykonuje pierwszy ruch. Aby to zrobić, zmieńmy stan początkowy w konstruktorze komponentu `Board`:
```javascript{6}
class Board extends React.Component {
@@ -630,7 +630,7 @@ class Board extends React.Component {
}
```
-Each time a player moves, `xIsNext` (a boolean) will be flipped to determine which player goes next and the game's state will be saved. We'll update the Board's `handleClick` function to flip the value of `xIsNext`:
+Za każdym razem, gdy użytkownik wykona ruch, zmienna `xIsNext` (typu zerojedynkowego; ang. *boolean*) zmieni wartość na przeciwną, informując, który z graczy jest następny w kolejce, a zaraz po tym stan gry zostanie zapisany. Zmieńmy metodę `handleClick` komponentu `Board` tak, aby zmieniała flagę `xIsNext` na przeciwną:
```javascript{3,6}
handleClick(i) {
@@ -643,17 +643,17 @@ Each time a player moves, `xIsNext` (a boolean) will be flipped to determine whi
}
```
-With this change, "X"s and "O"s can take turns. Let's also change the "status" text in Board's `render` so that it displays which player has the next turn:
+Po tej modyfikacji "krzyżyki" i "kółka" będą wykonywać ruchy na zmianę. Zaktualizujmy teraz wartość `status` w metodzie `render`, aby poprawnie wyświetlała, który gracz jest następny:
```javascript{2}
render() {
- const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+ const status = 'Następny gracz: ' + (this.state.xIsNext ? 'X' : 'O');
return (
- // the rest has not changed
+ // reszta kodu pozostaje bez zmian
```
-After applying these changes, you should have this Board component:
+Zmieniony komponent `Board` powinien wyglądać następująco:
```javascript{6,11-16,29}
class Board extends React.Component {
@@ -684,7 +684,7 @@ class Board extends React.Component {
}
render() {
- const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+ const status = 'Następny gracz: ' + (this.state.xIsNext ? 'X' : 'O');
return (
@@ -710,11 +710,11 @@ class Board extends React.Component {
}
```
-**[View the full code at this point](https://codepen.io/gaearon/pen/KmmrBy?editors=0010)**
+**[Zobacz dotychczasowy kod](https://codepen.io/gaearon/pen/KmmrBy?editors=0010)**
-### Declaring a Winner {#declaring-a-winner}
+### Ogłaszanie zwycięzcy {#declaring-a-winner}
-Now that we show which player's turn is next, we should also show when the game is won and there are no more turns to make. We can determine a winner by adding this helper function to the end of the file:
+Teraz gdy już wyświetlamy, który z graczy będzie wykonywał następny ruch, powinniśmy również ogłaszać zwycięzcę lub wyświetlać informację o braku możliwych ruchów. Do wyłaniania zwycięzcy posłuży nam następujące funkcja pomocnicza, którą należy dodać na końcu pliku:
```javascript
function calculateWinner(squares) {
@@ -738,23 +738,23 @@ function calculateWinner(squares) {
}
```
-We will call `calculateWinner(squares)` in the Board's `render` function to check if a player has won. If a player has won, we can display text such as "Winner: X" or "Winner: O". We'll replace the `status` declaration in Board's `render` function with this code:
+Funkcję `calculateWinner(squares)` wywołamy w metodzie `render` komponentu `Board`, sprawdzając w ten sposób, czy gracz aktualnie wykonujący ruch jest zwycięzcą. Jeśli odpowiedź będzie pozytywna, możemy wyświetlić tekst w stylu "Wygrywa: X" lub "Wygrywa: O". Podmieńmy `status` w metodzie `render` na:
```javascript{2-8}
render() {
const winner = calculateWinner(this.state.squares);
let status;
if (winner) {
- status = 'Winner: ' + winner;
+ status = 'Wygrywa: ' + winner;
} else {
- status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+ status = 'Następny gracz: ' + (this.state.xIsNext ? 'X' : 'O');
}
return (
- // the rest has not changed
+ // reszta kodu pozostaje bez zmian
```
-We can now change the Board's `handleClick` function to return early by ignoring a click if someone has won the game or if a Square is already filled:
+W metodzie `handleClick` komponentu `Board` możemy teraz zakończyć funkcję przedwcześnie, ignorując kliknięcia po wyłonieniu zwycięzcy lub wypełnieniu całej planszy:
```javascript{3-5}
handleClick(i) {
@@ -770,25 +770,25 @@ We can now change the Board's `handleClick` function to return early by ignoring
}
```
-**[View the full code at this point](https://codepen.io/gaearon/pen/LyyXgK?editors=0010)**
+**[Zobacz dotychczasowy kod](https://codepen.io/gaearon/pen/LyyXgK?editors=0010)**
-Congratulations! You now have a working tic-tac-toe game. And you've just learned the basics of React too. So *you're* probably the real winner here.
+Gratulacje! Gra w "kółko i krzyżyk" jest gotowa. A przy okazji znasz już podstawy Reacta. Więc tak naprawdę to *Ty* jesteś tu zwycięzcą.
-## Adding Time Travel {#adding-time-travel}
+## Dodanie "podróży w czasie" {#adding-time-travel}
-As a final exercise, let's make it possible to "go back in time" to the previous moves in the game.
+W ramach ostatniego ćwiczenia dodamy możliwość "cofania się w czasie" do wykonanych już ruchów.
-### Storing a History of Moves {#storing-a-history-of-moves}
+### Przechowywanie historii ruchów {#storing-a-history-of-moves}
-If we mutated the `squares` array, implementing time travel would be very difficult.
+Gdybyśmy bezpośrednio modyfikowali tablicę `squares`, zaimplementowanie "podróży w czasie" byłoby bardzo trudne.
-However, we used `slice()` to create a new copy of the `squares` array after every move, and [treated it as immutable](#why-immutability-is-important). This will allow us to store every past version of the `squares` array, and navigate between the turns that have already happened.
+Jednak zamiast tego po każdym ruchu tworzymy kopię tablicy `squares` przy pomocy metody `slice()`, [traktując ją jako niezmienną](#why-immutability-is-important) (ang. *immutable*). Pozwoli nam to przechowywać wszystkie poprzednie wersje tej tablicy i przeskakiwać między poszczególnymi ruchami graczy.
-We'll store the past `squares` arrays in another array called `history`. The `history` array represents all board states, from the first to the last move, and has a shape like this:
+Poprzednie wersje tablicy `squares` będziemy przechowywać w innej tablicy o nazwie `history`. Tablica ta będzie zawierać wszystkie stany planszy, od pierwszego aż do ostatniego, i będzie wyglądała mniej więcej tak:
```javascript
history = [
- // Before first move
+ // Przed pierwszym ruchem
{
squares: [
null, null, null,
@@ -796,7 +796,7 @@ history = [
null, null, null,
]
},
- // After first move
+ // Po pierwszym ruchu
{
squares: [
null, null, null,
@@ -804,7 +804,7 @@ history = [
null, null, null,
]
},
- // After second move
+ // Po drugim ruchu
{
squares: [
null, null, null,
@@ -816,15 +816,15 @@ history = [
]
```
-Now we need to decide which component should own the `history` state.
+Teraz musimy już tylko zdecydować, który komponent powinien być właścicielem tablicy `history`.
-### Lifting State Up, Again {#lifting-state-up-again}
+### Wynoszenie stanu w górę - po raz kolejny {#lifting-state-up-again}
-We'll want the top-level Game component to display a list of past moves. It will need access to the `history` to do that, so we will place the `history` state in the top-level Game component.
+Chcielibyśmy, aby komponent `Game` wyświetlał listę poprzednich ruchów, z racji tego, że jest najwyżej w hierarchii. W tym celu będzie on potrzebował dostępu do tablicy `history`, dlatego to właśnie on powinien być jej właścicielem.
-Placing the `history` state into the Game component lets us remove the `squares` state from its child Board component. Just like we ["lifted state up"](#lifting-state-up) from the Square component into the Board component, we are now lifting it up from the Board into the top-level Game component. This gives the Game component full control over the Board's data, and lets it instruct the Board to render previous turns from the `history`.
+Umieszczenie zmiennej `history` w komponencie `Game` pozwoli nam usunąć zmienną `squares` z komponentu potomnego `Board`. Podobnie jak ["wynieśliśmy stan w górę"](#lifting-state-up) z komponentu `Square` do `Board`, tak teraz przeniesiemy go jeszcze wyżej - z `Board` do `Game`. Dzięki temu komponent `Game` będzie miał pełną kontrolę nad danymi dostarczanymi do `Board`, co pozwoli poinstruować komponent `Board`, aby wyrenderował któryś z poprzednich ruchów.
-First, we'll set up the initial state for the Game component within its constructor:
+Najpierw musimy zainicjalizować stan dla komponentu `Game` w jego konstruktorze:
```javascript{2-10}
class Game extends React.Component {
@@ -845,8 +845,8 @@ class Game extends React.Component {
-
{/* status */}
-
{/* TODO */}
+
{/* Status */}
+
{/* Do zrobienia */}