Skip to content

PL translation typechecking with proptypes #185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 37 commits into from
Feb 11, 2020
Merged
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
0f74f59
Update typechecking-with-proptypes.md
stepek Feb 3, 2020
994c7cc
Finishing typechecking-with-proptypes translation
stepek Feb 3, 2020
125199a
Add missing code translation
stepek Feb 3, 2020
d2a7e40
Fix typos
stepek Feb 3, 2020
1f0445a
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
b0de438
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
163bc8c
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
7b1ed67
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
64af140
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
94060d6
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
340118d
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
99d9ac6
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
15fa155
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
959c64b
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
e8ac3a2
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
d13d8d3
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
826d83d
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
e784def
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
933e161
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
79b9619
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
9943230
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
6d27ed3
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
e9bd376
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
39ed244
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
a704c55
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
20c8770
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
52b04d8
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
cf514a7
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
068b18b
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
b44b682
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
f5b1c54
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
ed13432
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
01d53a9
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
6a3f0a3
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
7319af3
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
d3db0bb
Update content/docs/typechecking-with-proptypes.md
stepek Feb 3, 2020
8be36a3
Added title translation
stepek Feb 11, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 49 additions & 53 deletions content/docs/typechecking-with-proptypes.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
id: typechecking-with-proptypes
title: Typechecking With PropTypes
title: Sprawdzeniem typów z wykorzystaniem PropTypes
permalink: docs/typechecking-with-proptypes.html
redirect_from:
- "docs/react-api.html#typechecking-with-proptypes"
---

> Note:
> Uwaga:
>
> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types).
> Z wersją React v15.5 `React.PropTypes` zostało przeniesione do innej paczki. Zamiast importować z paczki Reacta, używaj [biblioteki `prop-types`](https://www.npmjs.com/package/prop-types).
>
>We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) to automate the conversion.
> Dla ułatwienia migracji przygotowaliśmy [skrypt codemod](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes).

As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like [Flow](https://flow.org/) or [TypeScript](https://www.typescriptlang.org/) to typecheck your whole application. But even if you don't use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special `propTypes` property:
Wraz ze wzrostem twojej aplikacji możesz wyłapywać więcej błędów, korzystając ze sprawdzania typów. Dla niektórych aplikacji możesz korzystać z rozszerzeń JavaScriptu do sprawdzenia typów w całej aplikacji, takich jak [Flow](https://flow.org/) lub [TypeScript](https://www.typescriptlang.org/). Nawet jeśli z nich nie korzystasz, możesz skorzystać ze sprawdzania typów wbudowanego w Reacta. By rozpocząć sprawdzanie typów właściwości w komponencie, możesz dodać do komponentu specjalną właściwość `propTypes`.

```javascript
import PropTypes from 'prop-types';

class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
<h1>Witaj, {this.props.name}</h1>
);
}
}
Expand All @@ -29,19 +29,18 @@ Greeting.propTypes = {
name: PropTypes.string
};
```

`PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode.
`PropTypes` eksportuje walidatory, które mogą być używane do sprawdzania poprawności danych wejściowych. W tym przypadku wykorzystujemy `PropTypes.string`. Kiedy wartość przekazanej właściwości będzie nieprawidłowego typu, zostanie wyświetlone ostrzeżenie w konsoli javascriptowej. Ze względu na wydajność, `propTypes` są sprawdzane tylko w trybie deweloperskim.

### PropTypes {#proptypes}

Here is an example documenting the different validators provided:
Oto przykład dokumentujący różne dostarczone walidatory:

```javascript
import PropTypes from 'prop-types';

MyComponent.propTypes = {
// You can declare that a prop is a specific JS type. By default, these
// are all optional.
// Możesz zadeklarować, że właściwość będzie określonego typu javascriptowego.
// Domyślnie, wszystkie są opcjonalne
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
Expand All @@ -50,94 +49,92 @@ MyComponent.propTypes = {
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
// Wszystko, co może być wyrenderowane: liczby, łańcuchy znaków, elementy lub tablice
// (lub fragmenty) zawierające te typy.
optionalNode: PropTypes.node,

// A React element.
// Element reactowy.
optionalElement: PropTypes.element,

// A React element type (ie. MyComponent).
// Typ komponenetu reactowego (np. MyComponent).
optionalElementType: PropTypes.elementType,

// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
// Możesz także zadeklarować właściwość, która będzie instancją klasy.
// Wykorzystujemy do tego operator instanceof z JavaScriptu.
optionalMessage: PropTypes.instanceOf(Message),

// You can ensure that your prop is limited to specific values by treating
// it as an enum.
// Możesz się upewnić, czy właściwość jest ograniczona do określonych wartości
optionalEnum: PropTypes.oneOf(['News', 'Photos']),

// An object that could be one of many types
// Właściwość może też mieć wiele typów
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),

// An array of a certain type
// Tablica zawierająca elementy określonego typu
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

// An object with property values of a certain type
// Obiekt zawierający wartości określonego typu
optionalObjectOf: PropTypes.objectOf(PropTypes.number),

// An object taking on a particular shape
// Obiekt zawierający określone pola
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),

// An object with warnings on extra properties
// Obiekt zawierający tylko wskazane pola
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number
}),

// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
// Możesz dodać do każdego z powyższych `isRequired,
// aby sprawdzić, czy podana właściwość została zdefiniowana.
requiredFunc: PropTypes.func.isRequired,

// A value of any data type
// Wartość dowolnego typu danych.
requiredAny: PropTypes.any.isRequired,

// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
// Możesz też utworzyć niestandardowy walidator. Powinien on zwracać obiekt `Error`,
// jeśli sprawdzenie zakończy się niepowodzeniem. Nie powinien wywoływać `console.warn`
// ani rzucać wyjątku, ponieważ nie będzie działał wewnątrz `oneOfType`.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
'Niepoprawna właściwość `' + propName + '` przekazana do ' +
' `' + componentName + '`. Walidacja zakończona niepowodzeniem.'
);
}
},

// You can also supply a custom validator to `arrayOf` and `objectOf`.
// It should return an Error object if the validation fails. The validator
// will be called for each key in the array or object. The first two
// arguments of the validator are the array or object itself, and the
// current item's key.
// Możesz także przekazać niestandardowy walidator do `arrayOf` i `objectOf`.
// Powinien on zwracać obiekt `Error`, jeśli sprawdzenie zakończy się niepowodzeniem.
// Walidator będzie wywołany dla każdego klucza w tablicy lub obiekcie.
// Pierwsze dwa argumenty walidatora to walidowana tablica lub obiekt oraz klucz bieżącego elementu.
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
'Niepoprawna właściwość `' + propFullName + '` przekazana do ' +
' `' + componentName + '`. Walidacja zakończona niepowodzeniem.'
);
}
})
};
```

### Requiring Single Child {#requiring-single-child}
### Wymaganie dokładnie jednego potomka {#requiring-single-child}

With `PropTypes.element` you can specify that only a single child can be passed to a component as children.
Wykorzystując `PropTypes.element` możesz sprawdzić, czy tylko do komponentu przekazano dokładnie jednego potomka.

```javascript
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
render() {
// This must be exactly one element or it will warn.
// Musi zawierać dokładnie jeden element. W przeciwnym wypadku zostanie wyświetlone ostrzeżenie.
const children = this.props.children;
return (
<div>
Expand All @@ -152,45 +149,44 @@ MyComponent.propTypes = {
};
```

### Default Prop Values {#default-prop-values}
### Domyślne wartości właściwości {#default-prop-values}

You can define default values for your `props` by assigning to the special `defaultProps` property:
Możesz zdefiniować domyślne wartości dla właściwości przez przypisanie specjalnej właściwości `defaultProps`:

```javascript
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
<h1>Witaj, {this.props.name}</h1>
);
}
}

// Specifies the default values for props:
// Definiuje domyślne wartości dla właściwości:
Greeting.defaultProps = {
name: 'Stranger'
name: 'obcy'
};

// Renders "Hello, Stranger":
// Renderuje "Witaj, obcy":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
```

If you are using a Babel transform like [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , you can also declare `defaultProps` as static property within a React component class. This syntax has not yet been finalized though and will require a compilation step to work within a browser. For more information, see the [class fields proposal](https://github.com/tc39/proposal-class-fields).
Jeśli używasz babelowego transformatora [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/), możesz zadeklarować `defaultProps` jako statyczną właściwość klasy komponentu reactowego. Ta składnia jeszcze nie została ukończona i do działania w przeglądarce będzie wymagać etapu kompilacji. Aby uzyskać więcej informacji, zobacz ["class fields proposal"](https://github.com/tc39/proposal-class-fields).

```javascript
class Greeting extends React.Component {
static defaultProps = {
name: 'stranger'
name: 'obcy'
}

render() {
return (
<div>Hello, {this.props.name}</div>
<div>Witaj, {this.props.name}</div>
)
}
}
```

The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`.
Właściwość `defaultProps` posłuży do zapewnienia wartości dla `this.props.name`, jeśli nie zostanie ona określona przez komponent nadrzędny. Sprawdzanie typu `propTypes` następuje po rozwiązaniu `defaultProps`, więc sprawdzanie typu będzie miało zastosowanie także do `defaultProps`.