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

Update title to react instead reaccionar (#34099)

Browse Source 
I restored the react name in title table.
This commit is contained in:
egxn
2019-02-14 16:07:04 -05:00
committed by Jaka Kranjc
parent 0154a350af
commit d07a0be071
1 changed files with 124 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,125 +1,126 @@
--- ---
title: React TypeChecking with PropTypes title: React TypeChecking with PropTypes
localeTitle: Reaccionar TypeChecking con PropTypes localeTitle: React TypeChecking con PropTypes
--- ---
## Reaccionar PropTypes ## React PropTypes
Estos sirven como un método de verificación de tipos, ya que una aplicación tiende a crecer, con esto, una gran base de errores tiende a corregirse con el uso de esta función. Estos sirven como un método de verificación de tipos, ya que una aplicación tiende a crecer, con esto, una gran base de errores tiende a corregirse con el uso de esta función.
## Cómo obtener PropTypes ## Cómo obtener PropTypes
A partir de la versión 15.5 de React, esta característica se movió a un paquete separado llamado prop-types. A partir de la versión 15.5 de React, esta característica se movió a un paquete separado llamado prop-types.
Para usarlo, se requiere que se agregue al proyecto como una dependencia emitiendo el siguiente comando en una consola. Para usarlo, se requiere que se agregue al proyecto como una dependencia emitiendo el siguiente comando en una consola.
```sh ```sh
npm install --save prop-types npm install --save prop-types
``` ```
Después de eso, toda una gama de validadores que pueden usarse para asegurarse de que los datos que el desarrollador va a recibir son realmente válidos. Cuando se proporciona un valor no válido, aparecerá una advertencia en la consola de JavaScript. Después de eso, toda una gama de validadores que pueden usarse para asegurarse de que los datos que el desarrollador va a recibir son realmente válidos. Cuando se proporciona un valor no válido, aparecerá una advertencia en la consola de JavaScript.
Tenga en cuenta que, por razones de rendimiento, los PropTypes definidos solo se verifican en el modo de desarrollo. Tenga en cuenta que, por razones de rendimiento, los PropTypes definidos solo se verifican en el modo de desarrollo.
Además, al contrario del estado del componente, que puede manipularse según sea necesario, estos accesorios son de solo lectura. Además, al contrario del estado del componente, que puede manipularse según sea necesario, estos accesorios son de solo lectura.
Su valor no puede ser cambiado por el componente. Su valor no puede ser cambiado por el componente.
## Tipos disponibles ## Tipos disponibles
A continuación se muestra un ejemplo de código con los diferentes validadores proporcionados por el paquete y cómo inyectarlos en el componente. A continuación se muestra un ejemplo de código con los diferentes validadores proporcionados por el paquete y cómo inyectarlos en el 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,
}; };
``` ```
## Configuración de valores por defecto ## Configuración de valores por defecto
Como parte de esta característica, también es posible definir valores predeterminados para cualquier componente definido durante el desarrollo. Como parte de esta característica, también es posible definir valores predeterminados para cualquier componente definido durante el desarrollo.
Estos se aseguran de que el prop tenga un valor incluso si no está especificado por el componente principal. Estos se aseguran de que el prop tenga un valor incluso si no está especificado por el componente principal.
El siguiente código ilustra cómo usar esta funcionalidad. El siguiente código ilustra cómo usar esta funcionalidad.
```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 obtener más información sobre PropTypes y otros documentos sobre React. Para obtener más información sobre PropTypes y otros documentos sobre React.
Vaya al [sitio oficial](https://reactjs.org/) y lea los documentos, o [Github Repo](https://github.com/facebook/react/)