From c5a493632cd0e4d059bc1a16df2f68bb6f54e20b Mon Sep 17 00:00:00 2001
From: Piotr Szymanski <cvqprs@gmail.com>
Date: Mon, 4 Mar 2019 19:02:28 +0400
Subject: [PATCH 1/7] New PR for introducing-jsx (previous translation
 included)

---
 content/docs/introducing-jsx.md | 178 +++++++++++++++++++++-----------
 1 file changed, 115 insertions(+), 63 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 1b059927a..dcc199a0d 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -1,40 +1,57 @@
 ---
 id: introducing-jsx
-title: Introducing JSX
+title: Wprowadzenie do JSX
 permalink: docs/introducing-jsx.html
 prev: hello-world.html
 next: rendering-elements.html
 ---
 
-Consider this variable declaration:
+Weźmy na warsztat poniższą instrukcję przypisania:
 
 ```js
-const element = <h1>Hello, world!</h1>;
+const element = <h1>Witaj, świecie!</h1>;
 ```
 
-This funny tag syntax is neither a string nor HTML.
+Nieco zaskakującą może się tutaj wydawać przypisywana wartość, która nie jest ani typowym łańcuchem znaków, ani HTML-em.
 
-It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
+Taką składnię nazywamy JSX i jest to rozszerzenie składni JavaScriptu 
+o możliwość wstawiania znaczników. Zalecamy używanie jej wraz z Reactem do opisywania,
+jak powinien wyglądać interfejs graficzny strony.
+JSX może przypominać język oparty o szablony, jednakże daje on do dyspozycji
+pełnię możliwości JavaScriptu.
 
-JSX produces React "elements". We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
+JSX jest tłumaczony jeden do jednego na reactowe "elementy". Sposoby ich
+wyświetlania na stronie poznamy w [następnym podrozdziale](/docs/rendering-elements.html).
+Poniżej znajdziesz podstawy składni JSX, które pozwolą ci szybko zacząć tworzyć kod.
 
-### Why JSX? {#why-jsx}
 
-React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
+### Dlaczego JSX? {#why-jsx}
 
-Instead of artificially separating *technologies* by putting markup and logic in separate files, React [separates *concerns*](https://en.wikipedia.org/wiki/Separation_of_concerns) with loosely coupled units called "components" that contain both. We will come back to components in a [further section](/docs/components-and-props.html), but if you're not yet comfortable putting markup in JS, [this talk](https://www.youtube.com/watch?v=x7cQ3mrcKaY) might convince you otherwise.
+React godzi się z faktem, że logika związana z prezentacją danych jest z natury 
+rzeczy powiązana z innymi elementami logiki biznesowej UI: sposobami przetwarzania
+zdarzeń w aplikacji, tym, jak stan aplikacji zmienia się w czasie, jak również tym,
+jak dane są przygotowywane do wyświetlenia. 
 
-React [doesn't require](/docs/react-without-jsx.html) using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
+Zamiast sztucznie rozdzielać *technologie*, umiejscowiając znaczniki oraz logikę 
+aplikacji w osobnych plikach, React wprowadza [podział odpowiedzialności](https://pl.wikipedia.org/wiki/Zasada_jednej_odpowiedzialno%C5%9Bci) 
+poprzez wprowadzenie luźno powiązanych jednostek, nazywanych "komponentami", które
+zawierają zarówno znaczniki HTML, jak i związaną z nimi logikę.
 
-With that out of the way, let's get started!
+React [nie wymaga](/docs/react-without-jsx.html) używania JSX, jednakże większość
+programistów uważa go za przydatne narzędzie unaoczniające to, co dzieje się w kodzie
+javascriptowym operującym na interfejsach graficznych. Pomaga on również Reactowi 
+wyświetlać bardziej użyteczne informacje o błędach i ostrzeżenia. 
 
-### Embedding Expressions in JSX {#embedding-expressions-in-jsx}
+Pora sprawdzić, jak to działa - do dzieła!
 
-In the example below, we declare a variable called `name` and then use it inside JSX by wrapping it in curly braces:
+### Osadzanie wyrażeń w JSX {#embedding-expressions-in-jsx}
+
+W poniższym przykładzie deklarujemy zmienną `imie`, a następnie używamy jej 
+wewnątrz JSX, po prostu otaczając ją nawiasami klamrowymi:
 
 ```js{1,2}
-const name = 'Josh Perez';
-const element = <h1>Hello, {name}</h1>;
+const imie = 'Gracjan';
+const element = <h1>Witaj, {imie}</h1>;
 
 ReactDOM.render(
   element,
@@ -42,23 +59,28 @@ ReactDOM.render(
 );
 ```
 
-You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) inside the curly braces in JSX. For example, `2 + 2`, `user.firstName`, or `formatName(user)` are all valid JavaScript expressions.
+Zauważ, że dowolne [wyrażenie JavaScriptowe (ang.)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)
+możesz osadzić w JSX poprzez otoczenie go klamrami. Przykładowo, możesz użyć 
+`2 + 2`, `uzytkownik.imie` czy `pokoloruj(uzytkownik)`, jako że są to prawidłowe
+wyrażenia w języku JavaScript. 
+
+W poniższym przykładzie umiejscawiamy wynik wywołania funkcji javascriptowej 
+`formatuj(uzytkownik)` wewnątrz znacznika `<h1>`:
 
-In the example below, we embed the result of calling a JavaScript function, `formatName(user)`, into an `<h1>` element.
 
 ```js{12}
-function formatName(user) {
-  return user.firstName + ' ' + user.lastName;
+function formatuj(uzytkownik) {
+  return uzytkownik.imie + ' ' + uzytkownik.nazwisko;
 }
 
-const user = {
-  firstName: 'Harper',
-  lastName: 'Perez'
+const uzytkownik = {
+  imie: 'Gracjan',
+  nazwisko: 'Brzęczyszczykiewicz',
 };
 
 const element = (
   <h1>
-    Hello, {formatName(user)}!
+    Witaj, {formatuj(uzytkownik)}!
   </h1>
 );
 
@@ -70,86 +92,107 @@ ReactDOM.render(
 
 [](codepen://introducing-jsx)
 
-We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](https://stackoverflow.com/q/2846283).
+Dla czytelności, podzieliliśmy kod JSX na kilka linii. Nie jest to wprawdzie 
+wymagane, ale polecamy również otaczanie go w nawiasy. Pozwoli to uniknąć pułapek
+związanych z [automatycznym wstawianiem średników (ang.)](http://stackoverflow.com/q/2846283) w JavaScripcie.
 
-### JSX is an Expression Too {#jsx-is-an-expression-too}
+### JSX również jest wyrażeniem {#jsx-is-an-expression-too}
 
-After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
+Po kompilacji, wyrażenia JSX-owe stają się zwykłymi wywołaniami funkcji w JavaScripcie
+i są ewaluowane do obiektów JavaScriptowych.
 
-This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions:
+Oznacza to, że możesz używać znaczników JSX również wewnątrz instrukcji warunkowych `if`,
+pętli `for`, przypisywać je do zmiennych, oczekiwać przekazania jako argumenty
+do funkcji, zwracać z funkcji i w wielu innych miejscach.
 
-```js{3,5}
-function getGreeting(user) {
-  if (user) {
-    return <h1>Hello, {formatName(user)}!</h1>;
+```js
+function pobierzPowitanie(uzytkownik) {
+  if (uzytkownik) {
+    return <h1>Witaj, {formatuj(uzytkownik)}!</h1>;
   }
-  return <h1>Hello, Stranger.</h1>;
+  return <h1>Witaj, nieznajomy.</h1>;
 }
 ```
 
-### Specifying Attributes with JSX {#specifying-attributes-with-jsx}
+### Podawanie atrybutów w JSX {#specifying-attributes-with-jsx}
 
-You may use quotes to specify string literals as attributes:
+Możesz przekazać literał znakowy jako atrybut, używając poniższej składni:
 
 ```js
 const element = <div tabIndex="0"></div>;
 ```
 
-You may also use curly braces to embed a JavaScript expression in an attribute:
+Możesz także przypisać wartość dowolnego wyrażenia javascriptowego do atrybutu, używając nawiasów
+klamrowych:
 
 ```js
 const element = <img src={user.avatarUrl}></img>;
 ```
 
-Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
+Nie otaczaj jednak klamr cudzysłowami, gdy chcesz przekazać wartość jakiegoś 
+wyrażenia do atrybutu. Zalecamy użycie albo cudzysłowów (dla statycznych ciągów 
+znaków), albo klamr (dla wartości wyrażeń), ale nie obydwu naraz (dla tego samego
+atrybutu). 
+
 
->**Warning:**
+>**Uwaga:**
 >
->Since JSX is closer to JavaScript than to HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names.
+> Jako że składni JSX jest bliżej do JavaScriptu niż do HTML-a, React DOM używa do nazywania 
+> argumentów notacji `camelCase` zamiast nazw atrybutów HTML-owych.
+>
+> Przykładowo, w JSX `class` staje się [`className`](https://developer.mozilla.org/pl/docs/Web/API/Element/className),
+> zaś zamiast `tabindex` używamy `tabIndex`. 
 >
->For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
 
-### Specifying Children with JSX {#specifying-children-with-jsx}
+### Specyfikowanie elementów potomnych w JSX {#specifying-children-with-jsx}
 
-If a tag is empty, you may close it immediately with `/>`, like XML:
+Jeśli znacznik jest pusty, możesz zakończyć go bezpośrednio przy pomocy `/>`,
+podobnie jak ma to miejsce w XML-u:
 
 ```js
 const element = <img src={user.avatarUrl} />;
 ```
 
-JSX tags may contain children:
+Znaczniki JSX mogą jednak również zawierać elementy potomne:
 
 ```js
 const element = (
   <div>
-    <h1>Hello!</h1>
-    <h2>Good to see you here.</h2>
+    <h1>Witaj!</h1>
+    <h2>Ddobrze cię widzieć.</h2>
   </div>
 );
 ```
 
-### JSX Prevents Injection Attacks {#jsx-prevents-injection-attacks}
+### JSX jest odporny na ataki przez wstrzyknięcie kodu {#jsx-prevents-injection-attacks}
 
-It is safe to embed user input in JSX:
+W JSX można bezpiecznie osadzać dane wprowadzone przez użytkownika:
 
 ```js
-const title = response.potentiallyMaliciousInput;
+const tytul = response.potentiallyMaliciousInput;
 // This is safe:
-const element = <h1>{title}</h1>;
+const element = <h1>{tytul}</h1>;
 ```
 
-By default, React DOM [escapes](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
+Domyślnie, React DOM stosuje [znaki ucieczki](https://pl.wikipedia.org/wiki/Znak_modyfikacji)
+w wartościach używanych w JSX, zanim je wyświetli. W ten sposób upewniamy się,
+że nic, co nie zostało bezpośrednio napisane w kodzie twojej aplikacji, nie zostanie
+wstrzyknięte w kod strony. Wszystko, co wyświetlamy, zamieniane jest na statyczne
+łańcuchy znaków. Pozwala to uniknąć ataków typu [XSS (Cross-site scripting)](https://pl.wikipedia.org/wiki/Cross-site_scripting). 
+
 
-### JSX Represents Objects {#jsx-represents-objects}
+### JSX reprezentuje obiekty {#jsx-represents-objects}
 
-Babel compiles JSX down to `React.createElement()` calls.
+Zanim twój kod JSX będzie mógł zostać wyświetlony w przeglądarce, musi zostać 
+odpowiednio przetworzony przez narzędzie takie jak _Babel_. Babel transpiluje 
+znaczniki JSX do wywołań funkcji `React.createElement`. 
 
-These two examples are identical:
+Poniższe dwa fragmenty kodu są sobie równoważne:
 
 ```js
 const element = (
-  <h1 className="greeting">
-    Hello, world!
+  <h1 className="powitanie">
+    Witaj, świecie!
   </h1>
 );
 ```
@@ -157,28 +200,37 @@ const element = (
 ```js
 const element = React.createElement(
   'h1',
-  {className: 'greeting'},
-  'Hello, world!'
+  {className: 'powitanie'},
+  'Witaj, świecie!'
 );
 ```
 
-`React.createElement()` performs a few checks to help you write bug-free code but essentially it creates an object like this:
+Funkcja `React.createElement` wykonuje kilka sprawdzeń, które ułatwiają pisanie
+kodu wolnego od błędów. W swej istocie jednak, zwraca ona po prostu obiekt 
+podobny do poniższego:
 
 ```js
 // Note: this structure is simplified
 const element = {
   type: 'h1',
   props: {
-    className: 'greeting',
-    children: 'Hello, world!'
+    className: 'powitanie',
+    children: 'Witaj, swiecie'
   }
 };
 ```
 
-These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.
+Takie obiekty nazywamy "_elementami reactowymi_". Możesz o nich myśleć jak o sposobie
+opisania tego, co chcesz zobaczyć na ekranie. `ReactDOM` odczytuje te obiekty 
+i używa ich do skonstruowania drzewa DOM twojej strony, jak również do późniejszego
+odświeżania go. 
 
-We will explore rendering React elements to the DOM in the next section.
+Więcej o wyświetlaniu elementów reactowych dowiesz się w następnym rozdziale.
 
->**Tip:**
+>**Wskazówka:**
+>
+> Polecamy używanie ["Babela" jako definicji języka (ang.)](http://babeljs.io/docs/editors)
+> w twoim ulubionym edytorze. Pozwoli to na poprawne podświetlanie składni ES6 i JSX.
+> Niniejsza strona używa schematu kolorów [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/),
+> który jest z nią kompatybilny.
 >
->We recommend using the ["Babel" language definition](https://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.

From 4e01dec542ba960b7f58b0b916ea8c9d7bef32eb Mon Sep 17 00:00:00 2001
From: Piotr Szymanski <cvqprs@gmail.com>
Date: Mon, 4 Mar 2019 19:16:03 +0400
Subject: [PATCH 2/7] Fix for codepen translation

---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index dcc199a0d..c0dc1ebfb 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -90,7 +90,7 @@ ReactDOM.render(
 );
 ```
 
-[](codepen://introducing-jsx)
+[Przetestuj kod na CodePen](codepen://introducing-jsx)
 
 Dla czytelności, podzieliliśmy kod JSX na kilka linii. Nie jest to wprawdzie 
 wymagane, ale polecamy również otaczanie go w nawiasy. Pozwoli to uniknąć pułapek

From c674e7ccdaa6b69241ecc2303999966225ad08cf Mon Sep 17 00:00:00 2001
From: Piotr Szymanski <cvqprs@gmail.com>
Date: Thu, 7 Mar 2019 18:22:57 +0400
Subject: [PATCH 3/7] Update after review

---
 content/docs/introducing-jsx.md | 91 +++++++++------------------------
 1 file changed, 23 insertions(+), 68 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index c0dc1ebfb..b472489a4 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -14,40 +14,25 @@ const element = <h1>Witaj, świecie!</h1>;
 
 Nieco zaskakującą może się tutaj wydawać przypisywana wartość, która nie jest ani typowym łańcuchem znaków, ani HTML-em.
 
-Taką składnię nazywamy JSX i jest to rozszerzenie składni JavaScriptu 
-o możliwość wstawiania znaczników. Zalecamy używanie jej wraz z Reactem do opisywania,
-jak powinien wyglądać interfejs graficzny strony.
-JSX może przypominać język oparty o szablony, jednakże daje on do dyspozycji
+Taką składnię nazywamy JSX i jest to rozszerzenie składni JavaScriptu o możliwość wstawiania znaczników. Zalecamy używanie jej wraz z Reactem do opisywania, jak powinien wyglądać interfejs graficzny strony. JSX może przypominać język oparty o szablony, jednakże daje on do dyspozycji
 pełnię możliwości JavaScriptu.
 
-JSX jest tłumaczony jeden do jednego na reactowe "elementy". Sposoby ich
-wyświetlania na stronie poznamy w [następnym podrozdziale](/docs/rendering-elements.html).
-Poniżej znajdziesz podstawy składni JSX, które pozwolą ci szybko zacząć tworzyć kod.
+JSX jest tłumaczony jeden do jednego na reactowe "elementy". Sposoby ich wyświetlania na stronie poznamy w [następnym podrozdziale](/docs/rendering-elements.html). Poniżej znajdziesz podstawy składni JSX, które pozwolą ci szybko zacząć tworzyć kod.
 
 
 ### Dlaczego JSX? {#why-jsx}
 
-React godzi się z faktem, że logika związana z prezentacją danych jest z natury 
-rzeczy powiązana z innymi elementami logiki biznesowej UI: sposobami przetwarzania
-zdarzeń w aplikacji, tym, jak stan aplikacji zmienia się w czasie, jak również tym,
-jak dane są przygotowywane do wyświetlenia. 
+React godzi się z faktem, że logika związana z prezentacją danych jest z natury rzeczy powiązana z innymi elementami logiki biznesowej UI: sposobami przetwarzania zdarzeń w aplikacji, tym, jak stan aplikacji zmienia się w czasie, jak również tym, jak dane są przygotowywane do wyświetlenia. 
 
-Zamiast sztucznie rozdzielać *technologie*, umiejscowiając znaczniki oraz logikę 
-aplikacji w osobnych plikach, React wprowadza [podział odpowiedzialności](https://pl.wikipedia.org/wiki/Zasada_jednej_odpowiedzialno%C5%9Bci) 
-poprzez wprowadzenie luźno powiązanych jednostek, nazywanych "komponentami", które
-zawierają zarówno znaczniki HTML, jak i związaną z nimi logikę.
+Zamiast sztucznie rozdzielać *technologie*, umiejscowiając znaczniki oraz logikę aplikacji w osobnych plikach, React wprowadza [podział odpowiedzialności](https://pl.wikipedia.org/wiki/Zasada_jednej_odpowiedzialno%C5%9Bci) poprzez wprowadzenie luźno powiązanych jednostek, nazywanych "komponentami", które zawierają zarówno znaczniki HTML, jak i związaną z nimi logikę.
 
-React [nie wymaga](/docs/react-without-jsx.html) używania JSX, jednakże większość
-programistów uważa go za przydatne narzędzie unaoczniające to, co dzieje się w kodzie
-javascriptowym operującym na interfejsach graficznych. Pomaga on również Reactowi 
-wyświetlać bardziej użyteczne informacje o błędach i ostrzeżenia. 
+React [nie wymaga](/docs/react-without-jsx.html) używania JSX, jednakże większość programistów uważa go za przydatne narzędzie unaoczniające to, co dzieje się w kodzie javascriptowym operującym na interfejsach graficznych. Pomaga on również Reactowi wyświetlać bardziej użyteczne informacje o błędach i ostrzeżenia. 
 
 Pora sprawdzić, jak to działa - do dzieła!
 
 ### Osadzanie wyrażeń w JSX {#embedding-expressions-in-jsx}
 
-W poniższym przykładzie deklarujemy zmienną `imie`, a następnie używamy jej 
-wewnątrz JSX, po prostu otaczając ją nawiasami klamrowymi:
+W poniższym przykładzie deklarujemy zmienną `imie`, a następnie używamy jej wewnątrz JSX, po prostu otaczając ją nawiasami klamrowymi:
 
 ```js{1,2}
 const imie = 'Gracjan';
@@ -59,13 +44,9 @@ ReactDOM.render(
 );
 ```
 
-Zauważ, że dowolne [wyrażenie JavaScriptowe (ang.)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)
-możesz osadzić w JSX poprzez otoczenie go klamrami. Przykładowo, możesz użyć 
-`2 + 2`, `uzytkownik.imie` czy `pokoloruj(uzytkownik)`, jako że są to prawidłowe
-wyrażenia w języku JavaScript. 
+Zauważ, że dowolne [wyrażenie JavaScriptowe (ang.)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) możesz osadzić w JSX poprzez otoczenie go klamrami. Przykładowo, możesz użyć `2 + 2`, `uzytkownik.imie` czy `pokoloruj(uzytkownik)`, jako że są to prawidłowe wyrażenia w języku JavaScript. 
 
-W poniższym przykładzie umiejscawiamy wynik wywołania funkcji javascriptowej 
-`formatuj(uzytkownik)` wewnątrz znacznika `<h1>`:
+W poniższym przykładzie umiejscawiamy wynik wywołania funkcji javascriptowej `formatuj(uzytkownik)` wewnątrz znacznika `<h1>`:
 
 
 ```js{12}
@@ -92,18 +73,13 @@ ReactDOM.render(
 
 [Przetestuj kod na CodePen](codepen://introducing-jsx)
 
-Dla czytelności, podzieliliśmy kod JSX na kilka linii. Nie jest to wprawdzie 
-wymagane, ale polecamy również otaczanie go w nawiasy. Pozwoli to uniknąć pułapek
-związanych z [automatycznym wstawianiem średników (ang.)](http://stackoverflow.com/q/2846283) w JavaScripcie.
+Dla czytelności, podzieliliśmy kod JSX na kilka linii. Nie jest to wprawdzie wymagane, ale polecamy również otaczanie go w nawiasy. Pozwoli to uniknąć pułapek związanych z [automatycznym wstawianiem średników (ang.)](http://stackoverflow.com/q/2846283) w JavaScripcie.
 
 ### JSX również jest wyrażeniem {#jsx-is-an-expression-too}
 
-Po kompilacji, wyrażenia JSX-owe stają się zwykłymi wywołaniami funkcji w JavaScripcie
-i są ewaluowane do obiektów JavaScriptowych.
+Po kompilacji, wyrażenia JSX-owe stają się zwykłymi wywołaniami funkcji w JavaScripcie i są ewaluowane do obiektów JavaScriptowych.
 
-Oznacza to, że możesz używać znaczników JSX również wewnątrz instrukcji warunkowych `if`,
-pętli `for`, przypisywać je do zmiennych, oczekiwać przekazania jako argumenty
-do funkcji, zwracać z funkcji i w wielu innych miejscach.
+Oznacza to, że możesz używać znaczników JSX również wewnątrz instrukcji warunkowych `if`, pętli `for`, przypisywać je do zmiennych, oczekiwać przekazania jako argumenty do funkcji, zwracać z funkcji i w wielu innych miejscach.
 
 ```js
 function pobierzPowitanie(uzytkownik) {
@@ -122,32 +98,25 @@ Możesz przekazać literał znakowy jako atrybut, używając poniższej składni
 const element = <div tabIndex="0"></div>;
 ```
 
-Możesz także przypisać wartość dowolnego wyrażenia javascriptowego do atrybutu, używając nawiasów
-klamrowych:
+Możesz także przypisać wartość dowolnego wyrażenia javascriptowego do atrybutu, używając nawiasów klamrowych:
 
 ```js
 const element = <img src={user.avatarUrl}></img>;
 ```
 
-Nie otaczaj jednak klamr cudzysłowami, gdy chcesz przekazać wartość jakiegoś 
-wyrażenia do atrybutu. Zalecamy użycie albo cudzysłowów (dla statycznych ciągów 
-znaków), albo klamr (dla wartości wyrażeń), ale nie obydwu naraz (dla tego samego
-atrybutu). 
+Nie otaczaj jednak klamr cudzysłowami, gdy chcesz przekazać wartość jakiegoś wyrażenia do atrybutu. Zalecamy użycie albo cudzysłowów (dla statycznych ciągów znaków), albo klamr (dla wartości wyrażeń), ale nie obydwu naraz (dla tego samego atrybutu). 
 
 
 >**Uwaga:**
 >
-> Jako że składni JSX jest bliżej do JavaScriptu niż do HTML-a, React DOM używa do nazywania 
-> argumentów notacji `camelCase` zamiast nazw atrybutów HTML-owych.
->
-> Przykładowo, w JSX `class` staje się [`className`](https://developer.mozilla.org/pl/docs/Web/API/Element/className),
-> zaś zamiast `tabindex` używamy `tabIndex`. 
+> Jako że składni JSX jest bliżej do JavaScriptu niż do HTML-a, React DOM używa do nazywania argumentów notacji `camelCase` zamiast nazw atrybutów HTML-owych.
 >
+> Przykładowo, w JSX `class` staje się [`className`](https://developer.mozilla.org/pl/docs/Web/API/Element/className), zaś zamiast `tabindex` używamy `tabIndex`. 
+
 
 ### Specyfikowanie elementów potomnych w JSX {#specifying-children-with-jsx}
 
-Jeśli znacznik jest pusty, możesz zakończyć go bezpośrednio przy pomocy `/>`,
-podobnie jak ma to miejsce w XML-u:
+Jeśli znacznik jest pusty, możesz zakończyć go bezpośrednio przy pomocy `/>`, podobnie jak ma to miejsce w XML-u:
 
 ```js
 const element = <img src={user.avatarUrl} />;
@@ -174,18 +143,12 @@ const tytul = response.potentiallyMaliciousInput;
 const element = <h1>{tytul}</h1>;
 ```
 
-Domyślnie, React DOM stosuje [znaki ucieczki](https://pl.wikipedia.org/wiki/Znak_modyfikacji)
-w wartościach używanych w JSX, zanim je wyświetli. W ten sposób upewniamy się,
-że nic, co nie zostało bezpośrednio napisane w kodzie twojej aplikacji, nie zostanie
-wstrzyknięte w kod strony. Wszystko, co wyświetlamy, zamieniane jest na statyczne
-łańcuchy znaków. Pozwala to uniknąć ataków typu [XSS (Cross-site scripting)](https://pl.wikipedia.org/wiki/Cross-site_scripting). 
+Domyślnie, React DOM stosuje [znaki ucieczki](https://pl.wikipedia.org/wiki/Znak_modyfikacji) w wartościach używanych w JSX, zanim je wyświetli. W ten sposób upewniamy się, że nic, co nie zostało bezpośrednio napisane w kodzie twojej aplikacji, nie zostanie wstrzyknięte w kod strony. Wszystko, co wyświetlamy, zamieniane jest na statyczne łańcuchy znaków. Pozwala to uniknąć ataków typu [XSS (Cross-site scripting)](https://pl.wikipedia.org/wiki/Cross-site_scripting). 
 
 
 ### JSX reprezentuje obiekty {#jsx-represents-objects}
 
-Zanim twój kod JSX będzie mógł zostać wyświetlony w przeglądarce, musi zostać 
-odpowiednio przetworzony przez narzędzie takie jak _Babel_. Babel transpiluje 
-znaczniki JSX do wywołań funkcji `React.createElement`. 
+Zanim twój kod JSX będzie mógł zostać wyświetlony w przeglądarce, musi zostać odpowiednio przetworzony przez narzędzie takie jak _Babel_. Babel transpiluje znaczniki JSX do wywołań funkcji `React.createElement`. 
 
 Poniższe dwa fragmenty kodu są sobie równoważne:
 
@@ -205,9 +168,7 @@ const element = React.createElement(
 );
 ```
 
-Funkcja `React.createElement` wykonuje kilka sprawdzeń, które ułatwiają pisanie
-kodu wolnego od błędów. W swej istocie jednak, zwraca ona po prostu obiekt 
-podobny do poniższego:
+Funkcja `React.createElement` wykonuje kilka sprawdzeń, które ułatwiają pisanie kodu wolnego od błędów. W swej istocie jednak, zwraca ona po prostu obiekt podobny do poniższego:
 
 ```js
 // Note: this structure is simplified
@@ -220,17 +181,11 @@ const element = {
 };
 ```
 
-Takie obiekty nazywamy "_elementami reactowymi_". Możesz o nich myśleć jak o sposobie
-opisania tego, co chcesz zobaczyć na ekranie. `ReactDOM` odczytuje te obiekty 
-i używa ich do skonstruowania drzewa DOM twojej strony, jak również do późniejszego
-odświeżania go. 
+Takie obiekty nazywamy "_elementami reactowymi_". Możesz o nich myśleć jak o sposobie opisania tego, co chcesz zobaczyć na ekranie. `ReactDOM` odczytuje te obiekty i używa ich do skonstruowania drzewa DOM twojej strony, jak również do późniejszego odświeżania go. 
 
 Więcej o wyświetlaniu elementów reactowych dowiesz się w następnym rozdziale.
 
 >**Wskazówka:**
 >
-> Polecamy używanie ["Babela" jako definicji języka (ang.)](http://babeljs.io/docs/editors)
-> w twoim ulubionym edytorze. Pozwoli to na poprawne podświetlanie składni ES6 i JSX.
-> Niniejsza strona używa schematu kolorów [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/),
-> który jest z nią kompatybilny.
->
+> Polecamy używanie ["Babela" jako definicji języka (ang.)](http://babeljs.io/docs/editors) w twoim ulubionym edytorze. Pozwoli to na poprawne podświetlanie składni ES6 i JSX. Niniejsza strona używa schematu kolorów [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/), który jest z nią kompatybilny.
+

From a9256eb47284e9575533df4ed2fd992cf65455bf Mon Sep 17 00:00:00 2001
From: Piotr Szymanski <cvqprs@gmail.com>
Date: Sat, 9 Mar 2019 12:33:03 +0400
Subject: [PATCH 4/7] Changes after review

---
 content/docs/introducing-jsx.md | 70 +++++++++++++++------------------
 1 file changed, 32 insertions(+), 38 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index b472489a4..3dbca1952 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -14,17 +14,15 @@ const element = <h1>Witaj, świecie!</h1>;
 
 Nieco zaskakującą może się tutaj wydawać przypisywana wartość, która nie jest ani typowym łańcuchem znaków, ani HTML-em.
 
-Taką składnię nazywamy JSX i jest to rozszerzenie składni JavaScriptu o możliwość wstawiania znaczników. Zalecamy używanie jej wraz z Reactem do opisywania, jak powinien wyglądać interfejs graficzny strony. JSX może przypominać język oparty o szablony, jednakże daje on do dyspozycji
-pełnię możliwości JavaScriptu.
-
-JSX jest tłumaczony jeden do jednego na reactowe "elementy". Sposoby ich wyświetlania na stronie poznamy w [następnym podrozdziale](/docs/rendering-elements.html). Poniżej znajdziesz podstawy składni JSX, które pozwolą ci szybko zacząć tworzyć kod.
+Taką składnię nazywamy JSX i jest to rozszerzenie składni JavaScriptu o możliwość wstawiania znaczników. Zalecamy używanie jej wraz z Reactem do opisywania, jak powinien wyglądać interfejs graficzny strony. JSX może przypominać język oparty o szablony, jednakże daje on do dyspozycji pełnię możliwości JavaScriptu.
 
+JSX jest tłumaczony jeden do jednego na reactowe "elementy". Sposoby ich wyświetlania na stronie poznamy w [następnym rozdziale](/docs/rendering-elements.html). Poniżej znajdziesz podstawy składni JSX, które pozwolą ci szybko zacząć tworzyć kod.
 
 ### Dlaczego JSX? {#why-jsx}
 
-React godzi się z faktem, że logika związana z prezentacją danych jest z natury rzeczy powiązana z innymi elementami logiki biznesowej UI: sposobami przetwarzania zdarzeń w aplikacji, tym, jak stan aplikacji zmienia się w czasie, jak również tym, jak dane są przygotowywane do wyświetlenia. 
+React przyjmuje ideę, że logika związana z prezentacją danych jest z natury rzeczy powiązana z innymi elementami logiki biznesowej UI: sposobami przetwarzania zdarzeń w aplikacji, tym, jak stan aplikacji zmienia się w czasie, jak również tym, jak dane są przygotowywane do wyświetlenia. 
 
-Zamiast sztucznie rozdzielać *technologie*, umiejscowiając znaczniki oraz logikę aplikacji w osobnych plikach, React wprowadza [podział odpowiedzialności](https://pl.wikipedia.org/wiki/Zasada_jednej_odpowiedzialno%C5%9Bci) poprzez wprowadzenie luźno powiązanych jednostek, nazywanych "komponentami", które zawierają zarówno znaczniki HTML, jak i związaną z nimi logikę.
+Zamiast sztucznie rozdzielać *technologie*, umiejscawiając znaczniki oraz logikę aplikacji w osobnych plikach, React wprowadza [podział odpowiedzialności](https://pl.wikipedia.org/wiki/Zasada_jednej_odpowiedzialno%C5%9Bci) poprzez wprowadzenie luźno powiązanych jednostek, nazywanych "komponentami", które zawierają zarówno znaczniki HTML, jak i związaną z nimi logikę.
 
 React [nie wymaga](/docs/react-without-jsx.html) używania JSX, jednakże większość programistów uważa go za przydatne narzędzie unaoczniające to, co dzieje się w kodzie javascriptowym operującym na interfejsach graficznych. Pomaga on również Reactowi wyświetlać bardziej użyteczne informacje o błędach i ostrzeżenia. 
 
@@ -32,11 +30,11 @@ Pora sprawdzić, jak to działa - do dzieła!
 
 ### Osadzanie wyrażeń w JSX {#embedding-expressions-in-jsx}
 
-W poniższym przykładzie deklarujemy zmienną `imie`, a następnie używamy jej wewnątrz JSX, po prostu otaczając ją nawiasami klamrowymi:
+W poniższym przykładzie deklarujemy zmienną `name`, a następnie używamy jej wewnątrz JSX, po prostu otaczając ją nawiasami klamrowymi:
 
 ```js{1,2}
-const imie = 'Gracjan';
-const element = <h1>Witaj, {imie}</h1>;
+const name = 'Gracjan';
+const element = <h1>Witaj, {name}</h1>;
 
 ReactDOM.render(
   element,
@@ -44,24 +42,23 @@ ReactDOM.render(
 );
 ```
 
-Zauważ, że dowolne [wyrażenie JavaScriptowe (ang.)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) możesz osadzić w JSX poprzez otoczenie go klamrami. Przykładowo, możesz użyć `2 + 2`, `uzytkownik.imie` czy `pokoloruj(uzytkownik)`, jako że są to prawidłowe wyrażenia w języku JavaScript. 
-
-W poniższym przykładzie umiejscawiamy wynik wywołania funkcji javascriptowej `formatuj(uzytkownik)` wewnątrz znacznika `<h1>`:
+Zauważ, że dowolne [wyrażenie JavaScriptowe (ang.)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) możesz osadzić w JSX poprzez otoczenie go klamrami. Przykładowo, możesz użyć `2 + 2`, `user.firstName` czy `formatName(user)`, jako że są to prawidłowe wyrażenia w języku JavaScript. 
 
+W poniższym przykładzie umiejscawiamy wynik wywołania funkcji javascriptowej `formatName(user)` wewnątrz znacznika `<h1>`:
 
 ```js{12}
-function formatuj(uzytkownik) {
-  return uzytkownik.imie + ' ' + uzytkownik.nazwisko;
+function formatName(user) {
+  return user.firstName + ' ' + user.lastName;
 }
 
-const uzytkownik = {
-  imie: 'Gracjan',
-  nazwisko: 'Brzęczyszczykiewicz',
+const user = {
+  firstName: 'Gracjan',
+  lastName: 'Brzęczyszczykiewicz',
 };
 
 const element = (
   <h1>
-    Witaj, {formatuj(uzytkownik)}!
+    Witaj, {formatName(user)}!
   </h1>
 );
 
@@ -73,18 +70,18 @@ ReactDOM.render(
 
 [Przetestuj kod na CodePen](codepen://introducing-jsx)
 
-Dla czytelności, podzieliliśmy kod JSX na kilka linii. Nie jest to wprawdzie wymagane, ale polecamy również otaczanie go w nawiasy. Pozwoli to uniknąć pułapek związanych z [automatycznym wstawianiem średników (ang.)](http://stackoverflow.com/q/2846283) w JavaScripcie.
+Dla czytelności podzieliliśmy kod JSX na kilka linii. Nie jest to wprawdzie wymagane, ale polecamy również otaczanie go w nawiasy. Pozwoli to uniknąć pułapek związanych z [automatycznym wstawianiem średników (ang.)](http://stackoverflow.com/q/2846283) w JavaScripcie.
 
 ### JSX również jest wyrażeniem {#jsx-is-an-expression-too}
 
-Po kompilacji, wyrażenia JSX-owe stają się zwykłymi wywołaniami funkcji w JavaScripcie i są ewaluowane do obiektów JavaScriptowych.
+Po kompilacji, wyrażenia JSX-owe stają się zwykłymi wywołaniami funkcji w JavaScripcie i są ewaluowane do obiektów javascriptowych.
 
 Oznacza to, że możesz używać znaczników JSX również wewnątrz instrukcji warunkowych `if`, pętli `for`, przypisywać je do zmiennych, oczekiwać przekazania jako argumenty do funkcji, zwracać z funkcji i w wielu innych miejscach.
 
-```js
-function pobierzPowitanie(uzytkownik) {
-  if (uzytkownik) {
-    return <h1>Witaj, {formatuj(uzytkownik)}!</h1>;
+```js{3,5}
+function getGreeting(user) {
+  if (user) {
+    return <h1>Witaj, {formatName(user)}!</h1>;
   }
   return <h1>Witaj, nieznajomy.</h1>;
 }
@@ -104,16 +101,15 @@ Możesz także przypisać wartość dowolnego wyrażenia javascriptowego do atry
 const element = <img src={user.avatarUrl}></img>;
 ```
 
-Nie otaczaj jednak klamr cudzysłowami, gdy chcesz przekazać wartość jakiegoś wyrażenia do atrybutu. Zalecamy użycie albo cudzysłowów (dla statycznych ciągów znaków), albo klamr (dla wartości wyrażeń), ale nie obydwu naraz (dla tego samego atrybutu). 
+Nie otaczaj jednak klamer cudzysłowami, gdy chcesz przekazać wartość jakiegoś wyrażenia do atrybutu. Zalecamy użycie albo cudzysłowów (dla statycznych ciągów znaków), albo klamer (dla wartości wyrażeń), ale nie obydwu naraz (dla tego samego atrybutu). 
 
 
 >**Uwaga:**
 >
-> Jako że składni JSX jest bliżej do JavaScriptu niż do HTML-a, React DOM używa do nazywania argumentów notacji `camelCase` zamiast nazw atrybutów HTML-owych.
+> Jako że składni JSX jest bliżej do JavaScriptu niż do HTML-a, React DOM do nazywania argumentów używa notacji `camelCase` zamiast nazw atrybutów HTML-owych.
 >
 > Przykładowo, w JSX `class` staje się [`className`](https://developer.mozilla.org/pl/docs/Web/API/Element/className), zaś zamiast `tabindex` używamy `tabIndex`. 
 
-
 ### Specyfikowanie elementów potomnych w JSX {#specifying-children-with-jsx}
 
 Jeśli znacznik jest pusty, możesz zakończyć go bezpośrednio przy pomocy `/>`, podobnie jak ma to miejsce w XML-u:
@@ -128,7 +124,7 @@ Znaczniki JSX mogą jednak również zawierać elementy potomne:
 const element = (
   <div>
     <h1>Witaj!</h1>
-    <h2>Ddobrze cię widzieć.</h2>
+    <h2>Dobrze cię widzieć.</h2>
   </div>
 );
 ```
@@ -138,14 +134,13 @@ const element = (
 W JSX można bezpiecznie osadzać dane wprowadzone przez użytkownika:
 
 ```js
-const tytul = response.potentiallyMaliciousInput;
+const title = response.potencjalnieZlosliweDane;
 // This is safe:
-const element = <h1>{tytul}</h1>;
+const element = <h1>{title}</h1>;
 ```
 
 Domyślnie, React DOM stosuje [znaki ucieczki](https://pl.wikipedia.org/wiki/Znak_modyfikacji) w wartościach używanych w JSX, zanim je wyświetli. W ten sposób upewniamy się, że nic, co nie zostało bezpośrednio napisane w kodzie twojej aplikacji, nie zostanie wstrzyknięte w kod strony. Wszystko, co wyświetlamy, zamieniane jest na statyczne łańcuchy znaków. Pozwala to uniknąć ataków typu [XSS (Cross-site scripting)](https://pl.wikipedia.org/wiki/Cross-site_scripting). 
 
-
 ### JSX reprezentuje obiekty {#jsx-represents-objects}
 
 Zanim twój kod JSX będzie mógł zostać wyświetlony w przeglądarce, musi zostać odpowiednio przetworzony przez narzędzie takie jak _Babel_. Babel transpiluje znaczniki JSX do wywołań funkcji `React.createElement`. 
@@ -154,7 +149,7 @@ Poniższe dwa fragmenty kodu są sobie równoważne:
 
 ```js
 const element = (
-  <h1 className="powitanie">
+  <h1 className="greeting">
     Witaj, świecie!
   </h1>
 );
@@ -163,7 +158,7 @@ const element = (
 ```js
 const element = React.createElement(
   'h1',
-  {className: 'powitanie'},
+  {className: 'greeting'},
   'Witaj, świecie!'
 );
 ```
@@ -175,17 +170,16 @@ Funkcja `React.createElement` wykonuje kilka sprawdzeń, które ułatwiają pisa
 const element = {
   type: 'h1',
   props: {
-    className: 'powitanie',
-    children: 'Witaj, swiecie'
+    className: 'greeting',
+    children: 'Witaj, świecie'
   }
 };
 ```
 
-Takie obiekty nazywamy "_elementami reactowymi_". Możesz o nich myśleć jak o sposobie opisania tego, co chcesz zobaczyć na ekranie. `ReactDOM` odczytuje te obiekty i używa ich do skonstruowania drzewa DOM twojej strony, jak również do późniejszego odświeżania go. 
+Takie obiekty nazywamy "_elementami reactowymi_". Możesz o nich myśleć jak o sposobie opisania tego, co znajdzie się na ekranie. `ReactDOM` odczytuje te obiekty i używa ich do skonstruowania drzewa DOM twojej strony, jak również do późniejszego odświeżania go. 
 
 Więcej o wyświetlaniu elementów reactowych dowiesz się w następnym rozdziale.
 
 >**Wskazówka:**
 >
-> Polecamy używanie ["Babela" jako definicji języka (ang.)](http://babeljs.io/docs/editors) w twoim ulubionym edytorze. Pozwoli to na poprawne podświetlanie składni ES6 i JSX. Niniejsza strona używa schematu kolorów [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/), który jest z nią kompatybilny.
-
+> Polecamy używanie ["Babela" jako definicji języka (ang.)](http://babeljs.io/docs/editors) w twoim ulubionym edytorze. Pozwoli to na poprawne podświetlanie składni ES6 i JSX. Niniejsza strona używa schematu kolorów [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/), który jest z nią kompatybilny.
\ No newline at end of file

From ea5d79046f492da4a409129ef9544aa2aa9e8230 Mon Sep 17 00:00:00 2001
From: Piotr Szymanski <cvqprs@gmail.com>
Date: Sat, 9 Mar 2019 12:40:44 +0400
Subject: [PATCH 5/7] Fixing format issues

---
 content/docs/introducing-jsx.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 3dbca1952..ee62ce2db 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -103,7 +103,6 @@ const element = <img src={user.avatarUrl}></img>;
 
 Nie otaczaj jednak klamer cudzysłowami, gdy chcesz przekazać wartość jakiegoś wyrażenia do atrybutu. Zalecamy użycie albo cudzysłowów (dla statycznych ciągów znaków), albo klamer (dla wartości wyrażeń), ale nie obydwu naraz (dla tego samego atrybutu). 
 
-
 >**Uwaga:**
 >
 > Jako że składni JSX jest bliżej do JavaScriptu niż do HTML-a, React DOM do nazywania argumentów używa notacji `camelCase` zamiast nazw atrybutów HTML-owych.

From ef7cdb2446e3bfa1325cfc9638ea3f51c101e033 Mon Sep 17 00:00:00 2001
From: Piotr Szymanski <cvqprs@gmail.com>
Date: Sat, 9 Mar 2019 16:47:15 +0400
Subject: [PATCH 6/7] Changes after review

---
 content/docs/introducing-jsx.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index ee62ce2db..4c90c243b 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -42,7 +42,7 @@ ReactDOM.render(
 );
 ```
 
-Zauważ, że dowolne [wyrażenie JavaScriptowe (ang.)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) możesz osadzić w JSX poprzez otoczenie go klamrami. Przykładowo, możesz użyć `2 + 2`, `user.firstName` czy `formatName(user)`, jako że są to prawidłowe wyrażenia w języku JavaScript. 
+Zauważ, że dowolne [wyrażenie JavaScriptowe](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) możesz osadzić w JSX poprzez otoczenie go klamrami. Przykładowo, możesz użyć `2 + 2`, `user.firstName` czy `formatName(user)`, jako że są to prawidłowe wyrażenia w języku JavaScript. 
 
 W poniższym przykładzie umiejscawiamy wynik wywołania funkcji javascriptowej `formatName(user)` wewnątrz znacznika `<h1>`:
 
@@ -70,7 +70,7 @@ ReactDOM.render(
 
 [Przetestuj kod na CodePen](codepen://introducing-jsx)
 
-Dla czytelności podzieliliśmy kod JSX na kilka linii. Nie jest to wprawdzie wymagane, ale polecamy również otaczanie go w nawiasy. Pozwoli to uniknąć pułapek związanych z [automatycznym wstawianiem średników (ang.)](http://stackoverflow.com/q/2846283) w JavaScripcie.
+Dla czytelności podzieliliśmy kod JSX na kilka linii. Nie jest to wprawdzie wymagane, ale polecamy również otaczanie go w nawiasy. Pozwoli to uniknąć pułapek związanych z [automatycznym wstawianiem średników](http://stackoverflow.com/q/2846283) w JavaScripcie.
 
 ### JSX również jest wyrażeniem {#jsx-is-an-expression-too}
 
@@ -134,7 +134,7 @@ W JSX można bezpiecznie osadzać dane wprowadzone przez użytkownika:
 
 ```js
 const title = response.potencjalnieZlosliweDane;
-// This is safe:
+// To jest bezpieczne:
 const element = <h1>{title}</h1>;
 ```
 
@@ -181,4 +181,4 @@ Więcej o wyświetlaniu elementów reactowych dowiesz się w następnym rozdzial
 
 >**Wskazówka:**
 >
-> Polecamy używanie ["Babela" jako definicji języka (ang.)](http://babeljs.io/docs/editors) w twoim ulubionym edytorze. Pozwoli to na poprawne podświetlanie składni ES6 i JSX. Niniejsza strona używa schematu kolorów [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/), który jest z nią kompatybilny.
\ No newline at end of file
+> Polecamy używanie ["Babela" jako definicji języka](http://babeljs.io/docs/editors) w twoim ulubionym edytorze. Pozwoli to na poprawne podświetlanie składni ES6 i JSX. Niniejsza strona używa schematu kolorów [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/), który jest z nią kompatybilny.
\ No newline at end of file

From aba219763a4adaf3764819bd024f97494ef9959e Mon Sep 17 00:00:00 2001
From: Wojtek <grzebieniowski@gmail.com>
Date: Sat, 9 Mar 2019 16:50:57 +0400
Subject: [PATCH 7/7] Update content/docs/introducing-jsx.md

Co-Authored-By: cvqprs <cvqprs@gmail.com>
---
 content/docs/introducing-jsx.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 4c90c243b..b6397c194 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -24,7 +24,7 @@ React przyjmuje ideę, że logika związana z prezentacją danych jest z natury
 
 Zamiast sztucznie rozdzielać *technologie*, umiejscawiając znaczniki oraz logikę aplikacji w osobnych plikach, React wprowadza [podział odpowiedzialności](https://pl.wikipedia.org/wiki/Zasada_jednej_odpowiedzialno%C5%9Bci) poprzez wprowadzenie luźno powiązanych jednostek, nazywanych "komponentami", które zawierają zarówno znaczniki HTML, jak i związaną z nimi logikę.
 
-React [nie wymaga](/docs/react-without-jsx.html) używania JSX, jednakże większość programistów uważa go za przydatne narzędzie unaoczniające to, co dzieje się w kodzie javascriptowym operującym na interfejsach graficznych. Pomaga on również Reactowi wyświetlać bardziej użyteczne informacje o błędach i ostrzeżenia. 
+React [nie wymaga](/docs/react-without-jsx.html) używania JSX, jednakże większość programistów uważa go za przydatne narzędzie, unaoczniające to, co dzieje się w kodzie javascriptowym operującym na interfejsach graficznych. Pomaga on również Reactowi wyświetlać bardziej użyteczne informacje o błędach i ostrzeżenia. 
 
 Pora sprawdzić, jak to działa - do dzieła!
 
@@ -181,4 +181,4 @@ Więcej o wyświetlaniu elementów reactowych dowiesz się w następnym rozdzial
 
 >**Wskazówka:**
 >
-> Polecamy używanie ["Babela" jako definicji języka](http://babeljs.io/docs/editors) w twoim ulubionym edytorze. Pozwoli to na poprawne podświetlanie składni ES6 i JSX. Niniejsza strona używa schematu kolorów [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/), który jest z nią kompatybilny.
\ No newline at end of file
+> Polecamy używanie ["Babela" jako definicji języka](http://babeljs.io/docs/editors) w twoim ulubionym edytorze. Pozwoli to na poprawne podświetlanie składni ES6 i JSX. Niniejsza strona używa schematu kolorów [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/), który jest z nią kompatybilny.