From 13e2a8a03f1742c720d36cf024fc9c96efd0c1ab Mon Sep 17 00:00:00 2001 From: Laure RC Date: Wed, 27 Feb 2019 10:15:49 +0100 Subject: [PATCH 1/5] start working on typechecking traduction --- content/docs/typechecking-with-proptypes.md | 92 ++++++++++----------- 1 file changed, 46 insertions(+), 46 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 4004e7820..43da4998e 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: Validation de types avec PropTypes permalink: docs/typechecking-with-proptypes.html redirect_from: - "docs/react-api.html#typechecking-with-proptypes" --- -> Note: +> Remarque : > -> `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.PropTypes` a été déplacé dans un autre module depuis React v15.5. Merci de plutôt utiliser [le module `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. +>Nous fournissons [un script codemod](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) pour automatiser cette transition. -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: +Au fur et à mesure que votre appli grossit, vous pouvez détecter un grand nombre de bugs grâce à la validation de types. Dans certains cas, vous pouvez utiliser des extensions JavaScript comme [Flow](https://flow.org/) ou [TypeScript](https://www.typescriptlang.org/) pour valider les types de toute votre application. Mais même si vous ne les utilisez pas, React possède ses propres fonctionnalités de validation de types. Pour lancer la validation de types des propriétés d'un composant, vous pouvez ajouter la propriété spéciale `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}

+

Bonjour, {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` exporte un ensemble de validateurs qui peuvent être utilisés pour s'assurer que la donnée que vous recevez est valide. Dans cet exemple, nous utilisons `PropTypes.string`. Quand une valeur invalide est fournie à une propriété, un message d'avertissement apparaîtra dans la console JavaScript. Pour des raisons de performance, `propTypes` n'est vérifiée qu'en mode développement. ### PropTypes {#proptypes} -Here is an example documenting the different validators provided: +Voici un exemple qui détaille les différents validateurs fournis : ```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. + // Vous pouvez déclarer qu'une propriété est d'un certain type JS. Par défaut, + // elles sont toutes optionnelles. optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, @@ -50,50 +50,50 @@ MyComponent.propTypes = { optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, - // Anything that can be rendered: numbers, strings, elements or an array - // (or fragment) containing these types. + // Tout ce qui peut être rendu : des nombres, des chaînes de caractères, des élements + // ou des tableaux (ou fragments) contenant ces types. optionalNode: PropTypes.node, - // A React element. + // Un élement React. optionalElement: PropTypes.element, - // You can also declare that a prop is an instance of a class. This uses - // JS's instanceof operator. + // Vous pouvez aussi déclarer qu'une propriété est une instance d'une classe. + // On utilise pour ça l'opérateur JS instanceof. optionalMessage: PropTypes.instanceOf(Message), - // You can ensure that your prop is limited to specific values by treating - // it as an enum. + // Vous pouvez vous assurer que votre propriété est limitée à certaines valeurs spécifiques + // en la traitant comme une enumération. optionalEnum: PropTypes.oneOf(['News', 'Photos']), - // An object that could be one of many types + // Un objet qui pourrait être n'importe lequel de ces types optionalUnion: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message) ]), - // An array of a certain type + // Un tableau d'un certain type optionalArrayOf: PropTypes.arrayOf(PropTypes.number), - // An object with property values of a certain type + // Un objet avec des valeurs d'un certain type optionalObjectOf: PropTypes.objectOf(PropTypes.number), - // An object taking on a particular shape + // Un objet avec une forme particulière 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. + // Vous pouvez ajouter `isRequired` à la fin de n'importe lequel des types ci-dessus pour vous assurer + // qu'un message d'avertissement s'affiche lorsque la propriété n'est pas fournie. requiredFunc: PropTypes.func.isRequired, - // A value of any data type + // Une valeur de n'importe quel type de données 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`. + // Vous pouvez aussi spécifier un validateur personnalisé. Il devra retourner un objet Error + // si la validation échoue. N'utilisez pas de `console.warn` ou `throw`, + // car ça ne fonctionnera pas dans `oneOfType`. customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error( @@ -103,11 +103,11 @@ MyComponent.propTypes = { } }, - // 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. + // Vous pouvez aussi fournir un validateur personnalisé à `arrayOf` et `objectOf`. + // Il faudra retourner un objet Error si la validation échoue. Le validateur + // sera appelé pour chaque clé du tableau ou de l'objet. Les deux premiers arguments + // du validateur sont le tableau ou l'objet lui-même, et la clé + // de la valeur actuelle. customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { if (!/matchme/.test(propValue[key])) { return new Error( @@ -119,16 +119,16 @@ MyComponent.propTypes = { }; ``` -### Requiring Single Child {#requiring-single-child} +### Exiger un seul enfant {#requiring-single-child} -With `PropTypes.element` you can specify that only a single child can be passed to a component as children. +Avec `PropTypes.element`, vous pouvez spécifier qu'un seul enfant peut être passé à un composant. ```javascript import PropTypes from 'prop-types'; class MyComponent extends React.Component { render() { - // This must be exactly one element or it will warn. + // Ça doit être un unique élément ou un avertissement sera affiché. const children = this.props.children; return (
@@ -143,45 +143,45 @@ MyComponent.propTypes = { }; ``` -### Default Prop Values {#default-prop-values} +### Valeurs par défaut des propriétés {#default-prop-values} -You can define default values for your `props` by assigning to the special `defaultProps` property: +Vous pouvez définir des valeurs par défaut pour vos `props` en utilisant la propriété spéciale `defaultProps` : ```javascript class Greeting extends React.Component { render() { return ( -

Hello, {this.props.name}

+

Bonjour, {this.props.name}

); } } -// Specifies the default values for props: +// Spécifie les valeurs par défaut des propriétés : Greeting.defaultProps = { - name: 'Stranger' + name: 'Étranger' }; -// Renders "Hello, Stranger": +// Renders "Bonjour, Étranger": ReactDOM.render( , - document.getElementById('example') + document.getElementById('exemple') ); ``` -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). +Si vous utilisez une transformation Babel telle que [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , vous pouvez aussi déclarer `defaultProps` comme propriété statique dans une classe d'un composant React. Cependant, cette syntaxe n'a pas encore été finalisée et requiert une étape de compilation pour fonctionner dans un navigateur. Pour plus d'informations, voir la [proposition des champs de classe](https://github.com/tc39/proposal-class-fields). ```javascript class Greeting extends React.Component { static defaultProps = { - name: 'stranger' + name: 'étranger' } render() { return ( -
Hello, {this.props.name}
+
Bonjour, {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`. +Les `defaultProps` seront utilisées pour s'assurer que `this.props.name` aura une valeur si elle n'était pas spécifiée par le composant parent. La validation de types des `propTypes` aura lieu après que `defaultProps` soit résolu, la validation de types s'applique donc également aux `defaultProps`. From 8fc60ce1851ca44a20744423699b026f4f862a8b Mon Sep 17 00:00:00 2001 From: Laure RC Date: Wed, 27 Feb 2019 23:50:45 +0100 Subject: [PATCH 2/5] fix traductions and special characters --- content/docs/typechecking-with-proptypes.md | 38 ++++++++++----------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 43da4998e..89cf4d5af 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -12,7 +12,7 @@ redirect_from: > >Nous fournissons [un script codemod](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) pour automatiser cette transition. -Au fur et à mesure que votre appli grossit, vous pouvez détecter un grand nombre de bugs grâce à la validation de types. Dans certains cas, vous pouvez utiliser des extensions JavaScript comme [Flow](https://flow.org/) ou [TypeScript](https://www.typescriptlang.org/) pour valider les types de toute votre application. Mais même si vous ne les utilisez pas, React possède ses propres fonctionnalités de validation de types. Pour lancer la validation de types des propriétés d'un composant, vous pouvez ajouter la propriété spéciale `propTypes` : +Au fur et à mesure que votre application grossit, vous pouvez détecter un grand nombre de bugs grâce à la validation de types. Dans certains cas, vous pouvez utiliser des extensions JavaScript comme [Flow](https://flow.org/) ou [TypeScript](https://www.typescriptlang.org/) pour valider les types de toute votre application. Mais même si vous ne les utilisez pas, React possède ses propres fonctionnalités de validation de types. Pour lancer la validation de types des propriétés d'un composant, vous pouvez ajouter la propriété spéciale `propTypes` : ```javascript import PropTypes from 'prop-types'; @@ -30,7 +30,7 @@ Greeting.propTypes = { }; ``` -`PropTypes` exporte un ensemble de validateurs qui peuvent être utilisés pour s'assurer que la donnée que vous recevez est valide. Dans cet exemple, nous utilisons `PropTypes.string`. Quand une valeur invalide est fournie à une propriété, un message d'avertissement apparaîtra dans la console JavaScript. Pour des raisons de performance, `propTypes` n'est vérifiée qu'en mode développement. +`PropTypes` exporte un ensemble de validateurs qui peuvent être utilisés pour s'assurer que la donnée que vous recevez est valide. Dans cet exemple, nous utilisons `PropTypes.string`. Quand une valeur non valide est fournie à une propriété, un message d'avertissement apparaîtra dans la console JavaScript. Pour des raisons de performance, `propTypes` n'est vérifiée qu'en mode développement. ### PropTypes {#proptypes} @@ -50,8 +50,8 @@ MyComponent.propTypes = { optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, - // Tout ce qui peut être rendu : des nombres, des chaînes de caractères, des élements - // ou des tableaux (ou fragments) contenant ces types. + // Tout ce qui peut être rendu : des nombres, des chaînes de caractères, + // des élements ou des tableaux (ou fragments) contenant ces types. optionalNode: PropTypes.node, // Un élement React. @@ -61,39 +61,40 @@ MyComponent.propTypes = { // On utilise pour ça l'opérateur JS instanceof. optionalMessage: PropTypes.instanceOf(Message), - // Vous pouvez vous assurer que votre propriété est limitée à certaines valeurs spécifiques - // en la traitant comme une enumération. + // Vous pouvez vous assurer que votre propriété est limitée à certaines + // valeurs spécifiques en la traitant comme une enumération. optionalEnum: PropTypes.oneOf(['News', 'Photos']), - // Un objet qui pourrait être n'importe lequel de ces types + // Cette propriété peut être de n'importe lequel de ces trois types optionalUnion: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message) ]), - // Un tableau d'un certain type + // Un tableau avec des valeurs d'un certain type optionalArrayOf: PropTypes.arrayOf(PropTypes.number), // Un objet avec des valeurs d'un certain type optionalObjectOf: PropTypes.objectOf(PropTypes.number), - // Un objet avec une forme particulière + // Un objet avec une forme spécifique optionalObjectWithShape: PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }), - // Vous pouvez ajouter `isRequired` à la fin de n'importe lequel des types ci-dessus pour vous assurer - // qu'un message d'avertissement s'affiche lorsque la propriété n'est pas fournie. + // Vous pouvez ajouter `isRequired` à la fin de n'importe lequel des types + // ci-dessus pour vous assurer qu'un message d'avertissement s'affiche lorsque + // la propriété n'est pas fournie. requiredFunc: PropTypes.func.isRequired, - // Une valeur de n'importe quel type de données + // Cette propriété est requise et peut être de n'importe quel type requiredAny: PropTypes.any.isRequired, - // Vous pouvez aussi spécifier un validateur personnalisé. Il devra retourner un objet Error - // si la validation échoue. N'utilisez pas de `console.warn` ou `throw`, - // car ça ne fonctionnera pas dans `oneOfType`. + // Vous pouvez aussi spécifier un validateur personnalisé. Il devra + // retourner un objet Error si la validation échoue. N'utilisez pas de `console.warn` + // ou `throw`, car ça ne fonctionnera pas dans `oneOfType`. customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error( @@ -106,8 +107,7 @@ MyComponent.propTypes = { // Vous pouvez aussi fournir un validateur personnalisé à `arrayOf` et `objectOf`. // Il faudra retourner un objet Error si la validation échoue. Le validateur // sera appelé pour chaque clé du tableau ou de l'objet. Les deux premiers arguments - // du validateur sont le tableau ou l'objet lui-même, et la clé - // de la valeur actuelle. + // du validateur sont le tableau ou l'objet lui-même, et la clé de la valeur actuelle. customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { if (!/matchme/.test(propValue[key])) { return new Error( @@ -161,14 +161,14 @@ Greeting.defaultProps = { name: 'Étranger' }; -// Renders "Bonjour, Étranger": +// Retourne « Bonjour, Étranger »: ReactDOM.render( , document.getElementById('exemple') ); ``` -Si vous utilisez une transformation Babel telle que [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , vous pouvez aussi déclarer `defaultProps` comme propriété statique dans une classe d'un composant React. Cependant, cette syntaxe n'a pas encore été finalisée et requiert une étape de compilation pour fonctionner dans un navigateur. Pour plus d'informations, voir la [proposition des champs de classe](https://github.com/tc39/proposal-class-fields). +Si vous utilisez une transformation Babel telle que [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , vous pouvez aussi déclarer `defaultProps` comme propriété statique dans une classe d'un composant React. Cependant, cette syntaxe n'a pas encore été finalisée et requiert une étape de compilation supplémentaire pour fonctionner dans un navigateur. Pour plus d'informations, voir la [proposition des champs de classe](https://github.com/tc39/proposal-class-fields). ```javascript class Greeting extends React.Component { From 80947ce10e5b95b58a4cec06ee928e5195d2f80a Mon Sep 17 00:00:00 2001 From: Laure RC Date: Sat, 9 Mar 2019 19:13:07 +0100 Subject: [PATCH 3/5] Apply code reviews --- content/docs/typechecking-with-proptypes.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 89cf4d5af..fcdea1691 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -12,7 +12,7 @@ redirect_from: > >Nous fournissons [un script codemod](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) pour automatiser cette transition. -Au fur et à mesure que votre application grossit, vous pouvez détecter un grand nombre de bugs grâce à la validation de types. Dans certains cas, vous pouvez utiliser des extensions JavaScript comme [Flow](https://flow.org/) ou [TypeScript](https://www.typescriptlang.org/) pour valider les types de toute votre application. Mais même si vous ne les utilisez pas, React possède ses propres fonctionnalités de validation de types. Pour lancer la validation de types des propriétés d'un composant, vous pouvez ajouter la propriété spéciale `propTypes` : +Au fur et à mesure que votre application grandit, vous pouvez détecter un grand nombre de bugs grâce à la validation de types. Dans certains cas, vous pouvez utiliser des extensions JavaScript comme [Flow](https://flow.org/) ou [TypeScript](https://www.typescriptlang.org/) pour valider les types de toute votre application. Mais même si vous ne les utilisez pas, React possède ses propres fonctionnalités de validation de types. Pour lancer la validation de types des propriétés d'un composant, vous pouvez ajouter la propriété spéciale `propTypes` : ```javascript import PropTypes from 'prop-types'; @@ -51,10 +51,10 @@ MyComponent.propTypes = { optionalSymbol: PropTypes.symbol, // Tout ce qui peut être rendu : des nombres, des chaînes de caractères, - // des élements ou des tableaux (ou fragments) contenant ces types. + // des éléments ou des tableaux (ou fragments) contenant ces types. optionalNode: PropTypes.node, - // Un élement React. + // Un élément React. optionalElement: PropTypes.element, // Vous pouvez aussi déclarer qu'une propriété est une instance d'une classe. @@ -161,10 +161,10 @@ Greeting.defaultProps = { name: 'Étranger' }; -// Retourne « Bonjour, Étranger »: +// Affiche « Bonjour, Étranger »: ReactDOM.render( , - document.getElementById('exemple') + document.getElementById('example') ); ``` From e66391525859b1b2663831793e720f486e6b574d Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Tue, 12 Mar 2019 23:11:36 +0100 Subject: [PATCH 4/5] Apply suggestions from code review Co-Authored-By: LaureRC --- content/docs/typechecking-with-proptypes.md | 42 ++++++++++----------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index fcdea1691..a6ce59a0d 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -6,13 +6,13 @@ redirect_from: - "docs/react-api.html#typechecking-with-proptypes" --- -> Remarque : +> Remarque > > `React.PropTypes` a été déplacé dans un autre module depuis React v15.5. Merci de plutôt utiliser [le module `prop-types`](https://www.npmjs.com/package/prop-types). > >Nous fournissons [un script codemod](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) pour automatiser cette transition. -Au fur et à mesure que votre application grandit, vous pouvez détecter un grand nombre de bugs grâce à la validation de types. Dans certains cas, vous pouvez utiliser des extensions JavaScript comme [Flow](https://flow.org/) ou [TypeScript](https://www.typescriptlang.org/) pour valider les types de toute votre application. Mais même si vous ne les utilisez pas, React possède ses propres fonctionnalités de validation de types. Pour lancer la validation de types des propriétés d'un composant, vous pouvez ajouter la propriété spéciale `propTypes` : +Au fur et à mesure que votre application grandit, vous pouvez détecter un grand nombre de bugs grâce à la validation de types. Dans certains cas, vous pouvez utiliser des extensions JavaScript comme [Flow](https://flow.org/) ou [TypeScript](https://www.typescriptlang.org/) pour valider les types de toute votre application. Mais même si vous ne les utilisez pas, React possède ses propres fonctionnalités de validation de types. Pour lancer la validation de types des props d'un composant, vous pouvez ajouter la propriété spéciale `propTypes` : ```javascript import PropTypes from 'prop-types'; @@ -30,7 +30,7 @@ Greeting.propTypes = { }; ``` -`PropTypes` exporte un ensemble de validateurs qui peuvent être utilisés pour s'assurer que la donnée que vous recevez est valide. Dans cet exemple, nous utilisons `PropTypes.string`. Quand une valeur non valide est fournie à une propriété, un message d'avertissement apparaîtra dans la console JavaScript. Pour des raisons de performance, `propTypes` n'est vérifiée qu'en mode développement. +`PropTypes` exporte un ensemble de validateurs qui peuvent être utilisés pour s'assurer que la donnée que vous recevez est valide. Dans cet exemple, nous utilisons `PropTypes.string`. Quand une valeur non valide est fournie à une prop, un message d'avertissement apparaîtra dans la console JavaScript. Pour des raisons de performances, `propTypes` n'est vérifiée qu'en mode développement. ### PropTypes {#proptypes} @@ -40,7 +40,7 @@ Voici un exemple qui détaille les différents validateurs fournis : import PropTypes from 'prop-types'; MyComponent.propTypes = { - // Vous pouvez déclarer qu'une propriété est d'un certain type JS. Par défaut, + // Vous pouvez déclarer qu'une prop est d'un certain type JS. Par défaut, // elles sont toutes optionnelles. optionalArray: PropTypes.array, optionalBool: PropTypes.bool, @@ -50,22 +50,22 @@ MyComponent.propTypes = { optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, - // Tout ce qui peut être rendu : des nombres, des chaînes de caractères, + // Tout ce qui peut apparaître dans le rendu : des nombres, des chaînes de caractères, // des éléments ou des tableaux (ou fragments) contenant ces types. optionalNode: PropTypes.node, // Un élément React. optionalElement: PropTypes.element, - // Vous pouvez aussi déclarer qu'une propriété est une instance d'une classe. + // Vous pouvez aussi déclarer qu'une prop est une instance d'une classe. // On utilise pour ça l'opérateur JS instanceof. optionalMessage: PropTypes.instanceOf(Message), - // Vous pouvez vous assurer que votre propriété est limitée à certaines + // Vous pouvez vous assurer que votre prop est limitée à certaines // valeurs spécifiques en la traitant comme une enumération. optionalEnum: PropTypes.oneOf(['News', 'Photos']), - // Cette propriété peut être de n'importe lequel de ces trois types + // Cette prop peut être de n'importe lequel de ces trois types optionalUnion: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, @@ -84,16 +84,16 @@ MyComponent.propTypes = { fontSize: PropTypes.number }), - // Vous pouvez ajouter `isRequired` à la fin de n'importe lequel des types + // Vous pouvez ajouter `isRequired` à la fin de n'importe lequel des validateurs // ci-dessus pour vous assurer qu'un message d'avertissement s'affiche lorsque - // la propriété n'est pas fournie. + // la prop n'est pas fournie. requiredFunc: PropTypes.func.isRequired, - // Cette propriété est requise et peut être de n'importe quel type + // Cette prop est requise et peut être de n'importe quel type requiredAny: PropTypes.any.isRequired, // Vous pouvez aussi spécifier un validateur personnalisé. Il devra - // retourner un objet Error si la validation échoue. N'utilisez pas de `console.warn` + // renvoyer un objet Error si la validation échoue. N'utilisez pas de `console.warn` // ou `throw`, car ça ne fonctionnera pas dans `oneOfType`. customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { @@ -105,7 +105,7 @@ MyComponent.propTypes = { }, // Vous pouvez aussi fournir un validateur personnalisé à `arrayOf` et `objectOf`. - // Il faudra retourner un objet Error si la validation échoue. Le validateur + // Il faudra renvoyer un objet Error si la validation échoue. Le validateur // sera appelé pour chaque clé du tableau ou de l'objet. Les deux premiers arguments // du validateur sont le tableau ou l'objet lui-même, et la clé de la valeur actuelle. customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { @@ -128,7 +128,7 @@ import PropTypes from 'prop-types'; class MyComponent extends React.Component { render() { - // Ça doit être un unique élément ou un avertissement sera affiché. + // Ça doit être un élément unique ou un avertissement sera affiché. const children = this.props.children; return (
@@ -143,7 +143,7 @@ MyComponent.propTypes = { }; ``` -### Valeurs par défaut des propriétés {#default-prop-values} +### Valeurs par défaut des props {#default-prop-values} Vous pouvez définir des valeurs par défaut pour vos `props` en utilisant la propriété spéciale `defaultProps` : @@ -156,24 +156,24 @@ class Greeting extends React.Component { } } -// Spécifie les valeurs par défaut des propriétés : +// Spécifie les valeurs par défaut des props : Greeting.defaultProps = { - name: 'Étranger' + name: 'Bel Inconnu' }; -// Affiche « Bonjour, Étranger »: +// Affiche « Bonjour, Bel Inconnu » : ReactDOM.render( , document.getElementById('example') ); ``` -Si vous utilisez une transformation Babel telle que [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , vous pouvez aussi déclarer `defaultProps` comme propriété statique dans une classe d'un composant React. Cependant, cette syntaxe n'a pas encore été finalisée et requiert une étape de compilation supplémentaire pour fonctionner dans un navigateur. Pour plus d'informations, voir la [proposition des champs de classe](https://github.com/tc39/proposal-class-fields). +Si vous utilisez une transformation Babel telle que [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , vous pouvez aussi déclarer `defaultProps` comme propriété statique dans une classe de composant React. Cependant, cette syntaxe n'a pas encore été finalisée et requiert une étape de compilation supplémentaire pour fonctionner dans un navigateur. Pour plus d'informations, voir la [proposition des aspects statiques de classe](https://github.com/tc39/proposal-static-class-features/). ```javascript class Greeting extends React.Component { static defaultProps = { - name: 'étranger' + name: 'bel inconnu' } render() { @@ -184,4 +184,4 @@ class Greeting extends React.Component { } ``` -Les `defaultProps` seront utilisées pour s'assurer que `this.props.name` aura une valeur si elle n'était pas spécifiée par le composant parent. La validation de types des `propTypes` aura lieu après que `defaultProps` soit résolu, la validation de types s'applique donc également aux `defaultProps`. +Les `defaultProps` seront utilisées pour s'assurer que `this.props.name` aura une valeur si elle n'était pas spécifiée par le composant parent. La validation de types des `propTypes` aura lieu après que `defaultProps` est résolu, la validation de types s'applique donc également aux `defaultProps`. From cef0607c49f3a3de7ee7b85d2e058991fb0616b1 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Wed, 13 Mar 2019 10:47:07 +0100 Subject: [PATCH 5/5] Final tweaks --- content/docs/typechecking-with-proptypes.md | 35 +++++++++++---------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index a6ce59a0d..c4f7a206a 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -14,7 +14,7 @@ redirect_from: Au fur et à mesure que votre application grandit, vous pouvez détecter un grand nombre de bugs grâce à la validation de types. Dans certains cas, vous pouvez utiliser des extensions JavaScript comme [Flow](https://flow.org/) ou [TypeScript](https://www.typescriptlang.org/) pour valider les types de toute votre application. Mais même si vous ne les utilisez pas, React possède ses propres fonctionnalités de validation de types. Pour lancer la validation de types des props d'un composant, vous pouvez ajouter la propriété spéciale `propTypes` : -```javascript +```javascript{11-13} import PropTypes from 'prop-types'; class Greeting extends React.Component { @@ -50,8 +50,8 @@ MyComponent.propTypes = { optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, - // Tout ce qui peut apparaître dans le rendu : des nombres, des chaînes de caractères, - // des éléments ou des tableaux (ou fragments) contenant ces types. + // Tout ce qui peut apparaître dans le rendu : des nombres, des chaînes de + // caractères, des éléments ou des tableaux (ou fragments) contenant ces types. optionalNode: PropTypes.node, // Un élément React. @@ -92,8 +92,8 @@ MyComponent.propTypes = { // Cette prop est requise et peut être de n'importe quel type requiredAny: PropTypes.any.isRequired, - // Vous pouvez aussi spécifier un validateur personnalisé. Il devra - // renvoyer un objet Error si la validation échoue. N'utilisez pas de `console.warn` + // Vous pouvez aussi spécifier un validateur personnalisé. Il devra renvoyer + // un objet Error si la validation échoue. N'utilisez pas de `console.warn` // ou `throw`, car ça ne fonctionnera pas dans `oneOfType`. customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { @@ -106,16 +106,19 @@ MyComponent.propTypes = { // Vous pouvez aussi fournir un validateur personnalisé à `arrayOf` et `objectOf`. // Il faudra renvoyer un objet Error si la validation échoue. Le validateur - // sera appelé pour chaque clé du tableau ou de l'objet. Les deux premiers arguments - // du validateur sont le tableau ou l'objet lui-même, et la clé de la valeur actuelle. - 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.' - ); + // sera appelé pour chaque clé du tableau ou de l'objet. Les deux premiers + // arguments du validateur sont le tableau ou l'objet lui-même, et la clé + // de la valeur actuelle. + 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.' + ); + } } - }) + ) }; ``` @@ -158,10 +161,10 @@ class Greeting extends React.Component { // Spécifie les valeurs par défaut des props : Greeting.defaultProps = { - name: 'Bel Inconnu' + name: 'bel inconnu' }; -// Affiche « Bonjour, Bel Inconnu » : +// Affiche « Bonjour, bel inconnu » : ReactDOM.render( , document.getElementById('example')