From 30f50e3d3d8a18aca26512b3338b5e53e9523f5b Mon Sep 17 00:00:00 2001 From: Arkadiusz Mazurkiewicz Date: Tue, 5 Mar 2019 17:10:12 +0100 Subject: [PATCH 01/20] Translate `Rendering Elements` page --- content/docs/rendering-elements.md | 52 +++++++++++++++--------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 34bb62b7c..6ac6d4264 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -1,6 +1,6 @@ --- id: rendering-elements -title: Rendering Elements +title: Renderowanie elementów permalink: docs/rendering-elements.html redirect_from: - "docs/displaying-data.html" @@ -8,68 +8,68 @@ prev: introducing-jsx.html next: components-and-props.html --- -Elements are the smallest building blocks of React apps. +Elementy to najmniejsze bloki budujące reactowe aplikacje. -An element describes what you want to see on the screen: +Element opisuje co chcesz zobaczyć na ekranie. ```js const element =

Hello, world

; ``` -Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. +W przeciwieństwie do elementów drzewa DOM w przeglądarce, reactowe elementy są zwykłymi obiektami i mają niski koszt stworzenia. ->**Note:** +>**Wskazówka:** > ->One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead. +>Łatwo pomylić elementy z szerzej znaną koncepcją "komponentów". Komponenty przedstawimy w [kolejnej sekcji](/docs/components-and-props.html). Elementy są tym, z czego komponenty "są zbudowane". Zachęcamy do przeczytania tej sekcji przed przejściem dalej. -## Rendering an Element into the DOM {#rendering-an-element-into-the-dom} +## Renderowanie elementu w drzewie DOM {#rendering-an-element-into-the-dom} -Let's say there is a `
` somewhere in your HTML file: +Powiedzmy, że gdzieś w twoim pliku HTML jest `
`: ```html
``` -We call this a "root" DOM node because everything inside it will be managed by React DOM. +Nazywamy ten węzeł drzewa DOM "korzeniem", bo wszytko, co się w nim znajduje będzie zarządzane przez React DOM. -Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like. +Aplikacje zbudowane tylko w Reakcie zazwyczaj posiadają pojedynczy węzeł drzewa DOM. Jeśli integrujesz reactową aplikację z już istniejącą aplikacją, możesz mieć tyle odizolowanych "korzeni", ile chcesz. -To render a React element into a root DOM node, pass both to `ReactDOM.render()`: +Aby wyrenderować reactowy element w węźle drzewa DOM, przekaż oba do `ReactDOM.render()`: `embed:rendering-elements/render-an-element.js` [](codepen://rendering-elements/render-an-element) -It displays "Hello, world" on the page. +Na stronie wyświetli się "Hello, world". -## Updating the Rendered Element {#updating-the-rendered-element} +## Aktualizowanie wyrenderowanego elementu {#updating-the-rendered-element} -React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. +Reactowe elementy są [niezmienne](https://en.wikipedia.org/wiki/Immutable_object). Kiedy stworzysz element, nie możesz zmienić jego komponentów potomnych ani właściwości. Element jest jak pojedyncza klatka z filmu: reprezentuje interfejs użytkownika w pewnym punkcie czasu. -With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`. +Dotychczas z naszą wiedzą, jedynym sposobem aktualizacji interfejsu użytkownika jest stworzenie nowego elementu i przekazanie go do `ReactDOM.render()`. -Consider this ticking clock example: +Rozważ ten przykład tykającego zegara: `embed:rendering-elements/update-rendered-element.js` [](codepen://rendering-elements/update-rendered-element) -It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback. +Przywołuje on `ReactDOM.render()` w każdej sekundzie z funkcji zwrotnej [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). ->**Note:** +>**Wskazówka:** > ->In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html). +>W praktyce, większość reactowych aplikacji przywołuje `ReactDOM.render()` tylko raz. W kolejnych sekcjach dowiemy się jak taki kod zostaje wyhermetyzowany do [stanowych komponentów](/docs/state-and-lifecycle.html). > ->We recommend that you don't skip topics because they build on each other. +>Zalecamy, abyś nie pomijał tematów, ponieważ budują one na sobie. -## React Only Updates What's Necessary {#react-only-updates-whats-necessary} +## React uaktualnia tylko to, co potrzebne {#react-only-updates-whats-necessary} -React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. +React DOM porównuje element i jego potomków do poprzedniego oraz stosuje aktualizacje drzewa DOM konieczne do doprowadzenia go do pożądanego stanu. -You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools: +Możesz to sprawdzić przez inspekcję [ostatniego przykładu](codepen://rendering-elements/update-rendered-element) w narzędziach przeglądarki: -![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif) +![inspektor DOM pokazujący cząstkowe aktualizacje](../images/docs/granular-dom-updates.gif) -Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM. +Chociaż tworzymy element opisujący cały interfejs użytkownika przy każdym tyknięciu, tylko węzeł tekstowy, którego treść zmieniła się zostaje zaktualizowany przez React DOM. -In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs. +Według naszego doświadczenia, myślenie o tym, jak powinien wyglądać interfejs użytkownika w danym momencie, a nie jak zmienić go w czasie, eleminuje całą klasę błędów. From bef6b42d1246ddbc430ece41ca6e2794c58ca3e5 Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:48:30 +0100 Subject: [PATCH 02/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 6ac6d4264..0e48b707c 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -10,7 +10,7 @@ next: components-and-props.html Elementy to najmniejsze bloki budujące reactowe aplikacje. -Element opisuje co chcesz zobaczyć na ekranie. +Element opisuje, co chcesz zobaczyć na ekranie: ```js const element =

Hello, world

; From caecd5387f84d49094b2c505e53ec2a5acc7d788 Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:49:27 +0100 Subject: [PATCH 03/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 0e48b707c..ec9d9757c 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -20,7 +20,7 @@ W przeciwieństwie do elementów drzewa DOM w przeglądarce, reactowe elementy s >**Wskazówka:** > ->Łatwo pomylić elementy z szerzej znaną koncepcją "komponentów". Komponenty przedstawimy w [kolejnej sekcji](/docs/components-and-props.html). Elementy są tym, z czego komponenty "są zbudowane". Zachęcamy do przeczytania tej sekcji przed przejściem dalej. +>Łatwo pomylić elementy z szerzej znaną koncepcją "komponentów". Komponenty przedstawimy w [kolejnym rozdziale](/docs/components-and-props.html). Elementy są tym, z czego komponenty "są zbudowane". Zachęcamy do przeczytania tego rozdziału przed przejściem dalej. ## Renderowanie elementu w drzewie DOM {#rendering-an-element-into-the-dom} From 84b81c6c1aa96fc5808b1cf4d2cdd9a75394fa2c Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:50:13 +0100 Subject: [PATCH 04/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index ec9d9757c..5e64a8c4e 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -32,7 +32,7 @@ Powiedzmy, że gdzieś w twoim pliku HTML jest `
`: Nazywamy ten węzeł drzewa DOM "korzeniem", bo wszytko, co się w nim znajduje będzie zarządzane przez React DOM. -Aplikacje zbudowane tylko w Reakcie zazwyczaj posiadają pojedynczy węzeł drzewa DOM. Jeśli integrujesz reactową aplikację z już istniejącą aplikacją, możesz mieć tyle odizolowanych "korzeni", ile chcesz. +Aplikacje zbudowane przy pomocy samego Reacta zazwyczaj posiadają pojedynczy węzeł drzewa DOM. Jeśli natomiast integrujesz reactową aplikację z już istniejącą aplikacją, możesz mieć tyle odizolowanych "korzeni", ile chcesz. Aby wyrenderować reactowy element w węźle drzewa DOM, przekaż oba do `ReactDOM.render()`: From 75c49c3682d44cb2de50b6ec22851a8f8a67e2e8 Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:51:37 +0100 Subject: [PATCH 05/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 5e64a8c4e..8e677aa9f 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -44,7 +44,7 @@ Na stronie wyświetli się "Hello, world". ## Aktualizowanie wyrenderowanego elementu {#updating-the-rendered-element} -Reactowe elementy są [niezmienne](https://en.wikipedia.org/wiki/Immutable_object). Kiedy stworzysz element, nie możesz zmienić jego komponentów potomnych ani właściwości. Element jest jak pojedyncza klatka z filmu: reprezentuje interfejs użytkownika w pewnym punkcie czasu. +Reactowe elementy są [niezmienne](https://en.wikipedia.org/wiki/Immutable_object) (ang. *immutable*). Kiedy już stworzysz element, nie możesz zmienić jego komponentów potomnych ani właściwości. Element jest jak pojedyncza klatka z filmu: reprezentuje interfejs użytkownika w pewnym punkcie czasu. Dotychczas z naszą wiedzą, jedynym sposobem aktualizacji interfejsu użytkownika jest stworzenie nowego elementu i przekazanie go do `ReactDOM.render()`. From 841de88ff465582fd4bbde1b67f66571e19724bd Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:52:06 +0100 Subject: [PATCH 06/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 8e677aa9f..690be8fab 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -46,7 +46,7 @@ Na stronie wyświetli się "Hello, world". Reactowe elementy są [niezmienne](https://en.wikipedia.org/wiki/Immutable_object) (ang. *immutable*). Kiedy już stworzysz element, nie możesz zmienić jego komponentów potomnych ani właściwości. Element jest jak pojedyncza klatka z filmu: reprezentuje interfejs użytkownika w pewnym punkcie czasu. -Dotychczas z naszą wiedzą, jedynym sposobem aktualizacji interfejsu użytkownika jest stworzenie nowego elementu i przekazanie go do `ReactDOM.render()`. +Przy naszej dotychczasowej wiedzy, jedynym sposobem aktualizacji interfejsu użytkownika jest stworzenie nowego elementu i przekazanie go do `ReactDOM.render()`. Rozważ ten przykład tykającego zegara: From d35b1d72241c68bf212e3ace5964be00a8d826d8 Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:52:47 +0100 Subject: [PATCH 07/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 690be8fab..e4c018032 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -54,7 +54,7 @@ Rozważ ten przykład tykającego zegara: [](codepen://rendering-elements/update-rendered-element) -Przywołuje on `ReactDOM.render()` w każdej sekundzie z funkcji zwrotnej [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). +Wywołuje on `ReactDOM.render()` z funkcji zwrotnej [`setInterval()`](https://developer.mozilla.org/pl/docs/Web/API/Window/setInterval) co sekundę. >**Wskazówka:** > From a2961088a5ee8700218d989a2ed2d73fb6599ad1 Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:53:24 +0100 Subject: [PATCH 08/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index e4c018032..882a7da04 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -58,7 +58,7 @@ Wywołuje on `ReactDOM.render()` z funkcji zwrotnej [`setInterval()`](https://de >**Wskazówka:** > ->W praktyce, większość reactowych aplikacji przywołuje `ReactDOM.render()` tylko raz. W kolejnych sekcjach dowiemy się jak taki kod zostaje wyhermetyzowany do [stanowych komponentów](/docs/state-and-lifecycle.html). +>W praktyce większość reactowych aplikacji wywołuje `ReactDOM.render()` tylko raz. W kolejnych rozdziałach dowiemy się, jak taki kod można wyizolować do [komponentów stanowych](/docs/state-and-lifecycle.html). > >Zalecamy, abyś nie pomijał tematów, ponieważ budują one na sobie. From 9a1d9e5421500a8184a5105495ef69571581acfa Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:53:47 +0100 Subject: [PATCH 09/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 882a7da04..382c63250 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -60,7 +60,7 @@ Wywołuje on `ReactDOM.render()` z funkcji zwrotnej [`setInterval()`](https://de > >W praktyce większość reactowych aplikacji wywołuje `ReactDOM.render()` tylko raz. W kolejnych rozdziałach dowiemy się, jak taki kod można wyizolować do [komponentów stanowych](/docs/state-and-lifecycle.html). > ->Zalecamy, abyś nie pomijał tematów, ponieważ budują one na sobie. +>Radzimy nie pomijać żadnych tematów, ponieważ kolejne rozdziały oparte są o wiedzę z poprzednich. ## React uaktualnia tylko to, co potrzebne {#react-only-updates-whats-necessary} From 47cd0220176c83bee7217d80a5b15456149c2cc6 Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:55:18 +0100 Subject: [PATCH 10/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 382c63250..62bc43b66 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -66,7 +66,7 @@ Wywołuje on `ReactDOM.render()` z funkcji zwrotnej [`setInterval()`](https://de React DOM porównuje element i jego potomków do poprzedniego oraz stosuje aktualizacje drzewa DOM konieczne do doprowadzenia go do pożądanego stanu. -Możesz to sprawdzić przez inspekcję [ostatniego przykładu](codepen://rendering-elements/update-rendered-element) w narzędziach przeglądarki: +Możesz to sprawdzić przez zbadanie (ang. *inspect*) [ostatniego przykładu](codepen://rendering-elements/update-rendered-element) przy użyciu narzędzi deweloperskich: ![inspektor DOM pokazujący cząstkowe aktualizacje](../images/docs/granular-dom-updates.gif) From 2f17ae1b677ee512f3bba2b17644a8100abcd50f Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:55:36 +0100 Subject: [PATCH 11/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 62bc43b66..11743e669 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -70,6 +70,6 @@ Możesz to sprawdzić przez zbadanie (ang. *inspect*) [ostatniego przykładu](co ![inspektor DOM pokazujący cząstkowe aktualizacje](../images/docs/granular-dom-updates.gif) -Chociaż tworzymy element opisujący cały interfejs użytkownika przy każdym tyknięciu, tylko węzeł tekstowy, którego treść zmieniła się zostaje zaktualizowany przez React DOM. +Mimo że przy każdym tyknięciu zegara tworzymy element opisujący cały interfejs użytkownika, tylko węzeł tekstowy, którego treść uległa zmianie, zostaje zaktualizowany przez React DOM. Według naszego doświadczenia, myślenie o tym, jak powinien wyglądać interfejs użytkownika w danym momencie, a nie jak zmienić go w czasie, eleminuje całą klasę błędów. From 2101bc514697e383b1977d53f50a348493311a1f Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Wed, 6 Mar 2019 09:56:08 +0100 Subject: [PATCH 12/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 11743e669..60d4f0857 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -72,4 +72,4 @@ Możesz to sprawdzić przez zbadanie (ang. *inspect*) [ostatniego przykładu](co Mimo że przy każdym tyknięciu zegara tworzymy element opisujący cały interfejs użytkownika, tylko węzeł tekstowy, którego treść uległa zmianie, zostaje zaktualizowany przez React DOM. -Według naszego doświadczenia, myślenie o tym, jak powinien wyglądać interfejs użytkownika w danym momencie, a nie jak zmienić go w czasie, eleminuje całą klasę błędów. +Według naszego doświadczenia, myślenie o tym, jak powinien wyglądać interfejs użytkownika w danym momencie, a nie jak zmieniać go w czasie, eliminuje całą klasę błędów. From 353a1c25f80bca13a120d0076a396f9ab218aa94 Mon Sep 17 00:00:00 2001 From: Arkadiusz Mazurkiewicz Date: Wed, 6 Mar 2019 10:10:15 +0100 Subject: [PATCH 13/20] Translate examples/rendering-elements/update-rendered-element.js file --- examples/rendering-elements/update-rendered-element.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/rendering-elements/update-rendered-element.js b/examples/rendering-elements/update-rendered-element.js index a4dabafc7..255eebc15 100644 --- a/examples/rendering-elements/update-rendered-element.js +++ b/examples/rendering-elements/update-rendered-element.js @@ -1,8 +1,8 @@ function tick() { const element = (
-

Hello, world!

-

It is {new Date().toLocaleTimeString()}.

+

Witaj świecie!

+

Aktualny czas: {new Date().toLocaleTimeString()}.

); // highlight-next-line From 679cacb70aa4f585b2bbc4ac05d3221ffa169650 Mon Sep 17 00:00:00 2001 From: Arkadiusz Mazurkiewicz Date: Wed, 6 Mar 2019 10:11:18 +0100 Subject: [PATCH 14/20] Translate examples/rendering-elements/render-an-element.js file --- examples/rendering-elements/render-an-element.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/rendering-elements/render-an-element.js b/examples/rendering-elements/render-an-element.js index 024b35876..83162bb51 100644 --- a/examples/rendering-elements/render-an-element.js +++ b/examples/rendering-elements/render-an-element.js @@ -1,2 +1,2 @@ -const element =

Hello, world

; +const element =

Witaj, świecie!

; ReactDOM.render(element, document.getElementById('root')); From ff7e7d80a76f83f4947ef5faf05bb5c4a29ecf70 Mon Sep 17 00:00:00 2001 From: Arkadiusz Mazurkiewicz Date: Wed, 6 Mar 2019 10:31:42 +0100 Subject: [PATCH 15/20] Add fixes to `Rendering elements` page translation --- content/docs/rendering-elements.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 60d4f0857..a071152dc 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -13,10 +13,11 @@ Elementy to najmniejsze bloki budujące reactowe aplikacje. Element opisuje, co chcesz zobaczyć na ekranie: ```js -const element =

Hello, world

; +const element =

Witaj, świecie!

; ``` -W przeciwieństwie do elementów drzewa DOM w przeglądarce, reactowe elementy są zwykłymi obiektami i mają niski koszt stworzenia. +W przeciwieństwie do elementów drzewa DOM w przeglądarce, reactowe elementy są zwykłymi obiektami i mają niski koszt tworzenia. React DOM zajmuje się aktualizowaniem drzewa DOM tak, aby odpowiadało strukturze elementów reactowych. + >**Wskazówka:** > @@ -40,7 +41,7 @@ Aby wyrenderować reactowy element w węźle drzewa DOM, przekaż oba do `ReactD [](codepen://rendering-elements/render-an-element) -Na stronie wyświetli się "Hello, world". +Na stronie wyświetli się napis "Witaj, świecie!". ## Aktualizowanie wyrenderowanego elementu {#updating-the-rendered-element} From 6cf98a91ec4c7e05c3e6500eccc8b62f1a51e83c Mon Sep 17 00:00:00 2001 From: Arek Mazurkiewicz Date: Wed, 6 Mar 2019 10:35:37 +0100 Subject: [PATCH 16/20] Update content/docs/rendering-elements.md --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index a071152dc..a6afa1d42 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -31,7 +31,7 @@ Powiedzmy, że gdzieś w twoim pliku HTML jest `
`:
``` -Nazywamy ten węzeł drzewa DOM "korzeniem", bo wszytko, co się w nim znajduje będzie zarządzane przez React DOM. +Ten węzeł drzewa DOM nazywamy "korzeniem", bo wszystko, co się w nim znajduje będzie zarządzane przez React DOM. Aplikacje zbudowane przy pomocy samego Reacta zazwyczaj posiadają pojedynczy węzeł drzewa DOM. Jeśli natomiast integrujesz reactową aplikację z już istniejącą aplikacją, możesz mieć tyle odizolowanych "korzeni", ile chcesz. From 90b0926e7a8b153363386f52e016d8ba8338d70d Mon Sep 17 00:00:00 2001 From: Wojtek Date: Wed, 6 Mar 2019 19:57:28 +0100 Subject: [PATCH 17/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index a6afa1d42..de8b06948 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -59,7 +59,7 @@ Wywołuje on `ReactDOM.render()` z funkcji zwrotnej [`setInterval()`](https://de >**Wskazówka:** > ->W praktyce większość reactowych aplikacji wywołuje `ReactDOM.render()` tylko raz. W kolejnych rozdziałach dowiemy się, jak taki kod można wyizolować do [komponentów stanowych](/docs/state-and-lifecycle.html). +>W praktyce większość reactowych aplikacji wywołuje `ReactDOM.render()` tylko raz. W kolejnych rozdziałach dowiemy się, jak można taki kod wyizolować do [komponentów stanowych](/docs/state-and-lifecycle.html). > >Radzimy nie pomijać żadnych tematów, ponieważ kolejne rozdziały oparte są o wiedzę z poprzednich. From 03b521e4cb4f6a5b34b4df72f1a204d2ab116928 Mon Sep 17 00:00:00 2001 From: Wojtek Date: Wed, 6 Mar 2019 19:57:42 +0100 Subject: [PATCH 18/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index de8b06948..d1c4dece8 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -61,7 +61,7 @@ Wywołuje on `ReactDOM.render()` z funkcji zwrotnej [`setInterval()`](https://de > >W praktyce większość reactowych aplikacji wywołuje `ReactDOM.render()` tylko raz. W kolejnych rozdziałach dowiemy się, jak można taki kod wyizolować do [komponentów stanowych](/docs/state-and-lifecycle.html). > ->Radzimy nie pomijać żadnych tematów, ponieważ kolejne rozdziały oparte są o wiedzę z poprzednich. +>Radzimy jednak nie pomijać żadnych tematów, ponieważ kolejne rozdziały oparte są o wiedzę z poprzednich. ## React uaktualnia tylko to, co potrzebne {#react-only-updates-whats-necessary} From aee0fb30a71dd84c859e4f8e788e05406ccca509 Mon Sep 17 00:00:00 2001 From: Wojtek Date: Wed, 6 Mar 2019 19:58:07 +0100 Subject: [PATCH 19/20] Update content/docs/rendering-elements.md Co-Authored-By: arekmaz --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index d1c4dece8..9e78d674c 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -65,7 +65,7 @@ Wywołuje on `ReactDOM.render()` z funkcji zwrotnej [`setInterval()`](https://de ## React uaktualnia tylko to, co potrzebne {#react-only-updates-whats-necessary} -React DOM porównuje element i jego potomków do poprzedniego oraz stosuje aktualizacje drzewa DOM konieczne do doprowadzenia go do pożądanego stanu. +React DOM porównuje element i jego potomków do poprzedniego oraz nakłada tylko te aktualizacje drzewa DOM, które konieczne są do doprowadzenia go do pożądanego stanu. Możesz to sprawdzić przez zbadanie (ang. *inspect*) [ostatniego przykładu](codepen://rendering-elements/update-rendered-element) przy użyciu narzędzi deweloperskich: From 57f8f92552cece70f52ab1ed92994281ca148975 Mon Sep 17 00:00:00 2001 From: Arkadiusz Mazurkiewicz Date: Wed, 6 Mar 2019 20:07:35 +0100 Subject: [PATCH 20/20] Add a small translation patch --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index a071152dc..df8cef411 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -55,7 +55,7 @@ Rozważ ten przykład tykającego zegara: [](codepen://rendering-elements/update-rendered-element) -Wywołuje on `ReactDOM.render()` z funkcji zwrotnej [`setInterval()`](https://developer.mozilla.org/pl/docs/Web/API/Window/setInterval) co sekundę. +Wywołuje on `ReactDOM.render()` z wewnątrz funkcji zwrotnej [`setInterval()`](https://developer.mozilla.org/pl/docs/Web/API/Window/setInterval) co sekundę. >**Wskazówka:** >