gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix incorrect proper name translation and phrases with wrong meaning (#22936)

Browse Source 
Some occurences of proper names, like "React" and "propTypes" were wrongly translated to Portuguese.
This commit is contained in:
Weder Ribas
2019-02-12 17:19:23 -02:00
committed by Fabio Trilho Pereira
parent 2eb5683c9b
commit 1bcf65dd05
1 changed files with 124 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
guide/portuguese/react/what-are-react-props/index.md
View File

@ -1,125 +1,126 @@
--- ---
title: React TypeChecking with PropTypes title: React TypeChecking with PropTypes
localeTitle: Tipo de ReaçãoChecendo com PropTypes localeTitle: Validação de Tipo em React com PropTypes
--- ---
## Reagir PropTypes ## React 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. 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 ## Como obter PropTypes
Começando com o React versão 15.5, esse recurso foi movido para um pacote separado chamado prop-types. 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. Para usá-lo, é necessário que ele seja adicionado ao projeto como uma dependência, emitindo o seguinte comando em um terminal:
```sh ```sh
npm install --save prop-types 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. 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. 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. 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. Seu valor não pode ser alterado pelo componente.
## Proptypes disponíveis ## Proptypes disponíveis
Abaixo está um exemplo de código com os diferentes validadores fornecidos pelo pacote e como injetá-los no componente. Abaixo está um exemplo de código com os diferentes validadores fornecidos pelo pacote e como injetá-los no componente.
```javascript ```javascript
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
class MyComponent extends Component{ class MyComponent extends Component{
constructor(props){ constructor(props){
super(props); super(props);
} }
render(){ render(){
return ( return (
... ...
); );
} }
} }
MyComponent.propTypes = { MyComponent.propTypes = {
// A prop that is a specific JS primitive. By default, these // A prop that is a specific JS primitive. By default, these
// are all optional. // are all optional.
optionalArray: PropTypes.array, optionalArray: PropTypes.array,
optionalBool: PropTypes.bool, optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func, optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number, optionalNumber: PropTypes.number,
optionalObject: PropTypes.object, optionalObject: PropTypes.object,
optionalString: PropTypes.string, optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol, optionalSymbol: PropTypes.symbol,
// Anything that can be rendered: numbers, strings, elements or an array // Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types. // (or fragment) containing these types.
optionalNode: PropTypes.node, optionalNode: PropTypes.node,
// A React element as a PropType // A React element as a PropType
optionalElement: PropTypes.element, optionalElement: PropTypes.element,
// Declaring that a prop is an instance of a class. This uses // Declaring that a prop is an instance of a class. This uses
// JS's instanceof operator. // JS's instanceof operator.
optionalMessage: PropTypes.instanceOf(AnotherComponent), optionalMessage: PropTypes.instanceOf(AnotherComponent),
// You can ensure that your prop is limited to specific values by treating // You can ensure that your prop is limited to specific values by treating
// it as an enum. // it as an enum.
optionalEnum: PropTypes.oneOf(['News', 'Photos']), optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// An object that could be one of many types // An object that could be one of many types
optionalUnion: PropTypes.oneOfType([ optionalUnion: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
PropTypes.number, PropTypes.number,
PropTypes.instanceOf(AnotherComponent) PropTypes.instanceOf(AnotherComponent)
]), ]),
// An array of a certain type // An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number), optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// An object with property values of a certain type // An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number), optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// An object taking on a particular shape // An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({ optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string, color: PropTypes.string,
fontSize: PropTypes.number fontSize: PropTypes.number
}), }),
// You can chain any of the above with `isRequired` to make sure a warning // You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided. // is shown if the prop isn't provided.
requiredFunc: PropTypes.func.isRequired, requiredFunc: PropTypes.func.isRequired,
// A value of any data type // A value of any data type
requiredAny: PropTypes.any.isRequired, requiredAny: PropTypes.any.isRequired,
}; };
``` ```
## Configurando Valores Padrão ## Configurando Valores Padrão
Como parte deste recurso, também é possível definir valores padrão para qualquer componente definido durante o desenvolvimento. 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. 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. O código abaixo ilustra como usar essa funcionalidade.
```javascript ```javascript
import React,{Component} from 'react'; import React,{Component} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
class MyComponent extends Component{ class MyComponent extends Component{
constructor(props){ constructor(props){
super(props); super(props);
} }
render(){ render(){
return ( return (
<h3>Hello, {this.props.name}</h3> <h3>Hello, {this.props.name}</h3>
); );
} }
} }
MyComponent.defaultProps = { MyComponent.defaultProps = {
name: 'Stranger' name: 'Stranger'
}; };
``` ```
Para obter mais informações sobre PropTypes e outros documentos no React. 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/)