Validación de herramientas de ReactJS

La validación de propiedades es una manera efectiva de asegurar el uso correcto de componentes. Esto ayudará a evitar errores y problemas futuros a medida que la aplicación se hace más grande. También hace que el código sea más legible, ya que podemos ver cómo debe utilizarse cada componente.

Validación de propiedades

App.jsx

import　React　from　'react';
class App extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h3Array: {this.props.propArray}/h3>
　　　　　　　　　　　　<h3Bool: {this.props.propBool ? "Verdadero..." : "Falso..."}/h3>
　　　　　　　　　　　　<h3Func: {this.props.propFunc(3</>/h3>
　　　　　　　　　　　　<h3Número: {this.props.propNumber}/h3>
　　　　　　　　　　　　<h3Cadena: {this.props.propString}/h3>
　　　　　　　　　　　　<h3Objeto: {this.props.propObject.objectName}1}</h3>
　　　　　　　　　　　　<h3Objeto: {this.props.propObject.objectName}2}</h3>
　　　　　　　　　　　　<h3Objeto: {this.props.propObject.objectName}3}</h3>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
App.propTypes　=　{
　　　propArray:　React.PropTypes.array.isRequired,
　　　propBool:　React.PropTypes.bool.isRequired,
　　　propFunc:　React.PropTypes.func,
　　　propNumber:　React.PropTypes.number,
　　　propString:　React.PropTypes.string,
　　　propObject:　React.PropTypes.object
}
App.defaultProps　=　{
　　　propArray:　[1,2,3,4,5],
　　　propBool:　true,
　　　propFunc:　function(e){return　e},
　　　propNumber:　1,
　　　propString:　"valor de cadena...",
　　　
　　　propObject:　{
　　　　　　objectName1:"objectValue1",
　　　　　　objectName2:　"objectValue2",
　　　　　　objectName3:　"objectValue3"
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/,　document.getElementById('app'));