From b20f9d44156364006acc589684f6eb42bf6dd6c8 Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Thu, 14 Feb 2019 10:27:48 +0400 Subject: [PATCH 01/26] Typechecking with PropTypes --- content/docs/typechecking-with-proptypes.md | 95 +++++++++++---------- 1 file changed, 50 insertions(+), 45 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 4004e7820..f2380ab2c 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -1,18 +1,18 @@ --- id: typechecking-with-proptypes -title: Typechecking With PropTypes +title: Проверка типов с помощью PropTypes permalink: docs/typechecking-with-proptypes.html redirect_from: - "docs/react-api.html#typechecking-with-proptypes" --- -> Note: +> Примечание: > -> `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). +> С версии React v15.5 `React.PropTypes` были вынесены в отдельный пакет. Так что используйте [библиотеку `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. +> Вы можете использовать [codemod скрипт](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) для обновления вашего кода. -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: +По мере роста вашего приложения вы можете выловить много ошибок с помощью проверки типов. Для некоторых приложений вы можете использовать такие расширения JavaScript как [Flow](https://flow.org/) и [TypeScript](https://www.typescriptlang.org/) для проверки типов во всем коде. Но, даже если вы ими не пользуетесь, React предоставляет встроенные возможности для проверки типов. Для запуска этой проверка на пропсах компонента вам нужно использовать специальное свойство `propTypes`: ```javascript import PropTypes from 'prop-types'; @@ -20,7 +20,7 @@ import PropTypes from 'prop-types'; class Greeting extends React.Component { render() { return ( -

Hello, {this.props.name}

+

Привет, {this.props.name}

); } } @@ -30,18 +30,18 @@ Greeting.propTypes = { }; ``` -`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` предоставляет ряд валидаторов, которые могут могут использоваться для проверки, что получаемые данные валидны. В этом примере мы используем `PropTypes.string`. Когда какое-то свойство имееет невалидное значение, в консоли будет выведено предупреждение. По соображениям производительности `propTypes` проверяются только в режиме разработки. ### PropTypes {#proptypes} -Here is an example documenting the different validators provided: +Пример использования возможных валидаторов: ```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. + // Вы можете объявлять свойства конкретного JS типа. + // По-умолчанию это не обязательно. optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, @@ -50,64 +50,68 @@ MyComponent.propTypes = { optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, - // Anything that can be rendered: numbers, strings, elements or an array - // (or fragment) containing these types. + // Все, что может быть отренедерено: + // числа, строки, элементы или массивы + // (или фрагменты) содержащие эти типы optionalNode: PropTypes.node, - // A React element. + // React-элемент optionalElement: PropTypes.element, - // You can also declare that a prop is an instance of a class. This uses - // JS's instanceof operator. + // Можно указать, что пропс должен быть экземпляром класса + // Это будет использовать проверку с `instanceof` optionalMessage: PropTypes.instanceOf(Message), - // You can ensure that your prop is limited to specific values by treating - // it as an enum. + // Вы можете задать ограничение конкретными значениями + // при помощи перечисления optionalEnum: PropTypes.oneOf(['News', 'Photos']), - // An object that could be one of many types + // Объект, одного из нескольких типов optionalUnion: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message) ]), - // An array of a certain type + // Массив объектов конкретного типа optionalArrayOf: PropTypes.arrayOf(PropTypes.number), - // An object with property values of a certain type + // Объект, со свойствами конкретного типа optionalObjectOf: PropTypes.objectOf(PropTypes.number), - // An object taking on a particular shape + // Объект, подходящий под маску optionalObjectWithShape: PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }), - // You can chain any of the above with `isRequired` to make sure a warning - // is shown if the prop isn't provided. + // Вы можете добавить к указанию типа флаг `isRequired`, + // чтобы показывать предупреждение, + // если свойство не передано requiredFunc: PropTypes.func.isRequired, - // A value of any data type + // Значене любого типа 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`. + // Можно задать свой собственный валидатор. + // Он должен возращать объект `Error` при ошибке валидации. + // Не используйте `console.warn` или `throw` + // - это не будет работать внутри `oneOfType` customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error( - 'Invalid prop `' + propName + '` supplied to' + - ' `' + componentName + '`. Validation failed.' + 'Свойство `' + propName + '` компонента' + + ' `' + componentName + '` Имеем неправильное значение' ); } }, - // 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. + // Можно задать свой валидатор для `arrayOf` и `objectOf`. + // Он должен возвращать объект Error при ошибке валидации. + // Валидатор будет вызван для каждого элемента в массиве + // или для каждого свойства объекта. + // Первые два параметра валидатора + // - это массив или объект и ключ текущего элемента customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { if (!/matchme/.test(propValue[key])) { return new Error( @@ -119,16 +123,17 @@ MyComponent.propTypes = { }; ``` -### Requiring Single Child {#requiring-single-child} +### Ограничение на один дочерний компонент {#requiring-single-child} -With `PropTypes.element` you can specify that only a single child can be passed to a component as children. +С помощью `PropTypes.element` вы можете указать, что в качестве дочернего может быть передан только один элемент. ```javascript import PropTypes from 'prop-types'; class MyComponent extends React.Component { render() { - // This must be exactly one element or it will warn. + // Это должен быть ровно один элемент. + // Иначе вы увидете предупреждение const children = this.props.children; return (
@@ -143,22 +148,22 @@ MyComponent.propTypes = { }; ``` -### Default Prop Values {#default-prop-values} +### Значения свойств по-умолчанию {#default-prop-values} -You can define default values for your `props` by assigning to the special `defaultProps` property: +Вы можете задать значения по-умолчанию для ваших `props` с помощью специального свойства `defaultProps`: ```javascript class Greeting extends React.Component { render() { return ( -

Hello, {this.props.name}

+

Привет, {this.props.name}

); } } // Specifies the default values for props: Greeting.defaultProps = { - name: 'Stranger' + name: 'Незнакомец' }; // Renders "Hello, Stranger": @@ -168,20 +173,20 @@ ReactDOM.render( ); ``` -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). +Если вы используете одну из трансформаций Babel, вроде [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , то вы можете задать `defaultProps` как статическое свойство класса (для компонента-наследника от `React.Component`). Этот синтаксис еще не утвержден, так что для его работы в браузере нужна компиляция. Подробнее смотрите в [предложении о полях класса](https://github.com/tc39/proposal-class-fields). ```javascript class Greeting extends React.Component { static defaultProps = { - name: 'stranger' + name: 'незнакомец' } render() { return ( -
Hello, {this.props.name}
+
Привет, {this.props.name}
) } } ``` -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`. +Определение `defaultProps` может быть использовано, чтобы гарантировать, что `this.props.name` имеет значение, даже если оно не было задано из родительского компонента. Сначала применяются значения по-умолчанию, заданные в `defaultProps`. После этого запускается проверка типов с помощью `propTypes`. Так что валидация типов распространяется и на значения по-умолчанию. From bbc880f620c3ddb3c562b7b541a84308cc50cb2c Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Thu, 14 Feb 2019 10:35:39 +0400 Subject: [PATCH 02/26] Typechecking with PropTypes --- content/docs/typechecking-with-proptypes.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index f2380ab2c..ea3816529 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -12,7 +12,7 @@ redirect_from: > > Вы можете использовать [codemod скрипт](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) для обновления вашего кода. -По мере роста вашего приложения вы можете выловить много ошибок с помощью проверки типов. Для некоторых приложений вы можете использовать такие расширения JavaScript как [Flow](https://flow.org/) и [TypeScript](https://www.typescriptlang.org/) для проверки типов во всем коде. Но, даже если вы ими не пользуетесь, React предоставляет встроенные возможности для проверки типов. Для запуска этой проверка на пропсах компонента вам нужно использовать специальное свойство `propTypes`: +По мере роста вашего приложения вы можете выловить много ошибок с помощью проверки типов. Для этого можно использовать расширения JavaScript вроде [Flow](https://flow.org/) и [TypeScript](https://www.typescriptlang.org/). Но, даже если вы ими не пользуетесь, React предоставляет встроенные возможности для проверки типов. Для запуска этой проверки на пропсах компонента вам нужно использовать специальное свойство `propTypes`: ```javascript import PropTypes from 'prop-types'; @@ -30,7 +30,7 @@ Greeting.propTypes = { }; ``` -`PropTypes` предоставляет ряд валидаторов, которые могут могут использоваться для проверки, что получаемые данные валидны. В этом примере мы используем `PropTypes.string`. Когда какое-то свойство имееет невалидное значение, в консоли будет выведено предупреждение. По соображениям производительности `propTypes` проверяются только в режиме разработки. +`PropTypes` предоставляет ряд валидаторов, которые могут могут использоваться для проверки, что получаемые данные валидны. В примере мы использовали `PropTypes.string`. Когда какое-то свойство имееет невалидное значение, в консоли будет выведено предупреждение. По соображениям производительности `propTypes` проверяются только в режиме разработки. ### PropTypes {#proptypes} @@ -101,7 +101,7 @@ MyComponent.propTypes = { if (!/matchme/.test(props[propName])) { return new Error( 'Свойство `' + propName + '` компонента' + - ' `' + componentName + '` Имеем неправильное значение' + ' `' + componentName + '` имеет неправильное значение' ); } }, @@ -115,8 +115,8 @@ MyComponent.propTypes = { 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.' + 'Свойство `' + propFullName + '` компонента' + + ' `' + componentName + '` имеет неправильное значение' ); } }) @@ -161,12 +161,12 @@ class Greeting extends React.Component { } } -// Specifies the default values for props: +// Задание значений по-умолчанию для пропсов: Greeting.defaultProps = { name: 'Незнакомец' }; -// Renders "Hello, Stranger": +// Отрисует "Привет, Незнакомец": ReactDOM.render( , document.getElementById('example') From 5014be8d4440efff012955b906fb7b396a1bcaab Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Thu, 14 Feb 2019 12:14:28 +0400 Subject: [PATCH 03/26] Update nav --- content/docs/nav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index ce5219f92..465c2f3dc 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -74,7 +74,7 @@ - id: strict-mode title: Strict Mode - id: typechecking-with-proptypes - title: Typechecking With PropTypes + title: Проверка типов с помощью PropTypes - id: uncontrolled-components title: Uncontrolled Components - id: web-components From cea285012373fc2cef7b1c31e123ceeaad30bc36 Mon Sep 17 00:00:00 2001 From: Leonid Fedorov Date: Thu, 14 Feb 2019 12:52:26 +0400 Subject: [PATCH 04/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index ea3816529..05873c4d8 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -150,7 +150,7 @@ MyComponent.propTypes = { ### Значения свойств по-умолчанию {#default-prop-values} -Вы можете задать значения по-умолчанию для ваших `props` с помощью специального свойства `defaultProps`: +Вы можете задать значения по умолчанию для ваших `props` с помощью специального свойства `defaultProps`: ```javascript class Greeting extends React.Component { From d477a7e8fce642058799a1a4c6cf45692ee8c84e Mon Sep 17 00:00:00 2001 From: Leonid Fedorov Date: Thu, 14 Feb 2019 12:52:34 +0400 Subject: [PATCH 05/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 05873c4d8..75eff91f5 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -189,4 +189,4 @@ class Greeting extends React.Component { } ``` -Определение `defaultProps` может быть использовано, чтобы гарантировать, что `this.props.name` имеет значение, даже если оно не было задано из родительского компонента. Сначала применяются значения по-умолчанию, заданные в `defaultProps`. После этого запускается проверка типов с помощью `propTypes`. Так что валидация типов распространяется и на значения по-умолчанию. +Определение `defaultProps` может быть использовано, чтобы гарантировать, что `this.props.name` имеет значение, даже если оно не было задано из родительского компонента. Сначала применяются значения по умолчанию, заданные в `defaultProps`. После этого запускается проверка типов с помощью `propTypes`. Так что валидация типов распространяется и на значения по умолчанию. From fa3cdb572c3a9773d0a36f9cfb70aa007374b486 Mon Sep 17 00:00:00 2001 From: Leonid Fedorov Date: Thu, 14 Feb 2019 12:52:41 +0400 Subject: [PATCH 06/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 75eff91f5..96334ba30 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -161,7 +161,7 @@ class Greeting extends React.Component { } } -// Задание значений по-умолчанию для пропсов: +// Задание значений по умолчанию для пропсов: Greeting.defaultProps = { name: 'Незнакомец' }; From 36aa870602a3f83637812172f8f95df70f58a206 Mon Sep 17 00:00:00 2001 From: Leonid Fedorov Date: Thu, 14 Feb 2019 12:52:47 +0400 Subject: [PATCH 07/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 96334ba30..3426b3981 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -148,7 +148,7 @@ MyComponent.propTypes = { }; ``` -### Значения свойств по-умолчанию {#default-prop-values} +### Значения свойств по умолчанию {#default-prop-values} Вы можете задать значения по умолчанию для ваших `props` с помощью специального свойства `defaultProps`: From 26fe782e8a353e4135d05e9d034adaadee5cc801 Mon Sep 17 00:00:00 2001 From: Leonid Fedorov Date: Thu, 14 Feb 2019 12:52:54 +0400 Subject: [PATCH 08/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 3426b3981..8aee58465 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -41,7 +41,7 @@ import PropTypes from 'prop-types'; MyComponent.propTypes = { // Вы можете объявлять свойства конкретного JS типа. - // По-умолчанию это не обязательно. + // По умолчанию это не обязательно. optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, From bc08962cded6589658acb6a3d46c8ab86cfb78fb Mon Sep 17 00:00:00 2001 From: Leonid Fedorov Date: Thu, 14 Feb 2019 12:53:01 +0400 Subject: [PATCH 09/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 8aee58465..95d27b0ea 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -8,7 +8,7 @@ redirect_from: > Примечание: > -> С версии React v15.5 `React.PropTypes` были вынесены в отдельный пакет. Так что используйте [библиотеку `prop-types`](https://www.npmjs.com/package/prop-types). +> С версии React 15.5 `React.PropTypes` были вынесены в отдельный пакет. Так что используйте [библиотеку `prop-types`](https://www.npmjs.com/package/prop-types). > > Вы можете использовать [codemod скрипт](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) для обновления вашего кода. From eda2c741d641dae50116877eb1e6821ef5e75294 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Feb 2019 20:17:11 +0400 Subject: [PATCH 10/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 95d27b0ea..661cc9554 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -10,7 +10,7 @@ redirect_from: > > С версии React 15.5 `React.PropTypes` были вынесены в отдельный пакет. Так что используйте [библиотеку `prop-types`](https://www.npmjs.com/package/prop-types). > -> Вы можете использовать [codemod скрипт](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) для обновления вашего кода. +> Вы можете использовать [codemod-скрипт](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes), чтобы провести замену в коде на использование этой библиотеки. По мере роста вашего приложения вы можете выловить много ошибок с помощью проверки типов. Для этого можно использовать расширения JavaScript вроде [Flow](https://flow.org/) и [TypeScript](https://www.typescriptlang.org/). Но, даже если вы ими не пользуетесь, React предоставляет встроенные возможности для проверки типов. Для запуска этой проверки на пропсах компонента вам нужно использовать специальное свойство `propTypes`: From 56c6721909f08e7c75aab79351b8f419d4698d31 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Feb 2019 20:17:21 +0400 Subject: [PATCH 11/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 661cc9554..1bddb0e65 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -12,7 +12,7 @@ redirect_from: > > Вы можете использовать [codemod-скрипт](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes), чтобы провести замену в коде на использование этой библиотеки. -По мере роста вашего приложения вы можете выловить много ошибок с помощью проверки типов. Для этого можно использовать расширения JavaScript вроде [Flow](https://flow.org/) и [TypeScript](https://www.typescriptlang.org/). Но, даже если вы ими не пользуетесь, React предоставляет встроенные возможности для проверки типов. Для запуска этой проверки на пропсах компонента вам нужно использовать специальное свойство `propTypes`: +По мере роста вашего приложения вы можете отловить много ошибок с помощью проверки типов. Для этого можно использовать расширения JavaScript вроде [Flow](https://flow.org/) и [TypeScript](https://www.typescriptlang.org/). Но, даже если вы ими не пользуетесь, React предоставляет встроенные возможности для проверки типов. Для запуска этой проверки на пропсах компонента вам нужно использовать специальное свойство `propTypes`: ```javascript import PropTypes from 'prop-types'; From a3adcef815b9a41157cf91844991cdd775f5c93e Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Feb 2019 20:18:40 +0400 Subject: [PATCH 12/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 1bddb0e65..7687f8b74 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -30,7 +30,7 @@ Greeting.propTypes = { }; ``` -`PropTypes` предоставляет ряд валидаторов, которые могут могут использоваться для проверки, что получаемые данные валидны. В примере мы использовали `PropTypes.string`. Когда какое-то свойство имееет невалидное значение, в консоли будет выведено предупреждение. По соображениям производительности `propTypes` проверяются только в режиме разработки. +`PropTypes` предоставляет ряд валидаторов, которые могут могут использоваться для проверки, что получаемые данные валидны. В примере мы использовали `PropTypes.string`. Когда какое-то свойство имеет некорректное значение, в консоли будет выведено предупреждение. По соображениям производительности `propTypes` проверяются только в режиме разработки. ### PropTypes {#proptypes} From 247b3338d1fe4c4858ded07a84c0d1ce502028c6 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Feb 2019 20:18:52 +0400 Subject: [PATCH 13/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 7687f8b74..dd1d42854 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -58,7 +58,7 @@ MyComponent.propTypes = { // React-элемент optionalElement: PropTypes.element, - // Можно указать, что пропс должен быть экземпляром класса + // Можно указать, что проп должен быть экземпляром класса // Это будет использовать проверку с `instanceof` optionalMessage: PropTypes.instanceOf(Message), From f3dfab8d61731216020c66d723497d6826d6fddb Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Feb 2019 20:19:15 +0400 Subject: [PATCH 14/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index dd1d42854..58a6a4bc7 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -85,7 +85,7 @@ MyComponent.propTypes = { fontSize: PropTypes.number }), - // Вы можете добавить к указанию типа флаг `isRequired`, + // Можно добавить`isRequired` к любому из приведённому выше типу, // чтобы показывать предупреждение, // если свойство не передано requiredFunc: PropTypes.func.isRequired, From 3d7221b0275d1bee62e1ae16faab87f2046fd194 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Feb 2019 20:19:26 +0400 Subject: [PATCH 15/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 58a6a4bc7..92e9c2b05 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -93,7 +93,7 @@ MyComponent.propTypes = { // Значене любого типа requiredAny: PropTypes.any.isRequired, - // Можно задать свой собственный валидатор. + // Можно добавить собственный валидатор. // Он должен возращать объект `Error` при ошибке валидации. // Не используйте `console.warn` или `throw` // - это не будет работать внутри `oneOfType` From 33af50ad186756afbd390efcafbc4ac576eb8ab7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Feb 2019 20:19:37 +0400 Subject: [PATCH 16/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 92e9c2b05..025267278 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -115,7 +115,7 @@ MyComponent.propTypes = { customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { if (!/matchme/.test(propValue[key])) { return new Error( - 'Свойство `' + propFullName + '` компонента' + + 'Проп `' + propFullName + '` компонента' + ' `' + componentName + '` имеет неправильное значение' ); } From 736b8259c2604bda098f436acbaea5c28c8b8ee8 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Feb 2019 20:21:59 +0400 Subject: [PATCH 17/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 025267278..e3d5fc4e3 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -173,7 +173,7 @@ ReactDOM.render( ); ``` -Если вы используете одну из трансформаций Babel, вроде [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , то вы можете задать `defaultProps` как статическое свойство класса (для компонента-наследника от `React.Component`). Этот синтаксис еще не утвержден, так что для его работы в браузере нужна компиляция. Подробнее смотрите в [предложении о полях класса](https://github.com/tc39/proposal-class-fields). +Если вы используете один из Babel-плагинов по преобразованию кода, вроде [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/), то можете объявить `defaultProps` как статическое свойство класса (для компонента-наследника от `React.Component`). Этот синтаксис еще не утвержден, так что для его работы в браузере нужна компиляция. Подробнее смотрите в [предложении о полях класса](https://github.com/tc39/proposal-class-fields). ```javascript class Greeting extends React.Component { From a5e16f9709963d7ede1eddb07bbb808df4f7ee20 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Feb 2019 20:22:08 +0400 Subject: [PATCH 18/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index e3d5fc4e3..11101e611 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -100,7 +100,7 @@ MyComponent.propTypes = { customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error( - 'Свойство `' + propName + '` компонента' + + 'Проп `' + propName + '` компонента' + ' `' + componentName + '` имеет неправильное значение' ); } From bac38ffc478199ecd4942ace7f65049207f0b5c1 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Feb 2019 20:22:18 +0400 Subject: [PATCH 19/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 11101e611..a6f56407f 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -40,7 +40,7 @@ Greeting.propTypes = { import PropTypes from 'prop-types'; MyComponent.propTypes = { - // Вы можете объявлять свойства конкретного JS типа. + // Можно объявить проп на соответствиее определённому JS-типу. // По умолчанию это не обязательно. optionalArray: PropTypes.array, optionalBool: PropTypes.bool, From d82b464242a4724ae6510f528826cfbd3ef0090e Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 14 Feb 2019 22:33:21 +0400 Subject: [PATCH 20/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index a6f56407f..480d68c67 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -76,7 +76,7 @@ MyComponent.propTypes = { // Массив объектов конкретного типа optionalArrayOf: PropTypes.arrayOf(PropTypes.number), - // Объект, со свойствами конкретного типа + // Объект со свойствами конкретного типа optionalObjectOf: PropTypes.objectOf(PropTypes.number), // Объект, подходящий под маску From 52567f5122ae4e2d90404563cff4e5e1a2848660 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Fri, 15 Feb 2019 08:09:31 +0400 Subject: [PATCH 21/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 480d68c67..f40698211 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -166,7 +166,7 @@ Greeting.defaultProps = { name: 'Незнакомец' }; -// Отрисует "Привет, Незнакомец": +// Отрендерит "Привет, Незнакомец": ReactDOM.render( , document.getElementById('example') From fde8f7a43c804473ababc9e3b4adec066450feef Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Fri, 15 Feb 2019 08:10:10 +0400 Subject: [PATCH 22/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index f40698211..c25ba8a5e 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -189,4 +189,4 @@ class Greeting extends React.Component { } ``` -Определение `defaultProps` может быть использовано, чтобы гарантировать, что `this.props.name` имеет значение, даже если оно не было задано из родительского компонента. Сначала применяются значения по умолчанию, заданные в `defaultProps`. После этого запускается проверка типов с помощью `propTypes`. Так что валидация типов распространяется и на значения по умолчанию. +Определение `defaultProps` гарантирует, что `this.props.name` будет иметь значение, даже если оно не было указано родительским компонентом. Сначала применяются значения по умолчанию, заданные в `defaultProps`. После запускается проверка типов с помощью `propTypes`. Так что проверка типов распространяется и на значения по умолчанию. From 1a6f30526f2552e8221d9c3b9e23c50709b2ae79 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Fri, 15 Feb 2019 08:10:28 +0400 Subject: [PATCH 23/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index c25ba8a5e..680851513 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -30,7 +30,7 @@ Greeting.propTypes = { }; ``` -`PropTypes` предоставляет ряд валидаторов, которые могут могут использоваться для проверки, что получаемые данные валидны. В примере мы использовали `PropTypes.string`. Когда какое-то свойство имеет некорректное значение, в консоли будет выведено предупреждение. По соображениям производительности `propTypes` проверяются только в режиме разработки. +`PropTypes` предоставляет ряд валидаторов, которые могут использоваться для проверки, что получаемые данные валидны. В примере мы использовали `PropTypes.string`. Когда какое-то свойство имеет некорректное значение, в консоли будет выведено предупреждение. По соображениям производительности `propTypes` проверяются только в режиме разработки. ### PropTypes {#proptypes} From 4eff932be970e99193a5b1a2bfcab54491732191 Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Fri, 15 Feb 2019 08:14:23 +0400 Subject: [PATCH 24/26] =?UTF-8?q?props=20->=20=D0=BF=D1=80=D0=BE=D0=BF?= =?UTF-8?q?=D1=81=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/typechecking-with-proptypes.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 680851513..585a1bb06 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -30,7 +30,7 @@ Greeting.propTypes = { }; ``` -`PropTypes` предоставляет ряд валидаторов, которые могут использоваться для проверки, что получаемые данные валидны. В примере мы использовали `PropTypes.string`. Когда какое-то свойство имеет некорректное значение, в консоли будет выведено предупреждение. По соображениям производительности `propTypes` проверяются только в режиме разработки. +`PropTypes` предоставляет ряд валидаторов, которые могут использоваться для проверки, что получаемые данные корректны. В примере мы использовали `PropTypes.string`. Когда какой-то проп имеет некорректное значение, в консоли будет выведено предупреждение. По соображениям производительности `propTypes` проверяются только в режиме разработки. ### PropTypes {#proptypes} @@ -87,7 +87,7 @@ MyComponent.propTypes = { // Можно добавить`isRequired` к любому из приведённому выше типу, // чтобы показывать предупреждение, - // если свойство не передано + // если проп не передан requiredFunc: PropTypes.func.isRequired, // Значене любого типа @@ -148,7 +148,7 @@ MyComponent.propTypes = { }; ``` -### Значения свойств по умолчанию {#default-prop-values} +### Значения пропсов по умолчанию {#default-prop-values} Вы можете задать значения по умолчанию для ваших `props` с помощью специального свойства `defaultProps`: From 7d69431bacc56c9d7d1e799b70704c9816bd3b73 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Fri, 15 Feb 2019 08:16:34 +0400 Subject: [PATCH 25/26] Update content/docs/typechecking-with-proptypes.md Co-Authored-By: vvscode --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 585a1bb06..17c051560 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -59,7 +59,7 @@ MyComponent.propTypes = { optionalElement: PropTypes.element, // Можно указать, что проп должен быть экземпляром класса - // Это будет использовать проверку с `instanceof` + // Для этого используется оператор `instanceof`. optionalMessage: PropTypes.instanceOf(Message), // Вы можете задать ограничение конкретными значениями From f3a79fc8515740c4b3e61b54dd66daa72f703589 Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Mon, 18 Feb 2019 14:10:39 +0400 Subject: [PATCH 26/26] Fix notices from codereview --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 17c051560..c3e6eeb66 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -79,7 +79,7 @@ MyComponent.propTypes = { // Объект со свойствами конкретного типа optionalObjectOf: PropTypes.objectOf(PropTypes.number), - // Объект, подходящий под маску + // Объект с определенной структурой optionalObjectWithShape: PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number