From 2173c746e958ed9ef761214c4257a16d56b860db Mon Sep 17 00:00:00 2001 From: Jakub Drozdek Date: Sat, 16 Feb 2019 01:09:54 +0100 Subject: [PATCH 01/10] Translate 'Tutorial' (up to the 'Completing the Game' section) --- content/tutorial/tutorial.md | 222 +++++++++++++++++------------------ 1 file changed, 111 insertions(+), 111 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 9e1e58872..9b47ce253 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,6 +1,6 @@ --- id: tutorial -title: "Tutorial: Intro to React" +title: "Samouczek: Wstęp do Reacta" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html @@ -12,99 +12,99 @@ redirect_from: - "docs/tutorial-zh-CN.html" --- -This tutorial doesn't assume any existing React knowledge. +Ten samouczek nie zakłada jakiejkolwiek znajomości Reacta. -## Before We Start the Tutorial {#before-we-start-the-tutorial} +## Zanim zaczniemy się uczyć {#before-we-start-the-tutorial} -We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React. +W tym samouczku skupimy się na stworzeniu niewielkiej gry. **Być może po tym zdaniu zechcesz go pominąć, bo nie zajmujesz się pisaniem gier - ale daj mu szansę**. Techniki, które tu poznasz, są fundamentem do zbudowania dowolnej aplikacji w Reakcie, a wyćwiczenie ich pozwoli Ci dogłębnie zrozumieć tajniki tej biblioteki. ->Tip +>Wskazówka > ->This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](/docs/hello-world.html). You might find this tutorial and the guide complementary to each other. +>Ten samouczek jest przeznaczony dla osób, które wolą **uczyć się poprzez praktykę**. Jeśli wolisz pouczyć się zagadnień od podstaw, zajrzyj do naszego [poradnika krok po kroku](/docs/hello-world.html). Wiedz jednak, że ten samouczek oraz tamten poradnik nawzajem się uzupełniają. -The tutorial is divided into several sections: +Samouczek podzieliliśmy na kilka części: -* [Setup for the Tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial. -* [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state. -* [Completing the Game](#completing-the-game) will teach you **the most common techniques** in React development. -* [Adding Time Travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React. +* [Przygotowanie i konfiguracja](#setup-for-the-tutorial) opisuje, **jak rozpocząć**, aby być w stanie wykonywać dalsze kroki. +* [Przegląd](#overview) zawiera informacje o **podstawach** Reacta: komponentach, atrybutach i stanie. +* [Dokończenie gry](#completing-the-game) pokazuje **najczęstsze techniki** programowania w Reakcie. +* [Dodanie wehikułu czasu](#adding-time-travel) pozwala **dogłębnie zrozumieć** mocne strony Reacta. -You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections. +Nie musisz wcale przechodzić przez wszystkie części samouczka naraz, żeby wynieść z cokolwiek. Spróbuj jednak dojść najdalej jak możesz - nawet jeśli będą to tylko dwa rozdziały. -It's fine to copy and paste code as you're following along the tutorial, but we recommend to type it by hand. This will help you develop a muscle memory and a stronger understanding. +W trakcie wykonywania poleceń możesz kopiować kod do edytora, ale zalecamy pisać go samodzielnie. Pozwoli Ci to wyrobić pamięć mięśniową i lepiej zrozumieć temat. -### What Are We Building? {#what-are-we-building} +### Co będziemy budować? {#what-are-we-building} -In this tutorial, we'll show how to build an interactive tic-tac-toe game with React. +W tym samouczku pokażemy, jak przy pomocy Reacta zbudować interaktywną grę w "kółko i krzyżyk". -You can see what we'll be building here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. If the code doesn't make sense to you, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax. +Na koniec nasz kod będzie wyglądał tak: **[Efekt końcowy](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Kod wygląda bez sensu albo nie rozumiesz jego składni? Bez obaw! Celem tego samouczka jest właśnie pomóc Ci zrozumieć Reacta i jego składnie. -We recommend that you check out the tic-tac-toe game before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and is updated as the game progresses. +Przed dalszą lekturą radzimy uruchomić grę w "kółko i krzyżyk". Jedną z funkcjonalności, znajdującą się na prawo od planszy, jest numerowana lista. Służy ona do wyświetlania historii wszystkich ruchów, jakie wykonano podczas rozgrywki, i jest aktualizowana na bieżąco. -You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game. +Gdy już zapoznasz się z grą, możesz ją wyłączyć. Naukę rozpoczniemy od prostego szablonu. Naszym następnym krokiem będzie konfiguracja środowiska, aby nadawało się do stworzenia gry. -### Prerequisites {#prerequisites} +### Wymagania {#prerequisites} -We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes. +Zakładamy, że HTML i JavaScript nie są Ci obce, ale nawet jeśli to Twoja pierwsza styczność z tymi językami, to samouczek nie powinien przysporzyć Ci większego problemu. Zakładamy również, że znasz takie pojęcia z programowania obiektowego jak "funkcja", "obiekt" czy "tablica", a także przynajmniej w niewielkim stopniu rozumiesz, czym jest "klasa". -If you need to review JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6 -- a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to. +Jeśli potrzebujesz odświeżyć sobie wiedzę o JavaScripcie, zalecamy lekturę [tego poradnika](https://developer.mozilla.org/pl/docs/Web/JavaScript/Ponowne_wprowadzenie_do_JavaScript). Zwróć uwagę, że będziemy tu korzystać z niektórych funkcjonalności standardu ES6 - jednej z ostatnich wersji języka JavaScript - takich jak [funkcje strzałkowe](https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Functions/Funkcje_strzalkowe) (ang. *arrow functions*), [klasy](https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Classes) oraz wyrażenia [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) i [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const). Możesz skorzystać ze środowiska [Babel REPL](babel://es5-syntax-example), aby sprawdzić, co powstanie w wyniku transpilowania kodu napisanego w standardzie ES6. -## Setup for the Tutorial {#setup-for-the-tutorial} +## Konfiguracja pod samouczek {#setup-for-the-tutorial} -There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer. +Istnieją dwa sposoby na ukończenie tego samouczka: możesz pisać kod w przeglądarce lub możesz zestawić lokalne środowisko na swoim komputerze. -### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser} +### Opcja konfiguracyjna nr 1: Pisanie kodu w przeglądarce {#setup-option-1-write-code-in-the-browser} -This is the quickest way to get started! +To zdecydowanie najszybszy sposób! -First, open this **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial. +Na początek otwórz w nowej karcie **[Szablon startowy](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Twoim oczom powinna ukazać się pusta plansza do gry w "kółko i krzyżyk" oraz panel z kodem reactowym. W tym samouczku będziemy edytować kod w tymże panelu. -You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React. +Możesz teraz pominąć opcję nr 2 i przejść do rozdziału pt. ["Przegląd"](#overview), w którym przedstawiliśmy ogólne informacje o Reakcie. -### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment} +### Opcja konfiguracyjna nr 2: Lokalne środowisko programistyczne {#setup-option-2-local-development-environment} -This is completely optional and not required for this tutorial! +Ten sposób jest całkowicie opcjonalny i nie jest konieczny do ukończenia tego samouczka!
-Optional: Instructions for following along locally using your preferred text editor +Opcjonalne: Instrukcje na temat pisania kodu w wybranym przez siebie edytorze tekstu -This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow: +Ta konfiguracja wymaga więcej wysiłku, lecz pozwala na ukończenie samouczka przy użyciu wybranego przez siebie edytora. Należy kolejno: -1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed. -2. Follow the [installation instructions for Create React App](/docs/create-a-new-react-app.html#create-react-app) to make a new project. +1. Sprawdzić, czy posiada się najnowszą wersję [Node.js](https://nodejs.org/en/). +2. Wykonać [instrukcje instalacji "Create React App"](/docs/create-a-new-react-app.html#create-react-app) w celu zainicjalizowania nowego projektu. ```bash -npx create-react-app my-app +npx create-react-app moja-aplikacja ``` -3. Delete all files in the `src/` folder of the new project +3. Usunąć wszystkie pliki z folderu `src/` w nowo utworzonym projekcie -> Note: +> Uwaga: > ->**Don't delete the entire `src` folder, just the original source files inside it.** We'll replace the default source files with examples for this project in the next step. +>**Nie usuwaj całego folderu `src`, tylko znajdujące się wewnątrz pliki.** W następnym kroku podmienimy domyślne pliki źródłowe przykładami z samouczka. ```bash -cd my-app +cd moja-aplikacja cd src -# If you're using a Mac or Linux: +# Jeśli używasz Maca lub Linuxa, wpisz: rm -f * -# Or, if you're on Windows: +# Lub jeśli używasz Windowsa: del * -# Then, switch back to the project folder +# A następnie cofnij się do folderu z projektem cd .. ``` -4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). +4. W folderze `src/` dodaj plik o nazwie `index.css` i wstaw do niego [ten kod CSS](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). -5. Add a file named `index.js` in the `src/` folder with [this JS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). +5. W folderze `src/` dodaj plik `index.js` i wstaw do niego [ten kod JS](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). -6. Add these three lines to the top of `index.js` in the `src/` folder: +6. Wstaw te trzy linie na początku pliku `index.js` znajdującego się w folderze `/src/`: ```js import React from 'react'; @@ -112,32 +112,32 @@ import ReactDOM from 'react-dom'; import './index.css'; ``` -Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field. +Teraz, gdy w folderze z projektem wykonasz polecenie `npm start`, a następnie wpiszesz w przeglądarce adres `http://localhost:3000`, na ekranie powinna pojawić się pusta plansza do gry w "kółko i krzyżyk". -We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor. +Zalecamy wykonanie [tych instrukcji](https://babeljs.io/docs/editors/) w celu skonfigurowania narzędzia do podświetlania składni w Twoim edytorze tekstu.
-### Help, I'm Stuck! {#help-im-stuck} +### Pomocy, nie wiem, co robić! {#help-im-stuck} -If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out. +Jeśli w którymś momencie się zgubisz, przejrzyj [listę źródeł wsparcia od społeczności](/community/support.html). Zwłaszcza [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) jest znany z szybkiego udzielania pomocy. Jeśli mimo wszystko nie otrzymasz odpowiedzi lub nadal masz z czymś problem, zgłoś nam to, a spróbujemy Ci jakoś pomóc. -## Overview {#overview} +## Przegląd {#overview} -Now that you're set up, let's get an overview of React! +Teraz, gdy już masz wszystko skonfigurowane, czas dowiedzieć się czegoś o Reakcie! -### What Is React? {#what-is-react} +### Czym jest React? {#what-is-react} -React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components". +React jest deklaratywną, skuteczną i elastyczną biblioteką javascriptową do budowania interfejsów użytkownika. Pozwala na zbudowanie skomplikowanego UI przy użyciu małych i odizolowanych od siebie kawałków kodu, zwanych "komponentami". -React has a few different kinds of components, but we'll start with `React.Component` subclasses: +React rozróżnia kilka rodzajów komponentów, lecz zacznijmy od klas dziedziczących po `React.Component`: ```javascript class ShoppingList extends React.Component { render() { return (
-

Shopping List for {this.props.name}

+

{this.props.name} - lista zakupów

); } ``` -Since the Game component is now rendering the game's status, we can remove the corresponding code from the Board's `render` method. After refactoring, the Board's `render` function looks like this: +Ponieważ teraz komponent `Game` zajmuje się renderowaniem statusu gry, możemy usunąć odpowiadający za to kod z metody `render` komponentu `Board`. Po tej refaktoryzacji metoda `render` w `Board` powinna wyglądać tak: ```js{1-4} render() { @@ -976,7 +976,7 @@ Since the Game component is now rendering the game's status, we can remove the c } ``` -Finally, we need to move the `handleClick` method from the Board component to the Game component. We also need to modify `handleClick` because the Game component's state is structured differently. Within the Game's `handleClick` method, we concatenate new history entries onto `history`. +Na koniec przeniesiemy metodę `handleClick` z komponentu `Board` do `Game`. Z uwagi na fakt, iż stan gry jest teraz przechowywany w inny sposób, musimy odpowiednio zaktualizować kod tej metody, aby dodawała wykonywane ruchy na koniec tablicy `history`. ```javascript{2-4,10-12} handleClick(i) { @@ -996,30 +996,30 @@ Finally, we need to move the `handleClick` method from the Board component to th } ``` ->Note +>Uwaga > ->Unlike the array `push()` method you might be more familiar with, the `concat()` method doesn't mutate the original array, so we prefer it. +>W przeciwieństwie do metody `push()`, którą pewnie już znasz, metoda `concat()` nie modyfikuje tablicy, lecz dodaje element do jej kopii, co jest nam na rękę. -At this point, the Board component only needs the `renderSquare` and `render` methods. The game's state and the `handleClick` method should be in the Game component. +W tym momencie komponent `Board` będzie potrzebował już tylko dwóch metod: `renderSquare` oraz `render`. Stan gry oraz metoda `handleClick` powinny znaleźć się w komponencie `Game`. **[Zobacz dotychczasowy kod](https://codepen.io/gaearon/pen/EmmOqJ?editors=0010)** -### Showing the Past Moves {#showing-the-past-moves} +### Wyświetlanie ruchów z przeszłości {#showing-the-past-moves} -Since we are recording the tic-tac-toe game's history, we can now display it to the player as a list of past moves. +Dzięki temu, że zapisujemy historię stanów gry w "kółko i krzyżyk", możemy wyświetlić na ekranie ruchy z przeszłości w formie listy. -We learned earlier that React elements are first-class JavaScript objects; we can pass them around in our applications. To render multiple items in React, we can use an array of React elements. +W poprzednich rozdziałach dowiedzieliśmy się, że elementy reactowe są [pierwszoklasowymi obiektami javascriptowymi](https://pl.wikipedia.org/wiki/Typ_pierwszoklasowy) (ang. *first-class JavaScript objects*); możemy je przekazywać w aplikacji do woli. Do wyrenderowania listy w Reakcie możemy wykorzystać tablicę elementów reactowych. -In JavaScript, arrays have a [`map()` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) that is commonly used for mapping data to other data, for example: +Javascriptowe tablice mają wbudowaną [metodę `map()`](https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array/map), której często używa się do mapowania danych na inne, na przykład: ```js const numbers = [1, 2, 3]; const doubled = numbers.map(x => x * 2); // [2, 4, 6] ``` -Using the `map` method, we can map our history of moves to React elements representing buttons on the screen, and display a list of buttons to "jump" to past moves. +Przy pomocy metody `map` możemy przekształcić historię ruchów w listę elementów reactowych reprezentujących przyciski na ekranie, a następnie wyświetlić tę listę na ekranie, by umożliwić "przeskakiwanie" między ruchami. -Let's `map` over the `history` in the Game's `render` method: +Użyjmy zatem `map` na tablicy `history` wewnątrz metody `render` komponentu `Board`: ```javascript{6-15,34} render() { @@ -1029,8 +1029,8 @@ Let's `map` over the `history` in the Game's `render` method: const moves = history.map((step, move) => { const desc = move ? - 'Go to move #' + move : - 'Go to game start'; + 'Przejdź do ruchu #' + move : + 'Przejdź na początek gry'; return (
  • @@ -1040,7 +1040,7 @@ Let's `map` over the `history` in the Game's `render` method: let status; if (winner) { - status = 'Winner: ' + winner; + status = 'Wygrywa: ' + winner; } else { status = 'Następny gracz: ' + (this.state.xIsNext ? 'X' : 'O'); } @@ -1064,60 +1064,63 @@ Let's `map` over the `history` in the Game's `render` method: **[Zobacz dotychczasowy kod](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)** -For each move in the tic-tac-toes's game's history, we create a list item `
  • ` which contains a button ` @@ -1128,9 +1131,9 @@ In the Game component's `render` method, we can add the key as `
  • ` **[Zobacz dotychczasowy kod](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)** -Clicking any of the list item's buttons throws an error because the `jumpTo` method is undefined. Before we implement `jumpTo`, we'll add `stepNumber` to the Game component's state to indicate which step we're currently viewing. +Jeśli teraz klikniesz na którykolwiek z przycisków znajdujących się na liście ruchów, zobaczysz błąd, ponieważ metoda `jumpTo` nie została jeszcze zdefiniowana. Zanim ją zaimplementujemy, musimy dodać zmienną `stepNumber` do stanu komponentu `Game`, aby wiedzieć, który ruch jest aktualne wyświetlany na planszy. -First, add `stepNumber: 0` to the initial state in Game's `constructor`: +Na początek dodaj `stepNumber: 0` do stanu początkowego w konstruktorze komponentu `Game`: ```js{8} class Game extends React.Component { @@ -1146,11 +1149,11 @@ class Game extends React.Component { } ``` -Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We also set `xIsNext` to true if the number that we're changing `stepNumber` to is even: +Teraz pozostaje nam zdefiniować metodę `jumpTo`, która będzie aktualizować wartość zmiennej `stepNumber`. Będziemy również zmieniać wartość zmiennej `xIsNext` na przeciwną, jeśli `stepNumber` jest liczbą parzystą: ```javascript{5-10} handleClick(i) { - // this method has not changed + // ta metoda się nie zmieniła } jumpTo(step) { @@ -1161,15 +1164,15 @@ Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We a } render() { - // this method has not changed + // ta metoda się nie zmieniła } ``` -We will now make a few changes to the Game's `handleClick` method which fires when you click on a square. +Następnie zmienimy nieco metodę `handleClick` w komponencie `Game`, która wywoływana jest po kliknięciu na pole planszy. -The `stepNumber` state we've added reflects the move displayed to the user now. After we make a new move, we need to update `stepNumber` by adding `stepNumber: history.length` as part of the `this.setState` argument. This ensures we don't get stuck showing the same move after a new one has been made. +Zmienna `stepNumber` obecnie odzwierciedla numer ruchu, który wyświetlany jest na ekranie. Po wykonaniu kolejnego ruchu powinniśmy ją ustawiać na `stepNumber: history.length`. Zapobiegnie to utknięciu jednym i tym samym kroku, nawet pomimo wykonania przez gracza ruchu. -We will also replace reading `this.state.history` with `this.state.history.slice(0, this.state.stepNumber + 1)`. This ensures that if we "go back in time" and then make a new move from that point, we throw away all the "future" history that would now become incorrect. +Zamienimy również odczytywanie wartości `this.state.history` na `this.state.history.slice(0, this.state.stepNumber + 1)`. Dzięki temu, gdy "cofniemy się w czasie", a następnie wykonamy jakiś ruch, odrzucimy wszelkie kolejne zapisane w historii wpisy "z przyszłości", które stałyby się nieprawidłowe. ```javascript{2,13} handleClick(i) { @@ -1190,7 +1193,7 @@ We will also replace reading `this.state.history` with `this.state.history.slice } ``` -Finally, we will modify the Game component's `render` method from always rendering the last move to rendering the currently selected move according to `stepNumber`: +Na koniec zmienimy kod w metodzie `render` komponentu `Game`, aby zamiast zawsze wyświetlać ostatni ruch w historii, renderował ruch zgodny z wartością zmiennej `stepNumber`: ```javascript{3} render() { @@ -1201,30 +1204,30 @@ Finally, we will modify the Game component's `render` method from always renderi // reszta kodu pozostaje bez zmian ``` -If we click on any step in the game's history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred. +Teraz jeśli klikniemy na którymkolwiek elemencie historii ruchów, plansza powinna zmienić stan na taki, który obowiązywał w wybranej turze. **[Zobacz dotychczasowy kod](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)** -### Wrapping Up {#wrapping-up} +### Podsumowanie {#wrapping-up} -Congratulations! You've created a tic-tac-toe game that: +Gratulacje! Udało Ci się stworzyć grę w "kółko i krzyżyk", która: -* Lets you play tic-tac-toe, -* Indicates when a player has won the game, -* Stores a game's history as a game progresses, -* Allows players to review a game's history and see previous versions of a game's board. +* Umożliwia granie w "kółko i krzyżyk", +* Informuje, gdy któryś z graczy wygra, +* Przechowuje na bieżąco historię ruchów, +* Pozwala na przeglądanie historii ruchów, a co za tym idzie, kolejnych stanów planszy. -Nice work! We hope you now feel like you have a decent grasp on how React works. +Dobra robota! Mamy nadzieję, że czujesz już większą swobodę w pisaniu w Reakcie. -Check out the final result here: **[Efekt końcowy](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. +Sprawdź, jak na koniec powinien wyglądać kod: **[Efekt końcowy](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. -If you have extra time or want to practice your new React skills, here are some ideas for improvements that you could make to the tic-tac-toe game which are listed in order of increasing difficulty: +Jeśli masz jeszcze trochę wolnego czasu i chcesz poćwiczyć Reacta, mamy dla Ciebie kilka pomysłów na udoskonalenia gry w "kółko i krzyżyk" (w kolejności od najłatwiejszego do najtrudniejszego): -1. Display the location for each move in the format (col, row) in the move history list. -2. Bold the currently selected item in the move list. -3. Rewrite Board to use two loops to make the squares instead of hardcoding them. -4. Add a toggle button that lets you sort the moves in either ascending or descending order. -5. When someone wins, highlight the three squares that caused the win. -6. When no one wins, display a message about the result being a draw. +1. Wyświetl w historii współrzędne dla każdego z ruchów w formacie (kolumna, wiersz). +2. Zastosuj pogrubienie na aktualnie wyświetlanym elemencie listy ruchów. +3. Przepisz komponent `Board` w taki sposób, aby wyświetlić wszystkie pola za pomocą dwóch pętli, zamiast jawnie je podawać w kodzie. +4. Dodaj przycisk, który będzie na zmianę sortował listę ruchów rosnąco i malejąco. +5. Gdy któryś z graczy wygra, podświetl trzy pola, które zapewniły zwycięstwo. +6. Jeśli gra zakończy się bez wygranej, wyświetl odpowiednią wiadomość. -Throughout this tutorial, we touched on React concepts including elements, components, props, and state. For a more detailed explanation of each of these topics, check out [the rest of the documentation](/docs/hello-world.html). To learn more about defining components, check out the [`React.Component` API reference](/docs/react-component.html). +W tym samouczku poruszyliśmy temat elementów, komponentów, atrybutów i stanu. Jeśli chcesz bardziej zagłębić się w te zagadnienia, [przeczytaj resztę dokumentacji](/docs/hello-world.html). Jeśli natomiast wolisz dowiedzieć się więcej na temat definiowania komponentów, zajrzyj do [Dokumentacji API klasy `React.Component`](/docs/react-component.html). From e76638f739094f1875993d3e2a5a259c21b8d9d4 Mon Sep 17 00:00:00 2001 From: Jakub Drozdek Date: Tue, 19 Feb 2019 01:50:20 +0100 Subject: [PATCH 05/10] Minor improvements --- content/tutorial/tutorial.md | 175 +++++++++++++++++------------------ 1 file changed, 87 insertions(+), 88 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index ac0dfb583..06c3234b7 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -16,20 +16,20 @@ Ten samouczek nie zakłada jakiejkolwiek znajomości Reacta. ## Zanim zaczniemy się uczyć {#before-we-start-the-tutorial} -W tym samouczku skupimy się na stworzeniu niewielkiej gry. **Być może po tym zdaniu zechcesz go pominąć, bo nie zajmujesz się pisaniem gier - ale daj mu szansę**. Techniki, które tu poznasz, są fundamentem do zbudowania dowolnej aplikacji w Reakcie, a wyćwiczenie ich pozwoli Ci dogłębnie zrozumieć tajniki tej biblioteki. +W tym samouczku skupimy się na stworzeniu niewielkiej gry. **Być może po tym zdaniu zechcesz go pominąć, bo nie zajmujesz się pisaniem gier - ale mimo wszystko daj mu szansę**. Techniki, których nauczysz się w tym poradniku są fundamentami do zbudowania *dowolnej* aplikacji w Reakcie, a zrozumienie ich zapewni Ci dogłębne poznanie tematu. ->Wskazówka +>Uwaga > >Ten samouczek jest przeznaczony dla osób, które wolą **uczyć się poprzez praktykę**. Jeśli wolisz pouczyć się zagadnień od podstaw, zajrzyj do naszego [poradnika krok po kroku](/docs/hello-world.html). Wiedz jednak, że ten samouczek oraz tamten poradnik nawzajem się uzupełniają. Samouczek podzieliliśmy na kilka części: -* [Przygotowanie i konfiguracja](#setup-for-the-tutorial) opisuje, **jak rozpocząć**, aby być w stanie wykonywać dalsze kroki. -* [Przegląd](#overview) zawiera informacje o **podstawach** Reacta: komponentach, atrybutach i stanie. -* [Dokończenie gry](#completing-the-game) pokazuje **najczęstsze techniki** programowania w Reakcie. -* [Dodanie podróży w czasie](#adding-time-travel) pozwala **dogłębnie zrozumieć** mocne strony Reacta. +* [Przygotowanie i konfiguracja](#setup-for-the-tutorial) opisuje, **jak rozpocząć projekt**, aby móc wykonywać dalsze kroki samouczka, +* [Przegląd](#overview) zawiera informacje o **podstawach** Reacta: komponentach, atrybutach i stanie, +* [Dokończenie gry](#completing-the-game) pokazuje **najczęstsze techniki** programowania w Reakcie, +* [Dodanie "podróży w czasie"](#adding-time-travel) pozwala **dogłębnie zrozumieć** mocne strony Reacta. -Nie musisz wcale przechodzić przez wszystkie części samouczka naraz, żeby wynieść z cokolwiek. Spróbuj jednak dojść najdalej jak możesz - nawet jeśli będą to tylko dwa rozdziały. +Nie musisz wcale przechodzić przez wszystkie części samouczka naraz, żeby wynieść z niego z cokolwiek. Spróbuj jednak dojść najdalej jak możesz - nawet jeśli będą to tylko dwa rozdziały. W trakcie wykonywania poleceń możesz kopiować kod do edytora, ale zalecamy pisać go samodzielnie. Pozwoli Ci to wyrobić pamięć mięśniową i lepiej zrozumieć temat. @@ -37,9 +37,9 @@ W trakcie wykonywania poleceń możesz kopiować kod do edytora, ale zalecamy pi W tym samouczku pokażemy, jak przy pomocy Reacta zbudować interaktywną grę w "kółko i krzyżyk". -Na koniec nasz kod będzie wyglądał tak: **[Efekt końcowy](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Kod wygląda bez sensu albo nie rozumiesz jego składni? Bez obaw! Celem tego samouczka jest właśnie pomóc Ci zrozumieć Reacta i jego składnie. +Na koniec nasz kod będzie wyglądał tak: **[Efekt końcowy](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Być może w tej chwili kod wygląda bez sensu albo nie rozumiesz jego składni, ale bez obaw! Celem tego samouczka jest właśnie pomóc Ci zrozumieć Reacta i jego składnię. -Przed dalszą lekturą radzimy uruchomić grę w "kółko i krzyżyk". Jedną z funkcjonalności, znajdującą się na prawo od planszy, jest numerowana lista. Służy ona do wyświetlania historii wszystkich ruchów, jakie wykonano podczas rozgrywki, i jest aktualizowana na bieżąco. +Przed dalszą lekturą radzimy uruchomić grę w "kółko i krzyżyk". Jedną z funkcjonalności, znajdującą się na prawo od planszy, jest numerowana lista. Służy ona do wyświetlania historii wszystkich ruchów, jakie wykonano podczas rozgrywki, i jest aktualizowana na bieżąco w trakcie gry. Gdy już zapoznasz się z grą, możesz ją wyłączyć. Naukę rozpoczniemy od prostego szablonu. Naszym następnym krokiem będzie konfiguracja środowiska, aby nadawało się do stworzenia gry. @@ -51,13 +51,13 @@ Jeśli potrzebujesz odświeżyć sobie wiedzę o JavaScripcie, zalecamy lekturę ## Konfiguracja pod samouczek {#setup-for-the-tutorial} -Istnieją dwa sposoby na ukończenie tego samouczka: możesz pisać kod w przeglądarce lub możesz zestawić lokalne środowisko na swoim komputerze. +Istnieją dwa sposoby na ukończenie tego samouczka: możesz pisać kod w przeglądarce lub możesz skonfigurować lokalne środowisko na swoim komputerze. ### Opcja konfiguracyjna nr 1: Pisanie kodu w przeglądarce {#setup-option-1-write-code-in-the-browser} -To zdecydowanie najszybszy sposób! +To zdecydowanie najszybszy i najłatwiejszy sposób na rozpoczęcie przygody z Reactem! -Na początek otwórz w nowej karcie **[Szablon startowy](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Twoim oczom powinna ukazać się pusta plansza do gry w "kółko i krzyżyk" oraz panel z kodem reactowym. W tym samouczku będziemy edytować kod w tymże panelu. +Na początek otwórz w nowej karcie **[szablon startowy](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Twoim oczom powinna ukazać się pusta plansza do gry w "kółko i krzyżyk" oraz panel z kodem reactowym. W tym samouczku będziemy edytować kod w tymże panelu. Możesz teraz pominąć opcję nr 2 i przejść do rozdziału pt. ["Przegląd"](#overview), w którym przedstawiliśmy ogólne informacje o Reakcie. @@ -100,11 +100,11 @@ del * cd .. ``` -4. W folderze `src/` dodaj plik o nazwie `index.css` i wstaw do niego [ten kod CSS](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). +4. W folderze `src/` dodaj plik `index.css` i wstaw do niego [ten kod CSS](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). 5. W folderze `src/` dodaj plik `index.js` i wstaw do niego [ten kod JS](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). -6. Wstaw te trzy linie na początku pliku `index.js` znajdującego się w folderze `/src/`: +6. Wstaw te trzy linie na początku pliku `index.js` znajdującego się w folderze `src/`: ```js import React from 'react'; @@ -153,9 +153,9 @@ class ShoppingList extends React.Component { Do tych śmiesznych znaczników XML-owych wrócimy za chwilę. Komponenty pozwalają wytłumaczyć Reactowi, co chcemy ujrzeć na ekranie. Gdy zmienią się nasze dane, React w sposób efektywny zaktualizuje i ponownie wyrenderuje komponenty. -W powyższym przykładzie `ShoppingList` jest **reactowym komponentem klasowym**. Na wejściu komponent przyjmuje parametry, nazywane "atrybutami" (ang. *props*, skrót od *properties*), i przy pomocy metody `render` zwraca strukturę widoków do wyświetlenia. +W powyższym przykładzie `ShoppingList` (pol. *lista zakupów*) jest **reactowym komponentem klasowym**. Na wejściu komponent przyjmuje parametry, nazywane "atrybutami" (ang. *props*; skrót od *properties*), i przy pomocy metody `render` zwraca strukturę widoków do wyświetlenia. -Metoda `render` zwraca *opis* tego, co zostanie wyświetlone na ekranie. React bierze ten opis i wyświetla jego wynik końcowy. Precyzyjniej rzecz ujmując, metoda `render` zwraca **element reactowy**, który jest lekką reprezentacją tego, co zostanie wyświetlone na ekranie. Większość programistów reactowych używa specjalnej składni zwanej "JSX", która ułatwia pisanie wspomnianych struktur. Składnia `
    ` jest przekształcana podczas budowania w kod: `React.createElement('div')`. Zatem powyższy przykład jest równoznaczny z: +Metoda `render` zwraca *opis* tego, co zostanie wyświetlone na ekranie. React analizuje ten opis i wyświetla wynik końcowy renderowania. Precyzyjniej rzecz ujmując, metoda `render` zwraca **element reactowy**, który jest "lekką" reprezentacją tego, co zostanie wyświetlone na ekranie. Większość programistów reactowych używa specjalnej składni zwanej "JSX", która ułatwia pisanie wspomnianych struktur. Składnia `
    ` podczas budowania jest przekształcana w kod: `React.createElement('div')`. Idąc dalej, powyższy przykład jest równoznaczny z: ```javascript return React.createElement('div', {className: 'shopping-list'}, @@ -164,33 +164,33 @@ return React.createElement('div', {className: 'shopping-list'}, ); ``` -[Zobacz cały kod](babel://tutorial-expanded-version) +[Zobacz pełną wersję kodu](babel://tutorial-expanded-version) -Jeśli zżera Cię ciekawość, opis funkcji `createElement()` znajdziesz w [dokumentacji API](/docs/react-api.html#createelement), lecz w tym samouczku nie będziemy jej używać. Zamiast tego skorzystamy ze składni JSX. +Jeśli zżera Cię ciekawość, opis funkcji `createElement()` znajdziesz w [dokumentacji API](/docs/react-api.html#createelement), aczkolwiek w tym samouczku nie będziemy jej używać. Zamiast tego skorzystamy ze składni JSX. -Składnia JSX posiada pełną moc JavaScriptu. Między klamry możesz wstawić *dowolny* kod javascriptowy. Każdy element reactowy jest obiektem, który można zapisać do zmiennej i przekazywać dowolnie w swoim programie. +Składnia JSX posiada pełną moc JavaScriptu. Między klamry można wstawić *dowolny* kod javascriptowy. Każdy element reactowy jest obiektem, który można przypisać do zmiennej i przekazywać dowolnie w swoim programie. -Powyższy komponent `ShoppingList` wyrenderuje jedynie wbudowane komponenty znane z drzewa DOM, jak `
    ` czy `
  • `. Ale równie dobrze możesz wyrenderować w nim inny, własny komponent. Na przykład, do całej listy zakupów (ang. *shopping list*) można odwołać się pisząc ``. Każdy komponent w Reakcie jest enkapsulowany (ang. *encapsulated*) i może działać niezależnie; pozwala to na budowanie skomplikowanych interfejsów użytkownika przy użyciu prostych komponentów. +Powyższy komponent `ShoppingList` wyrenderuje jedynie wbudowane komponenty znane z drzewa DOM, jak `
    ` czy `
  • `. Ale równie dobrze można wyrenderować w nim inny, własny komponent. Na przykład, do całej listy zakupów można odwołać się pisząc ``. Każdy komponent w Reakcie jest enkapsulowany (ang. *encapsulated*) i może działać niezależnie; pozwala to na budowanie skomplikowanych interfejsów użytkownika przy użyciu prostych komponentów. ## Analizowanie szablonu startowego {#inspecting-the-starter-code} Jeśli zamierzasz przejść przez ten samouczek **w przeglądarce**, otwórz ten link w nowej karcie: **[Szablon startowy](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Jeśli zamierzasz pracować **lokalnie**, zamiast tego otwórz plik `src/index.js`, znajdujący się w folderze z projektem (jego tworzenie opisywaliśmy w rozdziale pt. ["Konfiguracja pod samouczek"](#setup-option-2-local-development-environment)). -Wspomniany "szablon startowy" będzie bazą dla naszej aplikacji. Dodaliśmy już do niego style CSS, więc teraz wystarczy, że skupisz się na nauce Reacta i implementowaniu gry w "kółko i krzyżyk". +Wspomniany "szablon startowy" będzie bazą dla naszej aplikacji. Dodaliśmy już do niego style CSS, więc teraz nareszcie można skupić się na nauce Reacta i implementowaniu gry w "kółko i krzyżyk". Analizując kod, łatwo zauważyć, że mamy do czynienia z trzema komponentami reactowymi: -* Square (pole) -* Board (plansza) -* Game (gra) +* Square (pole na planszy), +* Board (plansza), +* Game (gra). -Komponent `Square` (pole) renderuje pojedynczy element ` ); @@ -252,7 +252,7 @@ Teraz gdy klikniemy na polu, przeglądarka wyświetli wiadomość w oknie dialog >class Square extends React.Component { > render() { > return ( -> > ); @@ -260,7 +260,7 @@ Teraz gdy klikniemy na polu, przeglądarka wyświetli wiadomość w oknie dialog >} >``` > ->Zauważ, że za pomocą `onClick={() => alert('klik')}` pod atrybutem `onClick` przekazujemy *funkcję*. Zostanie ona wywołana dopiero po kliknięciu w przycisk. Częstym błędem jest zapominanie o `() =>` i pisanie `onClick={alert('klik')}`, co powoduje wyświetlenie wiadomości w momencie renderowania komponentu. +>Zauważ, że za pomocą `onClick={() => alert('kliknięto w przycisk')}` pod atrybutem `onClick` przekazujemy *funkcję*. Zostanie ona wywołana dopiero po kliknięciu w przycisk. Częstym błędem jest zapominanie o `() =>` i pisanie `onClick={alert('kliknięto w przycisk')}`, co powoduje wyświetlenie wiadomości w momencie renderowania komponentu. W następnym kroku sprawimy, by komponent `Square` "pamiętał", że został kliknięty, i wyświetlał literę "X". Komponenty do "pamiętania" rzeczy używają **stanu**. @@ -279,7 +279,7 @@ class Square extends React.Component { render() { return ( - ); From 51e3dd72fd35fc16b6f5bfec031226ceac274708 Mon Sep 17 00:00:00 2001 From: Jakub Drozdek Date: Fri, 22 Feb 2019 23:23:22 +0100 Subject: [PATCH 08/10] Apply Marcin's suggestions --- content/tutorial/tutorial.md | 78 ++++++++++++++++++------------------ 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index c160ec92d..fb1e6c996 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -29,7 +29,7 @@ Samouczek podzieliliśmy na kilka części: * [Dokończenie gry](#completing-the-game) pokazuje **najczęstsze techniki** programowania w Reakcie, * [Dodanie "podróży w czasie"](#adding-time-travel) pozwala **dogłębnie zrozumieć** mocne strony Reacta. -Nie musisz wcale przechodzić przez wszystkie części samouczka naraz, żeby wynieść z niego z cokolwiek. Spróbuj jednak dojść najdalej jak możesz - nawet jeśli będą to tylko dwa rozdziały. +Nie musisz wcale przechodzić przez wszystkie części samouczka naraz, żeby wynieść z niego cokolwiek. Spróbuj jednak dojść najdalej jak możesz - nawet jeśli będą to tylko dwa rozdziały. W trakcie wykonywania poleceń możesz kopiować kod do edytora, ale zalecamy pisać go samodzielnie. Pozwoli Ci to wyrobić pamięć mięśniową i lepiej zrozumieć temat. @@ -45,25 +45,25 @@ Gdy już zapoznasz się z grą, możesz ją wyłączyć. Naukę rozpoczniemy od ### Wymagania {#prerequisites} -Zakładamy, że HTML i JavaScript nie są Ci obce, ale nawet jeśli to Twoja pierwsza styczność z tymi językami, to samouczek nie powinien przysporzyć Ci większego problemu. Zakładamy również, że znasz takie pojęcia z programowania obiektowego jak "funkcja", "obiekt" czy "tablica", a także przynajmniej w niewielkim stopniu rozumiesz, czym jest "klasa". +Zakładamy, że HTML i JavaScript nie są ci obce, ale nawet jeśli to twoja pierwsza styczność z tymi językami, to samouczek nie powinien przysporzyć ci większego problemu. Zakładamy również, że znasz takie pojęcia z programowania obiektowego jak "funkcja", "obiekt" czy "tablica", a także przynajmniej w niewielkim stopniu rozumiesz, czym jest "klasa". Jeśli potrzebujesz odświeżyć sobie wiedzę o JavaScripcie, zalecamy lekturę [tego poradnika](https://developer.mozilla.org/pl/docs/Web/JavaScript/Ponowne_wprowadzenie_do_JavaScript). Zwróć uwagę, że będziemy tu korzystać z niektórych funkcjonalności standardu ES6 - jednej z ostatnich wersji języka JavaScript - takich jak [funkcje strzałkowe](https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Functions/Funkcje_strzalkowe) (ang. *arrow functions*), [klasy](https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Classes) oraz wyrażenia [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) i [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const). Możesz skorzystać ze środowiska [Babel REPL](babel://es5-syntax-example), aby sprawdzić, co powstanie w wyniku transpilowania kodu napisanego w standardzie ES6. ## Konfiguracja pod samouczek {#setup-for-the-tutorial} -Istnieją dwa sposoby na ukończenie tego samouczka: możesz pisać kod w przeglądarce lub możesz skonfigurować lokalne środowisko na swoim komputerze. +Masz do wyboru dwa sposoby pracy z tym samouczkiem: możesz pisać kod w przeglądarce lub skonfigurować lokalne środowisko na swoim komputerze. ### Opcja konfiguracyjna nr 1: Pisanie kodu w przeglądarce {#setup-option-1-write-code-in-the-browser} To zdecydowanie najszybszy i najłatwiejszy sposób na rozpoczęcie przygody z Reactem! -Na początek otwórz w nowej karcie **[szablon startowy](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Twoim oczom powinna ukazać się pusta plansza do gry w "kółko i krzyżyk" oraz panel z kodem reactowym. W tym samouczku będziemy edytować kod w tymże panelu. +Na początek otwórz w nowej karcie **[szablon startowy](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Twoim oczom powinna ukazać się pusta plansza do gry w "kółko i krzyżyk" oraz panel z kodem reactowym. To tutaj będziemy edytować nasz kod. Możesz teraz pominąć opcję nr 2 i przejść do rozdziału pt. ["Przegląd"](#overview), w którym przedstawiliśmy ogólne informacje o Reakcie. ### Opcja konfiguracyjna nr 2: Lokalne środowisko programistyczne {#setup-option-2-local-development-environment} -Ten sposób jest całkowicie opcjonalny i nie jest konieczny do ukończenia tego samouczka! +Ten sposób pracy z naszym samouczkiem jest całkowicie opcjonalny i nie jest konieczny do jego ukończenia!
    @@ -71,20 +71,20 @@ Ten sposób jest całkowicie opcjonalny i nie jest konieczny do ukończenia tego Opcjonalne: Instrukcje na temat pisania kodu w wybranym przez siebie edytorze tekstu -Ta konfiguracja wymaga więcej wysiłku, lecz pozwala na ukończenie samouczka przy użyciu wybranego przez siebie edytora. Należy kolejno: +Ta konfiguracja wymaga więcej wysiłku, lecz pozwala na ukończenie samouczka przy użyciu wybranego przez siebie edytora. W tym celu: -1. Sprawdzić, czy posiada się najnowszą wersję [Node.js](https://nodejs.org/en/). -2. Wykonać [instrukcje instalacji "Create React App"](/docs/create-a-new-react-app.html#create-react-app) w celu zainicjalizowania nowego projektu. +1. Sprawdź, czy masz najnowszą wersję [Node.js](https://nodejs.org/en/). +2. Wykonaj [instrukcje instalacji "Create React App"](/docs/create-a-new-react-app.html#create-react-app), aby zainicjalizować projekt. ```bash npx create-react-app moja-aplikacja ``` -3. Usunąć wszystkie pliki z folderu `src/` w nowo utworzonym projekcie +3. Usuń wszystkie pliki z folderu `src/` w nowo utworzonym projekcie > Uwaga: > ->**Nie usuwaj całego folderu `src`, tylko znajdujące się wewnątrz pliki.** W następnym kroku podmienimy domyślne pliki źródłowe przykładami z samouczka. +>**Nie usuwaj całego folderu `src`, tylko znajdujące się w nim pliki.** W następnym kroku podmienimy domyślne pliki źródłowe przykładami z samouczka. ```bash cd moja-aplikacja @@ -93,10 +93,10 @@ cd src # Jeśli używasz Maca lub Linuxa, wpisz: rm -f * -# Lub jeśli używasz Windowsa: +# Jeśli używasz Windowsa: del * -# A następnie cofnij się do folderu z projektem +# A następnie wróć do folderu z projektem cd .. ``` @@ -104,7 +104,7 @@ cd .. 5. W folderze `src/` dodaj plik `index.js` i wstaw do niego [ten kod JS](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). -6. Wstaw te trzy linie na początku pliku `index.js` znajdującego się w folderze `src/`: +6. Wstaw te trzy wiersze na początku pliku `index.js` znajdującego się w folderze `src/`: ```js import React from 'react'; @@ -114,7 +114,7 @@ import './index.css'; Teraz, gdy w folderze z projektem wykonasz polecenie `npm start`, a następnie wpiszesz w przeglądarce adres `http://localhost:3000`, na ekranie powinna pojawić się pusta plansza do gry w "kółko i krzyżyk". -Zalecamy wykonanie [tych instrukcji](https://babeljs.io/docs/editors/) w celu skonfigurowania narzędzia do podświetlania składni w Twoim edytorze tekstu. +Zalecamy wykonanie [tych instrukcji](https://babeljs.io/docs/editors/). Pozwoli ci to skonfigurować narzędzia do podświetlania składni w wybranym edytorze tekstu. @@ -128,7 +128,7 @@ Teraz, gdy już masz wszystko skonfigurowane, czas dowiedzieć się czegoś o Re ### Czym jest React? {#what-is-react} -React jest deklaratywną, skuteczną i elastyczną biblioteką javascriptową do budowania interfejsów użytkownika. Pozwala na zbudowanie skomplikowanego UI przy użyciu małych i odizolowanych od siebie kawałków kodu, zwanych "komponentami". +React jest deklaratywną, wydajną i elastyczną biblioteką javascriptową do budowania interfejsów użytkownika. Pozwala na tworzenie złożonych UI przy użyciu małych i odizolowanych od siebie kawałków kodu, zwanych "komponentami". React rozróżnia kilka rodzajów komponentów, lecz zacznijmy od klas dziedziczących po `React.Component`: @@ -151,7 +151,7 @@ class ShoppingList extends React.Component { // Przykład użycia: ``` -Do tych śmiesznych znaczników XML-owych wrócimy za chwilę. Komponenty pozwalają wytłumaczyć Reactowi, co chcemy ujrzeć na ekranie. Gdy zmienią się nasze dane, React w sposób efektywny zaktualizuje i ponownie wyrenderuje komponenty. +Do tych nietypowych znaczników XML-owych wrócimy za chwilę. Komponenty pozwalają wytłumaczyć Reactowi, co chcemy ujrzeć na ekranie. Gdy zmienią się nasze dane, React w sposób efektywny zaktualizuje i ponownie wyrenderuje komponenty. W powyższym przykładzie `ShoppingList` (pol. *lista zakupów*) jest **reactowym komponentem klasowym**. Na wejściu komponent przyjmuje parametry, nazywane "atrybutami" (ang. *props*; skrót od *properties*), i przy pomocy metody `render` zwraca strukturę widoków do wyświetlenia. @@ -166,9 +166,9 @@ return React.createElement('div', {className: 'shopping-list'}, [Zobacz pełną wersję kodu](babel://tutorial-expanded-version) -Jeśli zżera Cię ciekawość, opis funkcji `createElement()` znajdziesz w [dokumentacji API](/docs/react-api.html#createelement), aczkolwiek w tym samouczku nie będziemy jej używać. Zamiast tego skorzystamy ze składni JSX. +Jeśli ciekawość nie daje Ci spokoju, opis funkcji `createElement()` znajdziesz w [dokumentacji API](/docs/react-api.html#createelement), aczkolwiek w tym samouczku nie będziemy jej używać. Zamiast tego skorzystamy ze składni JSX. -Składnia JSX posiada pełną moc JavaScriptu. Między klamry można wstawić *dowolny* kod javascriptowy. Każdy element reactowy jest obiektem, który można przypisać do zmiennej i przekazywać dowolnie w swoim programie. +Składnia JSX ma pełną moc JavaScriptu. Między klamry można wstawić *dowolny* kod javascriptowy. Każdy element reactowy jest obiektem, który można przypisać do zmiennej i przekazywać dowolnie w swoim programie. Powyższy komponent `ShoppingList` wyrenderuje jedynie wbudowane komponenty znane z drzewa DOM, jak `
    ` czy `
  • `. Ale równie dobrze można wyrenderować w nim inny, własny komponent. Na przykład, do całej listy zakupów można odwołać się pisząc ``. Każdy komponent w Reakcie jest enkapsulowany (ang. *encapsulated*) i może działać niezależnie; pozwala to na budowanie skomplikowanych interfejsów użytkownika przy użyciu prostych komponentów. @@ -184,7 +184,7 @@ Analizując kod, łatwo zauważyć, że mamy do czynienia z trzema komponentami * Board (plansza), * Game (gra). -Komponent `Square` (pole) renderuje pojedynczy element `