Validação de Hooks do ReactJS

A validação de atributos é uma maneira eficaz de garantir o uso correto de componentes, ajudando a evitar erros e problemas futuros, especialmente quando o aplicativo se torna maior. Ela também torna o código mais legível, pois podemos ver como cada componente deve ser usado.

Validação de atributos

App.jsx

import　React　from　'react';
class App extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h3Array: {this.props.propArray}/h3>
　　　　　　　　　　　　<h3Boolean: {this.props.propBool ? "Verdadeiro..." : "Falso..."}/h3>
　　　　　　　　　　　　<h3Func: {this.props.propFunc(3</>/h3>
　　　　　　　　　　　　<h3Número: {this.props.propNumber}/h3>
　　　　　　　　　　　　<h3String: {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:　"String　value...",
　　　
　　　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'));