From cea7031c1caab817f61957d59520691f4a23ba82 Mon Sep 17 00:00:00 2001
From: marcinostrouch <marcinostrouch@gmail.com>
Date: Wed, 20 Mar 2019 21:45:52 +0100
Subject: [PATCH 1/6] Adding translation of forms.md

---
 content/docs/forms.md | 163 ++++++++++++++++++++++--------------------
 1 file changed, 84 insertions(+), 79 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 1a8b599d5..e7c765481 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -1,6 +1,6 @@
 ---
 id: forms
-title: Forms
+title: Formularze
 permalink: docs/forms.html
 prev: lists-and-keys.html
 next: lifting-state-up.html
@@ -9,44 +9,44 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
+W Reakcie elementy formularza HTML działają trochę inaczej niż pozostałe elementy DOM. Wynika to stąd, że elementy formularza same utrzymują swój wewnętrzny stan. Dla przykładu przyjrzyjmy się zwykłemu formularzowi HTML przyjmującemu pojedyncze imię:
 
 ```html
 <form>
   <label>
-    Name:
+    Imię:
     <input type="text" name="name" />
   </label>
-  <input type="submit" value="Submit" />
+  <input type="submit" value="Wyślij" />
 </form>
 ```
 
-This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called "controlled components".
+Powyższy formularz posiada domyślną funkcję automatycznego przekierowania przeglądarki do nowej strony po wysłaniu formularza przez użytkownika. Jeśli zależy ci na tej funkcjonalności, to działa ona również w Reakcie. Jednak w większości przypadków dobrze jest mieć funkcję JavaScriptową, która obsługuje wysyłanie formularza i ma dostęp do podanych przez użytkownika danych. Standardem stała się obsługa formularzy poprzez tzw. "komponentny kontrolowane".
 
-## Controlled Components {#controlled-components}
+## Komponenty kontrolowane {#controlled-components}
 
-In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with [`setState()`](/docs/react-component.html#setstate).
+W HTML-u, elementy formularza takie jak `<input>`, `<textarea>` i `<select>` najczęściej zachowują swój własny stan, który jest aktualizowany na podstawie danych wejściowych podawanych przez użytkownika. Natomiast w Reakcie zmienny stan komponentu jest zazwyczaj przechowywany we właściwości _state_ (pol. _stan_) danego komponentu. Jest on aktualizowany jedynie za pomocą funkcji [`setState()`](/docs/react-component.html#setstate).
 
-We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".
+Możliwe jest łączenie tych dwóch rozwiązań poprzez ustanowienie reaktowego stanu jako "wyłącznego źródła prawdy". Wówczas reaktowy komponent renderujący dany formularz kontroluje również to co zachodzi wewnątrz danego formularza podczas podawania danych wejściowych przez użytkownika. Element _input_ formularza kontrolowany w ten sposób przez Reakta nazywamy "komponentem kontrolowanym"
 
-For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
+Gdybyśmy chcieli sprawić, aby podany wcześniej przykładowy formularz zapisywał przy wysłaniu podane przez użytkownika imię, możemy zrobić z niego komponent kontrolowany w następujący sposób:
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {value: ''};
+    this.state = { value: "" };
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   handleChange(event) {
-    this.setState({value: event.target.value});
+    this.setState({ value: event.target.value });
   }
 
   handleSubmit(event) {
-    alert('A name was submitted: ' + this.state.value);
+    alert("Podano następujące imię: " + this.state.value);
     event.preventDefault();
   }
 
@@ -55,20 +55,24 @@ class NameForm extends React.Component {
       <form onSubmit={this.handleSubmit}>
         <label>
           Name:
-          <input type="text" value={this.state.value} onChange={this.handleChange} />
+          <input
+            type="text"
+            value={this.state.value}
+            onChange={this.handleChange}
+          />
         </label>
-        <input type="submit" value="Submit" />
+        <input type="submit" value="Wyślij" />
       </form>
     );
   }
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
+[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
+Dzięki ustawieniu atrybutu `value` na elemencie formularza, wyświetlane dane zawsze będą odpowiadały `this.state.value`. Tym samym reaktowy stan jest tutaj źródłem prawdy. Ponieważ zaś `handleChange` aktualizuje reaktowy stan przy każdym wciśnięciu klawisza, wyświetlane dane aktualizują się na bieżąco w miarę wpisywania danych przez użytkownika.
 
-With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write `handleChange` as:
+W komponentach kontrolowanych każda zmiana stanu wynika z działania powiązanej z nim funkcji obsługującej (ang. _handler function_). Ułatwia to modyfikowanie i walidację podawanych przez użytkownika danych wejściowych. Jeśli chcemy na przykład, aby imiona pisane były w całości wielkimi literami nasza funkcja `handleChange` mogłaby wyglądać następująco:
 
 ```javascript{2}
 handleChange(event) {
@@ -76,24 +80,24 @@ handleChange(event) {
 }
 ```
 
-## The textarea Tag {#the-textarea-tag}
+## Znacznik _textarea_ {#the-textarea-tag}
 
-In HTML, a `<textarea>` element defines its text by its children:
+W HTML-u element `<textarea>` definiuje swój tekst poprzez elementy potomne:
 
 ```html
 <textarea>
-  Hello there, this is some text in a text area
+  Cześć, oto tekst w polu tekstowym
 </textarea>
 ```
 
-In React, a `<textarea>` uses a `value` attribute instead. This way, a form using a `<textarea>` can be written very similarly to a form that uses a single-line input:
+Natomiast w Reakcie `<textarea>` wykorzystuje w tym celu atrybut `value`. Dzięki temu kod formularza zawierającego `<textarea>` może być podobny do kodu formularza z jednoliniowym elementem _input_:
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: 'Please write an essay about your favorite DOM element.'
+      value: "Proszę napisać wypracowanie o swoim ulubionym elemencie DOM"
     };
 
     this.handleChange = this.handleChange.bind(this);
@@ -101,11 +105,11 @@ class EssayForm extends React.Component {
   }
 
   handleChange(event) {
-    this.setState({value: event.target.value});
+    this.setState({ value: event.target.value });
   }
 
   handleSubmit(event) {
-    alert('An essay was submitted: ' + this.state.value);
+    alert("Wysłano następujące wypracowanie: " + this.state.value);
     event.preventDefault();
   }
 
@@ -113,49 +117,49 @@ class EssayForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Essay:
+          Wypracowanie:
           <textarea value={this.state.value} onChange={this.handleChange} />
         </label>
-        <input type="submit" value="Submit" />
+        <input type="submit" value="Wyślij" />
       </form>
     );
   }
 }
 ```
 
-Notice that `this.state.value` is initialized in the constructor, so that the text area starts off with some text in it.
+Zwróć uwagę, że wartość `this.state.value` jest inicjalizowana w konstruktorze, tak aby pole tekstowe zawierało jakiś domyślny tekst.
 
-## The select Tag {#the-select-tag}
+## Znacznik _select_ {#the-select-tag}
 
-In HTML, `<select>` creates a drop-down list. For example, this HTML creates a drop-down list of flavors:
+W HTML-u element `<select>` tworzy rozwijaną listę. Dla przykładu poniższy kod HTML tworzy rozwijaną listę smaków:
 
 ```html
 <select>
-  <option value="grapefruit">Grapefruit</option>
-  <option value="lime">Lime</option>
-  <option selected value="coconut">Coconut</option>
+  <option value="grejpfrut">Grejpfrut</option>
+  <option value="limonka">Limonka</option>
+  <option selected value="orzechKoko">Orzech kokosowy</option>
   <option value="mango">Mango</option>
 </select>
 ```
 
-Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
+Zwróć uwagę na atrybut `selected`, który sprawia, że domyślnie wybraną opcją jest opcja "Orzech kokosowy". W Reakcie zamiast atrybutu `selected` używamy atrybutu `value` na głównym znaczniku `select`. W przypadku komponentów kontrolowanych jest to rozwiązanie dogodniejsze, ponieważ wartość tego atrybutu aktualizowana jest tylko w jednym miejscu:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {value: 'coconut'};
+    this.state = { value: "orzechKoko" };
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   handleChange(event) {
-    this.setState({value: event.target.value});
+    this.setState({ value: event.target.value });
   }
 
   handleSubmit(event) {
-    alert('Your favorite flavor is: ' + this.state.value);
+    alert("Twój ulubiony smak to: " + this.state.value);
     event.preventDefault();
   }
 
@@ -163,56 +167,56 @@ class FlavorForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Pick your favorite flavor:
+          Wybierz swój ulubiony smak:
           <select value={this.state.value} onChange={this.handleChange}>
-            <option value="grapefruit">Grapefruit</option>
-            <option value="lime">Lime</option>
-            <option value="coconut">Coconut</option>
+            <option value="grejpfrut">Grejpfrut</option>
+            <option value="limonka">Limonka</option>
+            <option value="orzechKoko">Orzech kokosowy</option>
             <option value="mango">Mango</option>
           </select>
         </label>
-        <input type="submit" value="Submit" />
+        <input type="submit" value="Wyślij" />
       </form>
     );
   }
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
+[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
+Ogólnie elementy `<input type="text">`, `<textarea>`, i `<select>` działają podobnie. Wszystkie przyjmują atrybut `value`, który można wykorzystać w komponentach kontrolowanych.
 
-> Note
->
-> You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag:
+> Wskazówka
 >
->```js
-><select multiple={true} value={['B', 'C']}>
->```
+> Wartością atrybutu `value` może być także tablica, daje to możliwość wyboru spośród wielu opcji w znaczniku `select`:
 
-## The file input Tag {#the-file-input-tag}
+> ```js
+> <select multiple={true} value={['B', 'C']}>
+> ```
 
-In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
+## Znacznik _file input_ {#the-file-input-tag}
+
+W HTML-u element `<input type="file">` pozwala użytkownikom wybrać jeden lub więcej plików z pamięci swojego urządzenia, które następnie mogą być wysłane do serwera lub przetworzone z użyciem kodu JavaScript poprzez [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
 
 ```html
 <input type="file" />
 ```
 
-Because its value is read-only, it is an **uncontrolled** component in React. It is discussed together with other uncontrolled components [later in the documentation](/docs/uncontrolled-components.html#the-file-input-tag).
+Ponieważ wartość tego elementu jest wartością przeznaczoną tylko do odczytu, w Reakcie jest to komponent **niekontrolowany**. Przedstawimy go wraz z innymi komponentami tego typu [w dalszej części dokumentacji](/docs/uncontrolled-components.html#the-file-input-tag).
 
-## Handling Multiple Inputs {#handling-multiple-inputs}
+## Obsługa wielu elementów `input` {#handling-multiple-inputs}
 
-When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let the handler function choose what to do based on the value of `event.target.name`.
+Kiedy zachodzi potrzeba obsługi wielu kontrolowanych elementów input, do każdego elementu można dodać atrybut `name` oraz pozwolić funkcji obsługującej (ang. _handler function_) zadecydować o dalszych krokach w zależności od wartości atrybutu `event.target.name`.
 
-For example:
+Przyjrzyjmy się następującemu przykładowi:
 
 ```javascript{15,18,28,37}
 class Reservation extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isGoing: true,
-      numberOfGuests: 2
+      wybieraSie: true,
+      liczbaGosci: 2
     };
 
     this.handleInputChange = this.handleInputChange.bind(this);
@@ -220,7 +224,7 @@ class Reservation extends React.Component {
 
   handleInputChange(event) {
     const target = event.target;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const value = target.type === "checkbox" ? target.checked : target.value;
     const name = target.name;
 
     this.setState({
@@ -232,21 +236,23 @@ class Reservation extends React.Component {
     return (
       <form>
         <label>
-          Is going:
+          Wybiera się:
           <input
-            name="isGoing"
+            name="wybieraSie"
             type="checkbox"
-            checked={this.state.isGoing}
-            onChange={this.handleInputChange} />
+            checked={this.state.wybieraSie}
+            onChange={this.handleInputChange}
+          />
         </label>
         <br />
         <label>
-          Number of guests:
+          Liczba gości:
           <input
-            name="numberOfGuests"
+            name="liczbaGosci"
             type="number"
-            value={this.state.numberOfGuests}
-            onChange={this.handleInputChange} />
+            value={this.state.liczbaGosci}
+            onChange={this.handleInputChange}
+          />
         </label>
       </form>
     );
@@ -254,9 +260,9 @@ class Reservation extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
+[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
 
-Note how we used the ES6 [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax to update the state key corresponding to the given input name:
+Zwróć uwagę na wykorzystaną przez nas składnię [obliczonych nazw właściwości](https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Object_initializer#Obliczone_nazwy_w%C5%82a%C5%9Bciwo%C5%9Bci) umożliwioną przez ES6. Pozwala ona na aktualizację klucza stanu odpowiadającego nazwie danego elementu `input`:
 
 ```js{2}
 this.setState({
@@ -264,7 +270,7 @@ this.setState({
 });
 ```
 
-It is equivalent to this ES5 code:
+W składni ES5 wyglądałoby to następująco:
 
 ```js{2}
 var partialState = {};
@@ -272,27 +278,26 @@ partialState[name] = value;
 this.setState(partialState);
 ```
 
-Also, since `setState()` automatically [merges a partial state into the current state](/docs/state-and-lifecycle.html#state-updates-are-merged), we only needed to call it with the changed parts.
+Ponadto ponieważ `setState()` automatycznie [włącza stan częściowy do stanu aktualnego](/docs/state-and-lifecycle.html#state-updates-are-merged), funkcja ta przywoływana jest tylko z nowo dostarczonymi danymi.
 
-## Controlled Input Null Value {#controlled-input-null-value}
+## Wartość Null w kontrolowanym elemencie `input` " {#controlled-input-null-value}
 
-Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`.
+Określenie wartości właściwości (ang. _prop_) [komponentu kontrolowanego](/docs/forms.html#controlled-components) zapobiega niepożądanym zmianom danych wejściowych przez użytkownika. Jeśli określiłeś `value`, a dane wejściowe w dalszym ciągu można edytować, sprawdź czy przez pomyłkę nie nadałeś atrybutowi `value` wartości `undefined` lub `null`.
 
-The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)
+Kod poniżej ilustruje ten problem. (Element `input` jest początkowo zablokowany, ale po krótkiej chwili jego zawartość można edytować.)
 
 ```javascript
-ReactDOM.render(<input value="hi" />, mountNode);
+ReactDOM.render(<input value="Cześć" />, mountNode);
 
 setTimeout(function() {
   ReactDOM.render(<input value={null} />, mountNode);
 }, 1000);
-
 ```
 
-## Alternatives to Controlled Components {#alternatives-to-controlled-components}
+## Inne rozwiązania {#alternatives-to-controlled-components}
 
-It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out [uncontrolled components](/docs/uncontrolled-components.html), an alternative technique for implementing input forms.
+Stosowanie kontrolowanych komponentów może być niekiedy uciążliwe, ponieważ wymaga nie tylko tworzenia funkcji obsługujących każdą możliwą zmianę twoich danych, lecz także przekazywania stanu elementu `input` poprzez komponent reaktowy. To z kolei może się stać wyjątkowo irytującym doświadczeniem, zwłaszcza gdy konwertujesz istniejący już kod na kod reaktowy lub kiedy integrujesz aplikację reaktową z biblioteką nie-reaktową. W tych sytuacjach warto abyś przyjrzał się [komponentom niekontrolowanym](/docs/uncontrolled-components.html), które stanowią aleternatywną technikę stosowania formularzy.
 
-## Fully-Fledged Solutions {#fully-fledged-solutions}
+## Rozwiązania całościowe {#fully-fledged-solutions}
 
-If you're looking for a complete solution including validation, keeping track of the visited fields, and handling form submission, [Formik](https://jaredpalmer.com/formik) is one of the popular choices. However, it is built on the same principles of controlled components and managing state — so don't neglect to learn them.
+Jeśli szukasz rozwiązania całościowego umożliwiającego walidację, śledzenie odwiedzonych pól oraz obsługę wysyłania danych, często wybieraną opcją jest [Formik](https://jaredpalmer.com/formik). Rozwiązanie to bazuje jednak na tych samych zasadach co komponenty kontrolowane i zarządzanie stanem. Dlatego ważne jest abyś przyswoił sobie te zasady.

From 0e945cb06f53d205530fe2e97db01cbee42a16b5 Mon Sep 17 00:00:00 2001
From: marcinostrouch <marcinostrouch@gmail.com>
Date: Wed, 20 Mar 2019 21:55:18 +0100
Subject: [PATCH 2/6] Minor corrections

---
 content/docs/forms.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index e7c765481..4771e098c 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -54,7 +54,7 @@ class NameForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Name:
+          Imię:
           <input
             type="text"
             value={this.state.value}
@@ -86,7 +86,7 @@ W HTML-u element `<textarea>` definiuje swój tekst poprzez elementy potomne:
 
 ```html
 <textarea>
-  Cześć, oto tekst w polu tekstowym
+  Cześć, oto przykład tekstu w polu tekstowym.
 </textarea>
 ```
 
@@ -206,7 +206,7 @@ Ponieważ wartość tego elementu jest wartością przeznaczoną tylko do odczyt
 
 ## Obsługa wielu elementów `input` {#handling-multiple-inputs}
 
-Kiedy zachodzi potrzeba obsługi wielu kontrolowanych elementów input, do każdego elementu można dodać atrybut `name` oraz pozwolić funkcji obsługującej (ang. _handler function_) zadecydować o dalszych krokach w zależności od wartości atrybutu `event.target.name`.
+Kiedy zachodzi potrzeba obsługi wielu kontrolowanych elementów `input`, do każdego elementu można dodać atrybut `name` oraz pozwolić funkcji obsługującej (ang. _handler function_) zadecydować o dalszych krokach w zależności od wartości atrybutu `event.target.name`.
 
 Przyjrzyjmy się następującemu przykładowi:
 

From 44054a922126ea52909fd564c5efbb7f4045e783 Mon Sep 17 00:00:00 2001
From: marcinostrouch <marcinostrouch@gmail.com>
Date: Thu, 21 Mar 2019 07:23:22 +0100
Subject: [PATCH 3/6] Fixing 'react' declension

---
 content/docs/forms.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 4771e098c..b8220e3d0 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -27,7 +27,7 @@ Powyższy formularz posiada domyślną funkcję automatycznego przekierowania pr
 
 W HTML-u, elementy formularza takie jak `<input>`, `<textarea>` i `<select>` najczęściej zachowują swój własny stan, który jest aktualizowany na podstawie danych wejściowych podawanych przez użytkownika. Natomiast w Reakcie zmienny stan komponentu jest zazwyczaj przechowywany we właściwości _state_ (pol. _stan_) danego komponentu. Jest on aktualizowany jedynie za pomocą funkcji [`setState()`](/docs/react-component.html#setstate).
 
-Możliwe jest łączenie tych dwóch rozwiązań poprzez ustanowienie reaktowego stanu jako "wyłącznego źródła prawdy". Wówczas reaktowy komponent renderujący dany formularz kontroluje również to co zachodzi wewnątrz danego formularza podczas podawania danych wejściowych przez użytkownika. Element _input_ formularza kontrolowany w ten sposób przez Reakta nazywamy "komponentem kontrolowanym"
+Możliwe jest łączenie tych dwóch rozwiązań poprzez ustanowienie reactowego stanu jako "wyłącznego źródła prawdy". Wówczas reactowy komponent renderujący dany formularz kontroluje również to co zachodzi wewnątrz danego formularza podczas podawania danych wejściowych przez użytkownika. Element _input_ formularza kontrolowany w ten sposób przez Reacta nazywamy "komponentem kontrolowanym"
 
 Gdybyśmy chcieli sprawić, aby podany wcześniej przykładowy formularz zapisywał przy wysłaniu podane przez użytkownika imię, możemy zrobić z niego komponent kontrolowany w następujący sposób:
 
@@ -70,7 +70,7 @@ class NameForm extends React.Component {
 
 [**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-Dzięki ustawieniu atrybutu `value` na elemencie formularza, wyświetlane dane zawsze będą odpowiadały `this.state.value`. Tym samym reaktowy stan jest tutaj źródłem prawdy. Ponieważ zaś `handleChange` aktualizuje reaktowy stan przy każdym wciśnięciu klawisza, wyświetlane dane aktualizują się na bieżąco w miarę wpisywania danych przez użytkownika.
+Dzięki ustawieniu atrybutu `value` na elemencie formularza, wyświetlane dane zawsze będą odpowiadały `this.state.value`. Tym samym reactowy stan jest tutaj źródłem prawdy. Ponieważ zaś `handleChange` aktualizuje reactowy stan przy każdym wciśnięciu klawisza, wyświetlane dane aktualizują się na bieżąco w miarę wpisywania danych przez użytkownika.
 
 W komponentach kontrolowanych każda zmiana stanu wynika z działania powiązanej z nim funkcji obsługującej (ang. _handler function_). Ułatwia to modyfikowanie i walidację podawanych przez użytkownika danych wejściowych. Jeśli chcemy na przykład, aby imiona pisane były w całości wielkimi literami nasza funkcja `handleChange` mogłaby wyglądać następująco:
 
@@ -296,7 +296,7 @@ setTimeout(function() {
 
 ## Inne rozwiązania {#alternatives-to-controlled-components}
 
-Stosowanie kontrolowanych komponentów może być niekiedy uciążliwe, ponieważ wymaga nie tylko tworzenia funkcji obsługujących każdą możliwą zmianę twoich danych, lecz także przekazywania stanu elementu `input` poprzez komponent reaktowy. To z kolei może się stać wyjątkowo irytującym doświadczeniem, zwłaszcza gdy konwertujesz istniejący już kod na kod reaktowy lub kiedy integrujesz aplikację reaktową z biblioteką nie-reaktową. W tych sytuacjach warto abyś przyjrzał się [komponentom niekontrolowanym](/docs/uncontrolled-components.html), które stanowią aleternatywną technikę stosowania formularzy.
+Stosowanie kontrolowanych komponentów może być niekiedy uciążliwe, ponieważ wymaga nie tylko tworzenia funkcji obsługujących każdą możliwą zmianę twoich danych, lecz także przekazywania stanu elementu `input` poprzez komponent reactowy. To z kolei może się stać wyjątkowo irytującym doświadczeniem, zwłaszcza gdy konwertujesz istniejący już kod na kod reactowy lub kiedy integrujesz aplikację reactową z biblioteką nie-reactową. W tych sytuacjach warto abyś przyjrzał się [komponentom niekontrolowanym](/docs/uncontrolled-components.html), które stanowią aleternatywną technikę stosowania formularzy.
 
 ## Rozwiązania całościowe {#fully-fledged-solutions}
 

From 6ae18e420d82bc3f3b52f8227465927a5378624a Mon Sep 17 00:00:00 2001
From: marcinostrouch <marcinostrouch@gmail.com>
Date: Thu, 21 Mar 2019 07:29:43 +0100
Subject: [PATCH 4/6] Fixing spaces and double quotes

---
 content/docs/forms.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index b8220e3d0..090983383 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -35,18 +35,18 @@ Gdybyśmy chcieli sprawić, aby podany wcześniej przykładowy formularz zapisyw
 class NameForm extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { value: "" };
+    this.state = {value: ''};
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   handleChange(event) {
-    this.setState({ value: event.target.value });
+    this.setState({value: event.target.value});
   }
 
   handleSubmit(event) {
-    alert("Podano następujące imię: " + this.state.value);
+    alert('Podano następujące imię: ' + this.state.value);
     event.preventDefault();
   }
 
@@ -97,7 +97,7 @@ class EssayForm extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: "Proszę napisać wypracowanie o swoim ulubionym elemencie DOM"
+      value: 'Proszę napisać wypracowanie o swoim ulubionym elemencie DOM'
     };
 
     this.handleChange = this.handleChange.bind(this);
@@ -105,11 +105,11 @@ class EssayForm extends React.Component {
   }
 
   handleChange(event) {
-    this.setState({ value: event.target.value });
+    this.setState({value: event.target.value});
   }
 
   handleSubmit(event) {
-    alert("Wysłano następujące wypracowanie: " + this.state.value);
+    alert('Wysłano następujące wypracowanie: ' + this.state.value);
     event.preventDefault();
   }
 
@@ -148,18 +148,18 @@ Zwróć uwagę na atrybut `selected`, który sprawia, że domyślnie wybraną op
 class FlavorForm extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { value: "orzechKoko" };
+    this.state = {value: "orzechKoko"};
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   handleChange(event) {
-    this.setState({ value: event.target.value });
+    this.setState({value: event.target.value});
   }
 
   handleSubmit(event) {
-    alert("Twój ulubiony smak to: " + this.state.value);
+    alert('Twój ulubiony smak to: ' + this.state.value);
     event.preventDefault();
   }
 

From 1dd5374c98e2aad63a64ddd304ef52a09ca5b195 Mon Sep 17 00:00:00 2001
From: marcinostrouch <marcinostrouch@gmail.com>
Date: Thu, 21 Mar 2019 15:17:45 +0100
Subject: [PATCH 5/6] Adding translation of conditional-rendering

---
 content/docs/conditional-rendering.md | 80 ++++++++++++++-------------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 7df19bb98..a334dfb21 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -1,6 +1,6 @@
 ---
 id: conditional-rendering
-title: Conditional Rendering
+title: Renderowanie warunkowe
 permalink: docs/conditional-rendering.html
 prev: handling-events.html
 next: lists-and-keys.html
@@ -8,23 +8,23 @@ redirect_from:
   - "tips/false-in-jsx.html"
 ---
 
-In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
+React umożliwia tworzenie odrębnych komponentów, które hermetyzują (ang. *encapsulate*) pożądane przez ciebie metody. Następnie zrenderowane mogą być wybrane komponenty, w zależności od stanu twojej aplikacji.
 
-Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
+Renderowanie warunkowe działa w Reakcie tak samo jak warunki JavaScriptowe. Aby stworzyć elementy odzwierciedlające aktualny stan aplikacji, należy użyć operatora takiego jak [if](https://developer.mozilla.org/pl/docs/Learn/Getting_started_with_the_web/JavaScript_basics#Warunki) lub [operatora warunkowego](https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_warunkowy) oraz pozwolić Reactowi je dopasować poprzez aktualizację interfejsu użytkownika.
 
-Consider these two components:
+Rozważmy następujące dwa komponenty:
 
 ```js
 function UserGreeting(props) {
-  return <h1>Welcome back!</h1>;
+  return <h1>Witamy ponownie!</h1>;
 }
 
 function GuestGreeting(props) {
-  return <h1>Please sign up.</h1>;
+  return <h1>Proszę się zapisać.</h1>;
 }
 ```
 
-We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in:
+Stworzymy komponent `Greeting` (ang. *Powitanie*), który wyświetlał będzie jeden lub drugi z powyższych komponentów w zależności od tego czy użytkownik jest zalogowany.
 
 ```javascript{3-7,11,12}
 function Greeting(props) {
@@ -42,21 +42,21 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
+[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
 
-This example renders a different greeting depending on the value of `isLoggedIn` prop.
+ Powitanie renderowane przez kod w powyższym przykładzie zależy of wartości właściwości `isLoggedIn`.
 
-### Element Variables {#element-variables}
+### Zmienne elementowe {#element-variables}
 
-You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
+Elementy mogą być przechowywane w zmiennych. Pozwala to na warunkowe renderowanie określonej części, komponentu podczas gdy pozostałe dane wyjściowe nie ulegają zmianie.
 
-Consider these two new components representing Logout and Login buttons:
+Przyjrzyjmy się dwóm nowym komponentom tworzącym przyciski logowania Zaloguj się (ang. *Login*) oraz Wyloguj się (ang. *Logout*):
 
 ```js
 function LoginButton(props) {
   return (
     <button onClick={props.onClick}>
-      Login
+      Zaloguj się
     </button>
   );
 }
@@ -64,15 +64,16 @@ function LoginButton(props) {
 function LogoutButton(props) {
   return (
     <button onClick={props.onClick}>
-      Logout
+      Wyloguj się
     </button>
   );
 }
 ```
 
-In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`.
+W przykładzie poniżej zbudujemy [komponent ze stanem](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) o nazwie `LoginControl` (pol. *kontrola logowania*)
+
+W zależności od aktualnego stanu będzie on renderował przycisk logowania (`<LoginButton />`) lub wylogowania `<LogoutButton />` . Będzie on również renderował komponent `<Greeting />` z poprzedniego przykładu:
 
-It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
 
 ```javascript{20-25,29,30}
 class LoginControl extends React.Component {
@@ -116,23 +117,24 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
+[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
+
+Deklarowanie zmiennej oraz stosowanie warunku `if` to dobry sposób na warunkowe renderowanie komponentu. Czasem jednak przydaje się nieco krótsza składnia. JSX umożliwia kilka różnych opcji warunków wewnątrz liniowych. Przedstawiamy je poniżej.
 
-While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.
 
-### Inline If with Logical && Operator {#inline-if-with-logical--operator}
+### Wewnątrz liniowy warunek `if` z użyciem logicznego operatora `&&` {#inline-if-with-logical--operator}
 
-You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element:
+JSX umożliwia stosowanie w nawiasach klamrowych [wszelkich wyrażeń](/docs/introducing-jsx.html#embedding-expressions-in-jsx), łącznie z JavaScriptowym operatorem logicznym `&&`. Jest to przydatne do warunkowego załączania elementu.
 
 ```js{6-10}
 function Mailbox(props) {
   const unreadMessages = props.unreadMessages;
   return (
     <div>
-      <h1>Hello!</h1>
+      <h1>Cześć!</h1>
       {unreadMessages.length > 0 &&
         <h2>
-          You have {unreadMessages.length} unread messages.
+          Masz {unreadMessages.length} nieprzeczytanych wiadomości.
         </h2>
       }
     </div>
@@ -146,30 +148,30 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
+[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
 
-It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
+Powyższy kod działa ponieważ w JavaScripcie `true && wyrażenie` zawsze jest ewaluowane jako `wyrażenie`, natomiast `false && wyrażenie` jako `false`.
 
-Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it.
+Zatem jeśli warunek jest `true`, element następujący bezpośrednio po `&&` zostanie ukazany w danych wyjściowych. Natomiast jeśli warunek jest `fałszywy`, React zignoruje go i pominie przy renderowaniu.
 
-### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator}
+### Warunek if-else z operatorem warunkowym {#inline-if-else-with-conditional-operator}
 
-Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
+Kolejną metodą renderowania warunkowego wewnątrz liniowego jest stosowanie JavaScriptowego operatora warunkowego [`warunek ? true : false`](https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_warunkowy).
 
-In the example below, we use it to conditionally render a small block of text.
+W przykładzie poniżej używamy go, aby warunkowo zrenderować mały blok tekstu.
 
 ```javascript{5}
 render() {
   const isLoggedIn = this.state.isLoggedIn;
   return (
     <div>
-      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
+      Użytkownik jest teraz <b>{isLoggedIn ? 'zalogowany' : 'niezalogowany'}</b>.
     </div>
   );
 }
 ```
 
-It can also be used for larger expressions although it is less obvious what's going on:
+Rozwiązanie to może być stosowane również w przypadku dłuższych wyrażeń:
 
 ```js{5,7,9}
 render() {
@@ -185,14 +187,16 @@ render() {
   );
 }
 ```
+Czytelność takich wyrażeń jest oczywiście nieco mniejsza. Podobnie jak w JavaScripcie, wybór odpowiedniego stylu zależy od preferencji twoich i twojego zespołu. Jednocześnie należy pamiętać, że kiedy warunki stają się nazbyt złożone, dobrze jest roważyć możliwość [stworzenia osobnego komponentu](/docs/components-and-props.html#extracting-components)
+
+
+### Zapobieganie renderowaniu komponentu {#preventing-component-from-rendering}
 
-Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+W sporadycznych przypadkach, może zachodzić potrzeba ukrycia się komponentu mimo, iż został on zrenderowany przez inny komponent. Aby to umożliwić należy zastosować wartość `null` zamiast jego renderowanych danych wyjściowych.
 
-### Preventing Component from Rendering {#preventing-component-from-rendering}
 
-In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output.
+W przykładzie poniżej, renderowanie baneru ostrzegawczego `<WarningBanner />` jest uzależnione od wartości właściwości o nazwie `warn` (ang. *ostrzeż*). Jeśli wartość tej właściwości jest `false`, wówczas komponent ten nie jest renderowany.
 
-In the example below, the `<WarningBanner />` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render:
 
 ```javascript{2-4,29}
 function WarningBanner(props) {
@@ -202,7 +206,7 @@ function WarningBanner(props) {
 
   return (
     <div className="warning">
-      Warning!
+      Ostrzeżenie!
     </div>
   );
 }
@@ -225,7 +229,7 @@ class Page extends React.Component {
       <div>
         <WarningBanner warn={this.state.showWarning} />
         <button onClick={this.handleToggleClick}>
-          {this.state.showWarning ? 'Hide' : 'Show'}
+          {this.state.showWarning ? 'Ukryj' : 'Pokaż'}
         </button>
       </div>
     );
@@ -238,6 +242,6 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
+[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
 
-Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called.
+Zwrócenie wartości `null` z metody `render` danego komponentu nie ma wpływu na wywoływanie metod cyklu życia tego komponentu. To znaczy, że np. metoda `componentDidUpdate` w dalszym ciągu zostanie wywołana.
\ No newline at end of file

From 41380cfd2c8511f1a62069b972505468bb51fa17 Mon Sep 17 00:00:00 2001
From: marcinostrouch <marcinostrouch@gmail.com>
Date: Mon, 25 Mar 2019 17:17:25 +0100
Subject: [PATCH 6/6] Adding Jakub's corrections

---
 content/docs/forms.md | 56 +++++++++++++++++++++----------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 090983383..3c80338bd 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-W Reakcie elementy formularza HTML działają trochę inaczej niż pozostałe elementy DOM. Wynika to stąd, że elementy formularza same utrzymują swój wewnętrzny stan. Dla przykładu przyjrzyjmy się zwykłemu formularzowi HTML przyjmującemu pojedyncze imię:
+W Reakcie elementy formularza HTML działają trochę inaczej niż pozostałe elementy DOM. Wynika to stąd, że elementy formularza same utrzymują swój wewnętrzny stan. Dla przykładu przyjrzyjmy się zwykłemu formularzowi HTML z jedną wartością - imieniem:
 
 ```html
 <form>
@@ -21,15 +21,15 @@ W Reakcie elementy formularza HTML działają trochę inaczej niż pozostałe el
 </form>
 ```
 
-Powyższy formularz posiada domyślną funkcję automatycznego przekierowania przeglądarki do nowej strony po wysłaniu formularza przez użytkownika. Jeśli zależy ci na tej funkcjonalności, to działa ona również w Reakcie. Jednak w większości przypadków dobrze jest mieć funkcję JavaScriptową, która obsługuje wysyłanie formularza i ma dostęp do podanych przez użytkownika danych. Standardem stała się obsługa formularzy poprzez tzw. "komponentny kontrolowane".
+Powyższy formularz posiada domyślną funkcję automatycznego przekierowania przeglądarki do nowej strony po wysłaniu formularza przez użytkownika. Jeśli zależy ci na tej funkcjonalności, to działa ona również w Reakcie. Jednak w większości przypadków dobrze jest mieć funkcję javascriptową, która obsługuje wysyłanie formularza i ma dostęp do podanych przez użytkownika danych. Standardem stała się obsługa formularzy poprzez tzw. "komponenty kontrolowane".
 
 ## Komponenty kontrolowane {#controlled-components}
 
-W HTML-u, elementy formularza takie jak `<input>`, `<textarea>` i `<select>` najczęściej zachowują swój własny stan, który jest aktualizowany na podstawie danych wejściowych podawanych przez użytkownika. Natomiast w Reakcie zmienny stan komponentu jest zazwyczaj przechowywany we właściwości _state_ (pol. _stan_) danego komponentu. Jest on aktualizowany jedynie za pomocą funkcji [`setState()`](/docs/react-component.html#setstate).
+W HTML-u, elementy formularza takie jak `<input>`, `<textarea>` i `<select>` najczęściej zachowują swój własny stan, który jest aktualizowany na podstawie danych wejściowych podawanych przez użytkownika. Natomiast w Reakcie zmienny stan komponentu jest zazwyczaj przechowywany we właściwości `state` (pol. *stan*) danego komponentu. Jest on aktualizowany jedynie za pomocą funkcji [`setState()`](/docs/react-component.html#setstate).
 
-Możliwe jest łączenie tych dwóch rozwiązań poprzez ustanowienie reactowego stanu jako "wyłącznego źródła prawdy". Wówczas reactowy komponent renderujący dany formularz kontroluje również to co zachodzi wewnątrz danego formularza podczas podawania danych wejściowych przez użytkownika. Element _input_ formularza kontrolowany w ten sposób przez Reacta nazywamy "komponentem kontrolowanym"
+Możliwe jest łączenie tych dwóch rozwiązań poprzez ustanowienie reactowego stanu jako "wyłącznego źródła prawdy". Wówczas reactowy komponent renderujący dany formularz kontroluje również to, co zachodzi wewnątrz niego podczas wypełniania pól przez użytkownika. Element `input` formularza, kontrolowany w ten sposób przez Reacta, nazywamy "komponentem kontrolowanym"
 
-Gdybyśmy chcieli sprawić, aby podany wcześniej przykładowy formularz zapisywał przy wysłaniu podane przez użytkownika imię, możemy zrobić z niego komponent kontrolowany w następujący sposób:
+Gdybyśmy chcieli sprawić, aby podany wcześniej przykładowy formularz wyświetlał przy wysłaniu podane przez użytkownika imię, możemy zrobić z niego komponent kontrolowany w następujący sposób:
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {
@@ -70,9 +70,9 @@ class NameForm extends React.Component {
 
 [**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-Dzięki ustawieniu atrybutu `value` na elemencie formularza, wyświetlane dane zawsze będą odpowiadały `this.state.value`. Tym samym reactowy stan jest tutaj źródłem prawdy. Ponieważ zaś `handleChange` aktualizuje reactowy stan przy każdym wciśnięciu klawisza, wyświetlane dane aktualizują się na bieżąco w miarę wpisywania danych przez użytkownika.
+Dzięki ustawieniu atrybutu `value` na elemencie formularza, wyświetlane dane zawsze będą odpowiadały `this.state.value`. Tym samym reactowy stan jest tutaj źródłem prawdy. Ponieważ zaś `handleChange` aktualizuje reactowy stan przy każdym wciśnięciu klawisza, wyświetlane dane aktualizują się na bieżąco w miarę wpisywania ich przez użytkownika.
 
-W komponentach kontrolowanych każda zmiana stanu wynika z działania powiązanej z nim funkcji obsługującej (ang. _handler function_). Ułatwia to modyfikowanie i walidację podawanych przez użytkownika danych wejściowych. Jeśli chcemy na przykład, aby imiona pisane były w całości wielkimi literami nasza funkcja `handleChange` mogłaby wyglądać następująco:
+W komponentach kontrolowanych każda zmiana stanu wynika z działania powiązanej z nim funkcji obsługującej (ang. *handler function*). Ułatwia to modyfikowanie i walidację podawanych przez użytkownika danych wejściowych. Jeśli chcemy na przykład, aby imiona pisane były w całości wielkimi literami, nasza funkcja `handleChange` mogłaby wyglądać następująco:
 
 ```javascript{2}
 handleChange(event) {
@@ -80,7 +80,7 @@ handleChange(event) {
 }
 ```
 
-## Znacznik _textarea_ {#the-textarea-tag}
+## Znacznik *textarea* {#the-textarea-tag}
 
 W HTML-u element `<textarea>` definiuje swój tekst poprzez elementy potomne:
 
@@ -90,7 +90,7 @@ W HTML-u element `<textarea>` definiuje swój tekst poprzez elementy potomne:
 </textarea>
 ```
 
-Natomiast w Reakcie `<textarea>` wykorzystuje w tym celu atrybut `value`. Dzięki temu kod formularza zawierającego `<textarea>` może być podobny do kodu formularza z jednoliniowym elementem _input_:
+Natomiast w Reakcie `<textarea>` wykorzystuje w tym celu atrybut `value`. Dzięki temu kod formularza zawierającego `<textarea>` może być podobny do kodu formularza z jednoliniowym elementem `input`:
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
@@ -129,26 +129,26 @@ class EssayForm extends React.Component {
 
 Zwróć uwagę, że wartość `this.state.value` jest inicjalizowana w konstruktorze, tak aby pole tekstowe zawierało jakiś domyślny tekst.
 
-## Znacznik _select_ {#the-select-tag}
+## Znacznik `select` {#the-select-tag}
 
 W HTML-u element `<select>` tworzy rozwijaną listę. Dla przykładu poniższy kod HTML tworzy rozwijaną listę smaków:
 
 ```html
 <select>
-  <option value="grejpfrut">Grejpfrut</option>
-  <option value="limonka">Limonka</option>
-  <option selected value="orzechKoko">Orzech kokosowy</option>
+  <option value="grejpfrutowy">Grejpfrutowy</option>
+  <option value="limonkowy">Limonkowy</option>
+  <option selected value="kokosowy">Kokosowy</option>
   <option value="mango">Mango</option>
 </select>
 ```
 
-Zwróć uwagę na atrybut `selected`, który sprawia, że domyślnie wybraną opcją jest opcja "Orzech kokosowy". W Reakcie zamiast atrybutu `selected` używamy atrybutu `value` na głównym znaczniku `select`. W przypadku komponentów kontrolowanych jest to rozwiązanie dogodniejsze, ponieważ wartość tego atrybutu aktualizowana jest tylko w jednym miejscu:
+Zwróć uwagę na atrybut `selected`, który sprawia, że opcją wybraną domyślnie jest opcja "Kokosowy". W Reakcie zamiast atrybutu `selected` używamy atrybutu `value` na głównym znaczniku `select`. W przypadku komponentów kontrolowanych jest to rozwiązanie bardziej dogodne, ponieważ wartość tego atrybutu aktualizowana jest tylko w jednym miejscu:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {value: "orzechKoko"};
+    this.state = {value: "kokosowy"};
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -169,9 +169,9 @@ class FlavorForm extends React.Component {
         <label>
           Wybierz swój ulubiony smak:
           <select value={this.state.value} onChange={this.handleChange}>
-            <option value="grejpfrut">Grejpfrut</option>
-            <option value="limonka">Limonka</option>
-            <option value="orzechKoko">Orzech kokosowy</option>
+            <option value="grejpfrutowy">Grejpfrutowy</option>
+            <option value="limonkowy">Limonkowy</option>
+            <option value="kokosowy">Kokosowy</option>
             <option value="mango">Mango</option>
           </select>
         </label>
@@ -188,15 +188,15 @@ Ogólnie elementy `<input type="text">`, `<textarea>`, i `<select>` działają p
 
 > Wskazówka
 >
-> Wartością atrybutu `value` może być także tablica, daje to możliwość wyboru spośród wielu opcji w znaczniku `select`:
-
+> Wartością atrybutu `value` może być także tablica. Daje to możliwość wyboru spośród wielu opcji w znaczniku `select`:
+>
 > ```js
 > <select multiple={true} value={['B', 'C']}>
 > ```
 
-## Znacznik _file input_ {#the-file-input-tag}
+## Znacznik `input` dla plików {#the-file-input-tag}
 
-W HTML-u element `<input type="file">` pozwala użytkownikom wybrać jeden lub więcej plików z pamięci swojego urządzenia, które następnie mogą być wysłane do serwera lub przetworzone z użyciem kodu JavaScript poprzez [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
+W HTML-u element `<input type="file">` pozwala użytkownikom wybrać jeden lub więcej plików z pamięci swojego urządzenia, które następnie mogą być wysłane do serwera lub przetworzone z użyciem kodu JavaScript poprzez [interfejs klasy `File`](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
 
 ```html
 <input type="file" />
@@ -206,7 +206,7 @@ Ponieważ wartość tego elementu jest wartością przeznaczoną tylko do odczyt
 
 ## Obsługa wielu elementów `input` {#handling-multiple-inputs}
 
-Kiedy zachodzi potrzeba obsługi wielu kontrolowanych elementów `input`, do każdego elementu można dodać atrybut `name` oraz pozwolić funkcji obsługującej (ang. _handler function_) zadecydować o dalszych krokach w zależności od wartości atrybutu `event.target.name`.
+Kiedy zachodzi potrzeba obsługi wielu kontrolowanych elementów `input`, do każdego elementu można dodać atrybut `name` oraz pozwolić funkcji obsługującej (ang. *handler function*) zadecydować o dalszych krokach w zależności od wartości atrybutu `event.target.name`.
 
 Przyjrzyjmy się następującemu przykładowi:
 
@@ -278,11 +278,11 @@ partialState[name] = value;
 this.setState(partialState);
 ```
 
-Ponadto ponieważ `setState()` automatycznie [włącza stan częściowy do stanu aktualnego](/docs/state-and-lifecycle.html#state-updates-are-merged), funkcja ta przywoływana jest tylko z nowo dostarczonymi danymi.
+Ponadto ponieważ `setState()` automatycznie [scala podany stan częściowy ze stanem aktualnym](/docs/state-and-lifecycle.html#state-updates-are-merged), funkcja ta wywoływana jest tylko z nowo dostarczonymi danymi.
 
-## Wartość Null w kontrolowanym elemencie `input` " {#controlled-input-null-value}
+## Wartość `null` w kontrolowanym elemencie `input` " {#controlled-input-null-value}
 
-Określenie wartości właściwości (ang. _prop_) [komponentu kontrolowanego](/docs/forms.html#controlled-components) zapobiega niepożądanym zmianom danych wejściowych przez użytkownika. Jeśli określiłeś `value`, a dane wejściowe w dalszym ciągu można edytować, sprawdź czy przez pomyłkę nie nadałeś atrybutowi `value` wartości `undefined` lub `null`.
+Określenie wartości właściwości (ang. *prop*) [komponentu kontrolowanego](/docs/forms.html#controlled-components) zapobiega niepożądanym zmianom danych wejściowych przez użytkownika. Jeśli określisz wartość dla `value`, a dane wejściowe w dalszym ciągu będzie można edytować, sprawdź, czy przez pomyłkę nie przekazujesz wartości `undefined` lub `null`.
 
 Kod poniżej ilustruje ten problem. (Element `input` jest początkowo zablokowany, ale po krótkiej chwili jego zawartość można edytować.)
 
@@ -296,8 +296,8 @@ setTimeout(function() {
 
 ## Inne rozwiązania {#alternatives-to-controlled-components}
 
-Stosowanie kontrolowanych komponentów może być niekiedy uciążliwe, ponieważ wymaga nie tylko tworzenia funkcji obsługujących każdą możliwą zmianę twoich danych, lecz także przekazywania stanu elementu `input` poprzez komponent reactowy. To z kolei może się stać wyjątkowo irytującym doświadczeniem, zwłaszcza gdy konwertujesz istniejący już kod na kod reactowy lub kiedy integrujesz aplikację reactową z biblioteką nie-reactową. W tych sytuacjach warto abyś przyjrzał się [komponentom niekontrolowanym](/docs/uncontrolled-components.html), które stanowią aleternatywną technikę stosowania formularzy.
+Stosowanie kontrolowanych komponentów może być niekiedy uciążliwe, ponieważ wymaga nie tylko tworzenia funkcji obsługujących każdą możliwą zmianę twoich danych, lecz także przekazywania stanu elementu `input` poprzez komponent reactowy. To z kolei może się stać wyjątkowo irytującym doświadczeniem, zwłaszcza gdy konwertujesz istniejący już kod na kod reactowy lub kiedy integrujesz aplikację reactową z biblioteką nie-reactową. W tych sytuacjach warto abyś przyjrzał się [komponentom niekontrolowanym](/docs/uncontrolled-components.html), które stanowią alternatywną technikę stosowania formularzy.
 
 ## Rozwiązania całościowe {#fully-fledged-solutions}
 
-Jeśli szukasz rozwiązania całościowego umożliwiającego walidację, śledzenie odwiedzonych pól oraz obsługę wysyłania danych, często wybieraną opcją jest [Formik](https://jaredpalmer.com/formik). Rozwiązanie to bazuje jednak na tych samych zasadach co komponenty kontrolowane i zarządzanie stanem. Dlatego ważne jest abyś przyswoił sobie te zasady.
+Jeśli szukasz rozwiązania kompleksowego umożliwiającego walidację, śledzenie odwiedzonych pól oraz obsługę wysyłania danych, często wybieraną opcją jest [biblioteka Formik](https://jaredpalmer.com/formik). Rozwiązanie to bazuje jednak na tych samych zasadach co komponenty kontrolowane i zarządzanie stanem. Dlatego bardzo ważne jest, abyś przyswoił sobie te zasady.