Javascript.Reactjs-5-prop-validation-and-proptypes

Props & PropTypes

1. Props

"Props are the mechanism React uses to let components communicate with each other.

A parent component can pass it’s child(ren) named prop values, which the child can then

use in its internal logic." Ref[2]

"React components have an internal property ‘props’. This property contains all the props

a component gets from its parent. "  Ref[2]

2. PropTypes

2.1 Introduction

"This is where Reacts propTypes come in. It’s essentially a dictionary where you define what

props your component needs and what type(s) they should be."  Ref[2]

 propTypes: {
   //Id can be a number, or a string, but it needs to be defined!
   id: React.PropTypes.oneOfType([
     React.PropTypes.number,
     React.PropTypes.string
   ]).isRequired,

  //Messages should be an object with a title and text property of type string
   message: React.PropTypes.shape({
     title: React.PropTypes.string,
     text: React.PropTypes.string
   }).isRequired,

   //The comments property needs to be an array of objects.
   comments: React.PropTypes.arrayOf(React.PropTypes.object),

   //The date needs to be an instance of type Date.
   date: React.PropTypes.instanceOf(Date)
 }

2.2 React.PropTypes.shape()

react@15.1.0

A): React.js

 var ReactPropTypes = require('./ReactPropTypes');

 // ......

 var React = {
     // ......
     PropTypes: ReactPropTypes,
     // .......
 };

 module.exports = React;

B): ReactPropTypes.js

 var ReactPropTypes = {
   array: createPrimitiveTypeChecker('array'),
   bool: createPrimitiveTypeChecker('boolean'),
   func: createPrimitiveTypeChecker('function'),
   number: createPrimitiveTypeChecker('number'),
   object: createPrimitiveTypeChecker('object'),
   string: createPrimitiveTypeChecker('string'),

   any: createAnyTypeChecker(),
   arrayOf: createArrayOfTypeChecker,
   element: createElementTypeChecker(),
   instanceOf: createInstanceTypeChecker,
   node: createNodeChecker(),
   objectOf: createObjectOfTypeChecker,
   oneOf: createEnumTypeChecker,
   oneOfType: createUnionTypeChecker,
   shape: createShapeTypeChecker
 };

 // ......
 module.exports = ReactPropTypes;

C): Comment for createShapeTypeChecker function

function createShapeTypeChecker(shapeTypes)

function createChainableTypeChecker(validate)

ReactPropTypes-reading.js

2.3 Use Case of React.PropTypes.shape()

https://github.com/reactjs/react-redux/blob/master/src/utils/storeShape.js

https://github.com/reactjs/react-redux/blob/master/src/components/Provider.js

---

Reference

1. Prop Validation

https://facebook.github.io/react/docs/reusable-components.html

2. Why React PropTypes are important 

http://wecodetheweb.com/2015/06/02/why-react-proptypes-are-important/