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/