You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/handling-events.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -91,11 +91,7 @@ ReactDOM.render(
91
91
);
92
92
```
93
93
94
-
<<<<<<< HEAD
95
-
[**Przetestuj kod na CodePen**](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)
96
-
=======
97
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
98
-
>>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
94
+
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
99
95
100
96
Należy zwrócić szczególną uwagę na znaczenie `this` funkcjach zwrotnych (ang. *callbacks*) używanych w JSX. W JavaScripcie metody klasy nie są domyślnie [dowiązane](https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Functions/Funkcje_strzalkowe) do instancji. Jeśli zapomnisz dowiązać metodę `this.handleClick` i przekażesz ją jako atrybut `onClick`, to `this` przy wywołaniu będzie miało wartość `undefined`.
Copy file name to clipboardExpand all lines: content/docs/state-and-lifecycle.md
+7-35Lines changed: 7 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,11 +29,7 @@ function tick() {
29
29
setInterval(tick, 1000);
30
30
```
31
31
32
-
<<<<<<< HEAD
33
-
[**Przetestuj kod na CodePen**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
34
-
=======
35
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwoJZk?editors=0010)
36
-
>>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
32
+
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/gwoJZk?editors=0010)
37
33
38
34
W tym rozdziale dowiemy się, jak sprawić, by komponent `Clock` był w pełni hermetyczny i zdatny do wielokrotnego użytku. Wyposażymy go we własny timer, który będzie aktualizował się co sekundę.
39
35
@@ -59,11 +55,7 @@ function tick() {
59
55
setInterval(tick, 1000);
60
56
```
61
57
62
-
<<<<<<< HEAD
63
-
[**Przetestuj kod na CodePen**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
64
-
=======
65
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
66
-
>>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
58
+
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
67
59
68
60
Brakuje jeszcze fragmentu, który spełniałby kluczowe założenie: inicjalizacja timera i aktualizowanie UI co sekundę powinny być zaimplementowane w komponencie `Clock`.
69
61
@@ -109,11 +101,7 @@ class Clock extends React.Component {
109
101
}
110
102
```
111
103
112
-
<<<<<<< HEAD
113
-
[**Przetestuj kod na CodePen**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
114
-
=======
115
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRGpo?editors=0010)
116
-
>>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
104
+
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/zKRGpo?editors=0010)
117
105
118
106
Komponent `Clock` przestał już być funkcją i od teraz jest klasą.
119
107
@@ -205,11 +193,7 @@ ReactDOM.render(
205
193
);
206
194
```
207
195
208
-
<<<<<<< HEAD
209
-
[**Przetestuj kod na CodePen**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
210
-
=======
211
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
212
-
>>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
196
+
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
213
197
214
198
Teraz sprawimy, by komponent `Clock` uruchomił własny timer i aktualizował go co sekundę.
215
199
@@ -318,11 +302,7 @@ ReactDOM.render(
318
302
);
319
303
```
320
304
321
-
<<<<<<< HEAD
322
-
[**Przetestuj kod na CodePen**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
323
-
=======
324
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
325
-
>>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
305
+
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
326
306
327
307
Teraz timer powinien już tykać co sekundę.
328
308
@@ -457,11 +437,7 @@ function FormattedDate(props) {
457
437
}
458
438
```
459
439
460
-
<<<<<<< HEAD
461
-
[**Przetestuj kod na CodePen**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
462
-
=======
463
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010)
464
-
>>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
440
+
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010)
465
441
466
442
Taki przepływ danych nazywany jest powszechnie jednokierunkowym (ang. *unidirectional*) lub "z góry na dół" (ang. *top-down*). Stan jest zawsze własnością konkretnego komponentu i wszelkie dane lub części UI, powstałe w oparciu o niego, mogą wpłynąć jedynie na komponenty znajdujące się "poniżej" w drzewie.
467
443
@@ -486,11 +462,7 @@ ReactDOM.render(
486
462
);
487
463
```
488
464
489
-
<<<<<<< HEAD
490
-
[**Przetestuj kod na CodePen**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
491
-
=======
492
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010)
493
-
>>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
465
+
[**Przetestuj kod na CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010)
494
466
495
467
Każdy `Clock` tworzy swój własny timer i aktualizuje go niezależnie od pozostałych.
Copy file name to clipboardExpand all lines: content/docs/thinking-in-react.md
+3-15Lines changed: 3 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -61,11 +61,7 @@ Teraz kiedy już określiliśmy, które z elementów projektu graficznego mają
61
61
62
62
## Krok 2: Zbuduj wersję statyczną w Reakcie {#step-2-build-a-static-version-in-react}
63
63
64
-
<<<<<<< HEAD
65
-
<pdata-height="600"data-theme-id="0"data-slug-hash="BwWzwm"data-default-tab="js"data-user="lacker"data-embed-version="2"class="codepen">Zobacz kod dla podrozdziału<ahref="https://codepen.io/gaearon/pen/BwWzwm">Myślenie reactowe: Krok 2"</a> na <ahref="http://codepen.io">CodePen</a>.</p>
66
-
=======
67
-
<pdata-height="600"data-theme-id="0"data-slug-hash="BwWzwm"data-default-tab="js"data-user="lacker"data-embed-version="2"class="codepen">See the Pen <ahref="https://codepen.io/gaearon/pen/BwWzwm">Thinking In React: Step 2</a> on <ahref="https://codepen.io">CodePen</a>.</p>
68
-
>>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
64
+
<pdata-height="600"data-theme-id="0"data-slug-hash="BwWzwm"data-default-tab="js"data-user="lacker"data-embed-version="2"class="codepen">Zobacz kod dla podrozdziału <ahref="https://codepen.io/gaearon/pen/BwWzwm">"Myślenie reactowe: Krok 2"</a> na <ahref="https://codepen.io">CodePen</a>.</p>
Skoro wiemy już, jak wygląda hierarchia naszych komponentów, możemy zacząć ją wdrażać. Budowę aplikacji najłatwiej jest zacząć od od wersji statycznej, tzn. takiej która wyrenderuje interfejs użytkownika na podstawie naszego modelu danych, ale nie będzie zawierała żadnych elementów interaktywnych. Dobrze jest rozdzielić te procesy, ponieważ budowa wersji statycznej wymaga więcej pisania niż myślenia, podczas gdy dodawanie interaktywności wymaga więcej myślenia niż pisania. Za chwilę zobaczysz dlaczego.
@@ -109,13 +105,9 @@ Zatem ostatecznie nasz stan przestawia się następująco:
109
105
110
106
## Krok 4: Określ, gdzie powinien się mieścić stan {#step-4-identify-where-your-state-should-live}
111
107
112
-
<pdata-height="600"data-theme-id="0"data-slug-hash="qPrNQZ"data-default-tab="js"data-user="lacker"data-embed-version="2"class="codepen">Zobacz kod dla podrozdziału<ahref="https://codepen.io/gaearon/pen/qPrNQZ">"Myślenie reactowe: Krok 4"</a> na <ahref="http://codepen.io">CodePen</a>.</p>
108
+
<pdata-height="600"data-theme-id="0"data-slug-hash="qPrNQZ"data-default-tab="js"data-user="lacker"data-embed-version="2"class="codepen">Zobacz kod dla podrozdziału<ahref="https://codepen.io/gaearon/pen/qPrNQZ">"Myślenie reactowe: Krok 4"</a> na <ahref="https://codepen.io">CodePen</a>.</p>
113
109
114
-
<<<<<<< HEAD
115
110
Mamy zatem określony minimalny zestaw danych stanu aplikacji. Teraz musimy określić, który z naszych komponentów ulega zmianom, czyli do którego komponentu *należy* stan.
116
-
=======
117
-
<pdata-height="600"data-theme-id="0"data-slug-hash="qPrNQZ"data-default-tab="js"data-user="lacker"data-embed-version="2"class="codepen">See the Pen <ahref="https://codepen.io/gaearon/pen/qPrNQZ">Thinking In React: Step 4</a> on <ahref="https://codepen.io">CodePen</a>.</p>
118
-
>>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
119
111
120
112
Pamiętaj: Dane w Reakcie płyną tylko w jedną stronę - z góry w dół hierarchii komponentów. Przynależność stanu do danego komponentu nie jest sprawą oczywistą i *często przysparza problemów na początku pracy z Reactem*. Aby to dobrze zrozumieć, postępuj zgodnie z następującymi wskazówkami:
121
113
@@ -138,13 +130,9 @@ Teraz widać już, jak będzię działała nasza aplikacja: ustawiamy `filterTex
138
130
139
131
## Krok 5: Dodaj przepływ danych w drugą stronę {#step-5-add-inverse-data-flow}
140
132
141
-
<pdata-height="600"data-theme-id="0"data-slug-hash="LzWZvb"data-default-tab="js,result"data-user="rohan10"data-embed-version="2"data-pen-title="Thinking In React: Step 5"class="codepen">Zobacz kod dla podrozdziału<ahref="https://codepen.io/gaearon/pen/LzWZvb">"Myślenie reactowe: Krok 5"</a> na <ahref="http://codepen.io">CodePen</a>.</p>
133
+
<pdata-height="600"data-theme-id="0"data-slug-hash="LzWZvb"data-default-tab="js,result"data-user="rohan10"data-embed-version="2"data-pen-title="Myślenie reactowe: Krok 5"class="codepen">Zobacz kod dla podrozdziału<ahref="https://codepen.io/gaearon/pen/LzWZvb">"Myślenie reactowe: Krok 5"</a> na <ahref="https://codepen.io">CodePen</a>.</p>
142
134
143
-
<<<<<<< HEAD
144
135
Jak dotąd zbudowaliśmy aplikację, która poprawnie wyświetla informacje dostarczone przez atrybuty i stan spływające w dół hierarchii komponentów. Nadszedł czas aby umożliwić przepływ danych w przeciwnym kierunku: komponenty formularza głęboko wewnątrz hierarchii muszą mieć możliwość aktualizowania stanu `FilterableProductTable`
145
-
=======
146
-
<pdata-height="600"data-theme-id="0"data-slug-hash="LzWZvb"data-default-tab="js,result"data-user="rohan10"data-embed-version="2"data-pen-title="Thinking In React: Step 5"class="codepen">See the Pen <ahref="https://codepen.io/gaearon/pen/LzWZvb">Thinking In React: Step 5</a> on <ahref="https://codepen.io">CodePen</a>.</p>
147
-
>>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
148
136
149
137
W Reakcie ten przepływ danych jest jawny. Pozwala to łatwo zobaczyć działanie aplikacji, ale zarazem wymaga trochę więcej kodu niż tradycyjne wiązanie dwukierunkowe (ang. *two-way binding*).
0 commit comments