From 1bcf65dd05b904c9275c53ffd14c702f10b39295 Mon Sep 17 00:00:00 2001 From: Weder Ribas Date: Tue, 12 Feb 2019 17:19:23 -0200 Subject: [PATCH] Fix incorrect proper name translation and phrases with wrong meaning (#22936) Some occurences of proper names, like "React" and "propTypes" were wrongly translated to Portuguese. --- .../react/what-are-react-props/index.md | 247 +++++++++--------- 1 file changed, 124 insertions(+), 123 deletions(-) diff --git a/guide/portuguese/react/what-are-react-props/index.md b/guide/portuguese/react/what-are-react-props/index.md index bc7b7a8d50..d8aa6a9987 100644 --- a/guide/portuguese/react/what-are-react-props/index.md +++ b/guide/portuguese/react/what-are-react-props/index.md @@ -1,125 +1,126 @@ --- title: React TypeChecking with PropTypes -localeTitle: Tipo de ReaçãoChecendo com PropTypes ---- ## Reagir PropTypes - -Estes servem como um método de typechecking à medida que um aplicativo tende a crescer, com isso uma base muito grande de bugs tende a ser corrigida com o uso desse recurso. - -## Como obter PropTypes - -Começando com o React versão 15.5, esse recurso foi movido para um pacote separado chamado prop-types. - -Para usá-lo, é necessário que ele seja adicionado ao projeto como uma dependência, emitindo o seguinte comando em um console. - -```sh -npm install --save prop-types -``` - -Depois disso, toda uma gama de validadores que podem ser usados ​​para garantir que os dados que o desenvolvedor receberá realmente sejam válidos. Quando um valor inválido é fornecido, haverá um aviso aparecendo no console do JavaScript. - -Observe que, por motivos de desempenho, os propTypes definidos são verificados apenas no modo de desenvolvimento. - -Também, ao contrário do estado do componente, que pode ser manipulado conforme necessário, esses suportes são somente leitura. - -Seu valor não pode ser alterado pelo componente. - -## Proptypes disponíveis - -Abaixo está um exemplo de código com os diferentes validadores fornecidos pelo pacote e como injetá-los no componente. - -```javascript -import PropTypes from 'prop-types'; - class MyComponent extends Component{ - constructor(props){ - super(props); - } - render(){ - return ( - ... - ); - } - } - - MyComponent.propTypes = { - // A prop that is a specific JS primitive. By default, these - // are all optional. - optionalArray: PropTypes.array, - optionalBool: PropTypes.bool, - optionalFunc: PropTypes.func, - optionalNumber: PropTypes.number, - optionalObject: PropTypes.object, - 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 as a PropType - optionalElement: PropTypes.element, - - // Declaring that a prop is an instance of a class. This uses - // JS's instanceof operator. - optionalMessage: PropTypes.instanceOf(AnotherComponent), - - // 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(AnotherComponent) - ]), - - // 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. - requiredFunc: PropTypes.func.isRequired, - - // A value of any data type - requiredAny: PropTypes.any.isRequired, - }; -``` - -## Configurando Valores Padrão - -Como parte deste recurso, também é possível definir valores padrão para qualquer componente definido durante o desenvolvimento. - -Eles garantem que o propore tenha um valor, mesmo que não especificado pelo componente pai. - -O código abaixo ilustra como usar essa funcionalidade. - -```javascript -import React,{Component} from 'react'; - import PropTypes from 'prop-types'; - class MyComponent extends Component{ - constructor(props){ - super(props); - } - render(){ - return ( -

Hello, {this.props.name}

- ); - } - } - MyComponent.defaultProps = { - name: 'Stranger' - }; -``` - -Para obter mais informações sobre PropTypes e outros documentos no React. - -Vá para o [site oficial](https://reactjs.org/) e leia os documentos ou o [Github Repo](https://github.com/facebook/react/) \ No newline at end of file +localeTitle: Validação de Tipo em React com PropTypes +--- +## React PropTypes + +Estes servem como um método de validação de tipo (type checking) à medida que um aplicativo tende a crescer, com isso uma base muito grande de bugs tende a ser corrigida com o uso desse recurso. + +## Como obter PropTypes + +Começando com o React versão 15.5, esse recurso foi movido para um pacote separado chamado prop-types. + +Para usá-lo, é necessário que ele seja adicionado ao projeto como uma dependência, emitindo o seguinte comando em um terminal: + +```sh +npm install --save prop-types +``` + +Depois disso, toda uma gama de validadores de tipo podem ser usados para garantir que os dados que o desenvolvedor receberá realmente sejam válidos. Quando um valor inválido é fornecido, haverá um aviso aparecendo no console do JavaScript. + +Observe que, por motivos de desempenho, os propTypes definidos são verificados apenas no modo de desenvolvimento. + +Também, ao contrário do estado do componente, que pode ser manipulado conforme necessário, essas propriedades (props) são somente leitura. + +Seu valor não pode ser alterado pelo componente. + +## Proptypes disponíveis + +Abaixo está um exemplo de código com os diferentes validadores fornecidos pelo pacote e como injetá-los no componente. + +```javascript +import PropTypes from 'prop-types'; + class MyComponent extends Component{ + constructor(props){ + super(props); + } + render(){ + return ( + ... + ); + } + } + + MyComponent.propTypes = { + // A prop that is a specific JS primitive. By default, these + // are all optional. + optionalArray: PropTypes.array, + optionalBool: PropTypes.bool, + optionalFunc: PropTypes.func, + optionalNumber: PropTypes.number, + optionalObject: PropTypes.object, + 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 as a PropType + optionalElement: PropTypes.element, + + // Declaring that a prop is an instance of a class. This uses + // JS's instanceof operator. + optionalMessage: PropTypes.instanceOf(AnotherComponent), + + // 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(AnotherComponent) + ]), + + // 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. + requiredFunc: PropTypes.func.isRequired, + + // A value of any data type + requiredAny: PropTypes.any.isRequired, + }; +``` + +## Configurando Valores Padrão + +Como parte deste recurso, também é possível definir valores padrão para qualquer componente definido durante o desenvolvimento. + +Eles garantem que o propore tenha um valor, mesmo que não especificado pelo componente pai. + +O código abaixo ilustra como usar essa funcionalidade. + +```javascript +import React,{Component} from 'react'; + import PropTypes from 'prop-types'; + class MyComponent extends Component{ + constructor(props){ + super(props); + } + render(){ + return ( +

Hello, {this.props.name}

+ ); + } + } + MyComponent.defaultProps = { + name: 'Stranger' + }; +``` + +Para obter mais informações sobre PropTypes e outros documentos no React. + +Vá para o [site oficial](https://reactjs.org/) e leia os documentos ou o [Github Repo](https://github.com/facebook/react/)