Skip to content

Commit 9c6787e

Browse files
arekmazjakubdrozdek
authored andcommitted
Translate 'Components and Props' page (#45)
1 parent 0d5cba3 commit 9c6787e

File tree

1 file changed

+49
-49
lines changed

1 file changed

+49
-49
lines changed

content/docs/components-and-props.md

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: components-and-props
3-
title: Components and Props
3+
title: Komponenty i właściwości
44
permalink: docs/components-and-props.html
55
redirect_from:
66
- "docs/reusable-components.html"
@@ -16,57 +16,57 @@ prev: rendering-elements.html
1616
next: state-and-lifecycle.html
1717
---
1818

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).
2020

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.
2222

23-
## Function and Class Components {#function-and-class-components}
23+
## Komponenty funkcyjne i klasowe {#function-and-class-components}
2424

25-
The simplest way to define a component is to write a JavaScript function:
25+
Najprostszym sposobem na zdefiniowanie komponentu jest napisanie javascriptowej funkcji:
2626

2727
```js
2828
function Welcome(props) {
29-
return <h1>Hello, {props.name}</h1>;
29+
return <h1>Cześć, {props.name}</h1>;
3030
}
3131
```
3232

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.
3434

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):
3636

3737
```js
3838
class Welcome extends React.Component {
3939
render() {
40-
return <h1>Hello, {this.props.name}</h1>;
40+
return <h1>Cześć, {this.props.name}</h1>;
4141
}
4242
}
4343
```
4444

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.
4646

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.
4848

49-
## Rendering a Component {#rendering-a-component}
49+
## Renderowanie komponentu {#rendering-a-component}
5050

51-
Previously, we only encountered React elements that represent DOM tags:
51+
Poprzednio napotykaliśmy reactowe elementy, które reprezentowały znaczniki DOM:
5252

5353
```js
5454
const element = <div />;
5555
```
5656

57-
However, elements can also represent user-defined components:
57+
Elementy mogą również reprezentować komponenty zdefiniowane przez użytkownika:
5858

5959
```js
6060
const element = <Welcome name="Sara" />;
6161
```
6262

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.
6464

65-
For example, this code renders "Hello, Sara" on the page:
65+
Dla przykładu, poniższy kod renderuje na stronie napis "Cześć, Sara":
6666

6767
```js{1,5}
6868
function Welcome(props) {
69-
return <h1>Hello, {props.name}</h1>;
69+
return <h1>Cześć, {props.name}</h1>;
7070
}
7171
7272
const element = <Welcome name="Sara" />;
@@ -78,28 +78,28 @@ ReactDOM.render(
7878

7979
[](codepen://components-and-props/rendering-a-component)
8080

81-
Let's recap what happens in this example:
81+
Podsumujmy, co dzieje się w tym przykładzie:
8282

83-
1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
84-
2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
85-
3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
86-
4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
83+
1. Wywołujemy `ReactDOM.render()` z elementem `<Welcome name="Sara" />`.
84+
2. React wywołuje komponent `Welcome` z właściwościami `{name: 'Sara'}`.
85+
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>`.
8787

88-
>**Note:** Always start component names with a capital letter.
88+
>**Wskazówka:** Zawsze zaczynaj nazwy komponentów od dużej litery.
8989
>
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*).
9191
>
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).
9393
94-
## Composing Components {#composing-components}
94+
## Kompozycja komponentów {#composing-components}
9595

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.
9797

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`:
9999

100100
```js{8-10}
101101
function Welcome(props) {
102-
return <h1>Hello, {props.name}</h1>;
102+
return <h1>Cześć, {props.name}</h1>;
103103
}
104104
105105
function App() {
@@ -120,13 +120,13 @@ ReactDOM.render(
120120

121121
[](codepen://components-and-props/composing-components)
122122

123-
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.
124124

125-
## Extracting Components {#extracting-components}
125+
## Wyciąganie komponentów {#extracting-components}
126126

127-
Don't be afraid to split components into smaller components.
127+
Nie bój się dzielenia komponentów na mniejsze części.
128128

129-
For example, consider this `Comment` component:
129+
Rozważ poniższy komponent `Comment`:
130130

131131
```js
132132
function Comment(props) {
@@ -154,11 +154,11 @@ function Comment(props) {
154154

155155
[](codepen://components-and-props/extracting-components)
156156

157-
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.
158158

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.
160160

161-
First, we will extract `Avatar`:
161+
Najpierw wydzielmy komponent `Avatar`:
162162

163163
```js{3-6}
164164
function Avatar(props) {
@@ -171,11 +171,11 @@ function Avatar(props) {
171171
}
172172
```
173173

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`.
175175

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.
177177

178-
We can now simplify `Comment` a tiny bit:
178+
Możemy teraz uprościć nieco komponent `Comment`:
179179

180180
```js{5}
181181
function Comment(props) {
@@ -198,7 +198,7 @@ function Comment(props) {
198198
}
199199
```
200200

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:
202202

203203
```js{3-8}
204204
function UserInfo(props) {
@@ -213,7 +213,7 @@ function UserInfo(props) {
213213
}
214214
```
215215

216-
This lets us simplify `Comment` even further:
216+
To pozwala nam uprościć `Comment` jeszcze bardziej:
217217

218218
```js{4}
219219
function Comment(props) {
@@ -233,30 +233,30 @@ function Comment(props) {
233233

234234
[](codepen://components-and-props/extracting-components-continued)
235235

236-
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.
237237

238-
## Props are Read-Only {#props-are-read-only}
238+
## Właściwości są tylko do odczytu {#props-are-read-only}
239239

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`:
241241

242242
```js
243243
function sum(a, b) {
244244
return a + b;
245245
}
246246
```
247247

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.
249249

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.
251251

252252
```js
253253
function withdraw(account, amount) {
254254
account.total -= amount;
255255
}
256256
```
257257

258-
React is pretty flexible but it has a single strict rule:
258+
React jest bardzo elastyczny, ale ma jedną ścisłą zasadę:
259259

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.**
261261

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

Comments
 (0)