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/components-and-props.md
+49-49Lines changed: 49 additions & 49 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
id: components-and-props
3
-
title: Components and Props
3
+
title: Komponenty i właściwości
4
4
permalink: docs/components-and-props.html
5
5
redirect_from:
6
6
- "docs/reusable-components.html"
@@ -16,57 +16,57 @@ prev: rendering-elements.html
16
16
next: state-and-lifecycle.html
17
17
---
18
18
19
-
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a [detailed component API reference here](/docs/react-component.html).
19
+
Komponenty pozwalają podzielić interfejs użytkownika na niezależne, pozwalające na ponowne użycie części i myśleć o każdej z nich osobno. Ta strona wprowadza do pojęcia komponentów. W osobnym rozdziale opisaliśmy [szczegółową dokumentację API komponentów](/docs/react-component.html).
20
20
21
-
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
21
+
Koncepcyjnie, komponenty są jak javascriptowe funkcje. Przyjmują one arbitralne wartości na wejściu (nazywane "właściwościami" (ang. *props*)) i zwracają reactowe elementy opisujące, co powinno się pojawić na ekranie.
22
22
23
-
## Function and Class Components {#function-and-class-components}
23
+
## Komponenty funkcyjne i klasowe {#function-and-class-components}
24
24
25
-
The simplest way to define a component is to write a JavaScript function:
25
+
Najprostszym sposobem na zdefiniowanie komponentu jest napisanie javascriptowej funkcji:
26
26
27
27
```js
28
28
functionWelcome(props) {
29
-
return<h1>Hello, {props.name}</h1>;
29
+
return<h1>Cześć, {props.name}</h1>;
30
30
}
31
31
```
32
32
33
-
This function is a valid React component because it accepts a single "props" (which stands for properties) object argument with data and returns a React element. We call such components "function components" because they are literally JavaScript functions.
33
+
Ta funkcja jest poprawnym reactowym komponentem, ponieważ przyjmuje pojedynczy argument "props" (który oznacza "właściwości", z ang. *properties*), będący obiektem z danymi, i zwraca reactowy element. Takie komponenty nazywamy "komponentami funkcyjnymi", gdyż są one dosłownie javascriptowymi funkcjami.
34
34
35
-
You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:
35
+
Do zdefiniowania komponentu możesz również użyć [klasy ze standardu ES6](https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Classes):
36
36
37
37
```js
38
38
classWelcomeextendsReact.Component {
39
39
render() {
40
-
return<h1>Hello, {this.props.name}</h1>;
40
+
return<h1>Cześć, {this.props.name}</h1>;
41
41
}
42
42
}
43
43
```
44
44
45
-
The above two components are equivalent from React's point of view.
45
+
Obydwa powyższe komponenty są równoważne z punktu widzenia Reacta.
46
46
47
-
Classes have some additional features that we will discuss in the [next sections](/docs/state-and-lifecycle.html). Until then, we will use function components for their conciseness.
47
+
Klasy mają kilka dodatkowych cech, które omówimy w [kolejnych rozdziałach](/docs/state-and-lifecycle.html). Do tego czasu będziemy używać komponentów funkcyjnych ze względu na ich zwięzły zapis.
Previously, we only encountered React elements that represent DOM tags:
51
+
Poprzednio napotykaliśmy reactowe elementy, które reprezentowały znaczniki DOM:
52
52
53
53
```js
54
54
constelement=<div />;
55
55
```
56
56
57
-
However, elements can also represent user-defined components:
57
+
Elementy mogą również reprezentować komponenty zdefiniowane przez użytkownika:
58
58
59
59
```js
60
60
constelement=<Welcome name="Sara"/>;
61
61
```
62
62
63
-
When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".
63
+
Kiedy React widzi element reprezentujący komponent zdefiniowany przez użytkownika, przekazuje do niego JSX-owe atrybuty jako jeden obiekt. Obiekt ten nazywamy "właściwościami" komponentu.
64
64
65
-
For example, this code renders "Hello, Sara" on the page:
65
+
Dla przykładu, poniższy kod renderuje na stronie napis "Cześć, Sara":
3.Nasz komponent `Welcome`jako wynik zwraca element `<h1>Cześć, Sara</h1>`.
86
+
4. React DOM w optymalny sposób aktualizuje drzewo DOM, aby odpowiadało elementowi `<h1>Cześć, Sara</h1>`.
87
87
88
-
>**Note:**Always start component names with a capital letter.
88
+
>**Wskazówka:**Zawsze zaczynaj nazwy komponentów od dużej litery.
89
89
>
90
-
>React treats components starting with lowercase letters as DOM tags. For example, `<div />`represents an HTML div tag, but `<Welcome />`represents a component and requires`Welcome`to be in scope.
90
+
>React traktuje komponenty zaczynające się od małej litery jako tagi drzewa DOM. Na przykład, `<div />`reprezentuje HTML-owy znacznik 'div', ale już `<Welcome />`reprezentuje komponent i wymaga, aby`Welcome`było w zasięgu (ang. *scope*).
91
91
>
92
-
>To learn more about the reasoning behind this convention, please read [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
92
+
>Aby dowiedzieć się więcej o uzasadnieniu tej konwencji, przeczytaj [dogłębną analizę składni JSX](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
93
93
94
-
## Composing Components {#composing-components}
94
+
## Kompozycja komponentów {#composing-components}
95
95
96
-
Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
96
+
Komponenty przy zwracaniu wyniku mogą mogą odwoływać się do innych komponentów. Pozwala to używać tej samej abstrakcji komponentu na dowolnym poziomie szczegółowości. Przycisk, formularz, okno dialogowe, ekran - w aplikacjach reactowych tego typu składniki są zwykle reprezentowane przez dedykowane komponenty.
97
97
98
-
For example, we can create an `App` component that renders `Welcome` many times:
98
+
Możemy dla przykładu stworzyć komponent `App`, który wielokrotnie renderuje komponent `Welcome`:
Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like`Button` and gradually work your way to the top of the view hierarchy.
123
+
Nowe aplikacje reactowe na samej górze drzewa zazwyczaj renderują pojedynczy komponent `App`. Jeśli jednak musisz zintegrować Reacta z istniejącą aplikacją, możesz zacząć od samego dołu, dodając niewielkie komponenty (np.`Button`) i stopniowo przepisywać całą strukturę aż do samej góry.
It accepts `author` (an object), `text`(a string), and `date`(a date) as props, and describes a comment on a social media website.
157
+
Przyjmuje on obiekt `author`, napis `text`i datę `date`jako właściwości i zwraca strukturę opisującą komentarz na portalu mediów społecznościowych.
158
158
159
-
This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.
159
+
Zmiana tego komponentu czy ponowne użycie jego poszczególnych części może okazać się skomplikowane z powodu całego tego zagnieżdżenia. Rozbijmy go zatem na kilka mniejszych komponentów.
160
160
161
-
First, we will extract`Avatar`:
161
+
Najpierw wydzielmy komponent`Avatar`:
162
162
163
163
```js{3-6}
164
164
function Avatar(props) {
@@ -171,11 +171,11 @@ function Avatar(props) {
171
171
}
172
172
```
173
173
174
-
The `Avatar`doesn't need to know that it is being rendered inside a `Comment`. This is why we have given its prop a more generic name: `user`rather than`author`.
174
+
`Avatar`nie musi wiedzieć, że jest renderowany wewnątrz komponentu `Comment`. Dlatego też daliśmy jego właściwości bardziej ogólną nazwę `user`zamiast`author`.
175
175
176
-
We recommend naming props from the component's own point of view rather than the context in which it is being used.
176
+
Zalecamy nadawanie nazw właściwościom z punktu widzenia komponentu, a nie kontekstu, w którym jest używany.
177
177
178
-
We can now simplify `Comment` a tiny bit:
178
+
Możemy teraz uprościć nieco komponent `Comment`:
179
179
180
180
```js{5}
181
181
function Comment(props) {
@@ -198,7 +198,7 @@ function Comment(props) {
198
198
}
199
199
```
200
200
201
-
Next, we will extract a `UserInfo` component that renders an `Avatar`next to the user's name:
201
+
Następnie wydzielmy komponent `UserInfo`, który wyrenderuje `Avatar`obok nazwy użytkownika:
Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be a reusable component.
236
+
Wyciąganie komponentów może z początku wydawać się żmudnym zajęciem, ale posiadanie palety pozwalających na ponowne użycie komponentów jest opłacalne w większych aplikacjach. Dobrą praktyczną zasadą jest, że jeśli część twojego interfejsu użytkownika jest używana wielokrotnie (np. `Button`, `Panel`, `Avatar`) lub jest ona dostatecznie skomplikowana sama w sobie (np. `App`, `FeedStory`, `Comment`), jest ona dobrym kandydatem do stania się komponentem wielokrotnego użytku.
237
237
238
-
## Props are Read-Only {#props-are-read-only}
238
+
## Właściwości są tylko do odczytu {#props-are-read-only}
239
239
240
-
Whether you declare a component [as a function or a class](#function-and-class-components), it must never modify its own props. Consider this `sum` function:
240
+
Bez względu na to, czy zadeklarujesz komponent [jako funkcję czy klasę](#function-and-class-components), nie może on nigdy modyfikować swoich właściwości. Rozważ następującą funkcję `sum`:
241
241
242
242
```js
243
243
functionsum(a, b) {
244
244
return a + b;
245
245
}
246
246
```
247
247
248
-
Such functions are called ["pure"](https://en.wikipedia.org/wiki/Pure_function)because they do not attempt to change their inputs, and always return the same result for the same inputs.
248
+
Funkcje tego typu nazywane są ["czystymi"](https://en.wikipedia.org/wiki/Pure_function)(ang. *pure function*), dlatego że nie próbują one zmieniać swoich argumentów i zawsze zwracają ten sam wynik dla tych samych argumentów.
249
249
250
-
In contrast, this function is impure because it changes its own input:
250
+
W przeciwieństwie do poprzedniej funkcji, ta poniżej nie jest "czysta", ponieważ zmienia swój argument.
251
251
252
252
```js
253
253
functionwithdraw(account, amount) {
254
254
account.total-= amount;
255
255
}
256
256
```
257
257
258
-
React is pretty flexible but it has a single strict rule:
258
+
React jest bardzo elastyczny, ale ma jedną ścisłą zasadę:
259
259
260
-
**All React components must act like pure functions with respect to their props.**
260
+
**Wszytkie komponenty muszą zachowywać się jak czyste funkcje w odniesieniu do ich właściwości.**
261
261
262
-
Of course, application UIs are dynamic and change over time. In the [next section](/docs/state-and-lifecycle.html), we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
262
+
Rzecz jasna, interfejsy użytkownika w aplikacjach są zwykle dynamiczne, zmieniają się w czasie. W [kolejnym rozdziale](/docs/state-and-lifecycle.html) wprowadzimy nowe pojęcie "stanu". Stan pozwala komponentom reactowym na zmianę swojego wyniku w czasie, w odpowiedzi na akcje użytkownika, żądania sieciowe itp. bez naruszania powyższej zasady.
0 commit comments