04-propTypes.html

<div id="root"></div>

<script src="http://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="http://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('root')


// function SayHello (props) {
//   return (
//     <div>
//       Hello {props.firstName} {props.lastName}!
//     </div>
//   )
// }

class SayHello extends React.Component {
  static propTypes = {
    firstName: PropTypes.string.isRequired,
    lastName: PropTypes.string.isRequired
  }

  render() {
    const {firstName, lastName} = this.props
    return (
      <div>
        Hello {firstName} {lastName}!
      </div>
    )
  }
}

// 1.
// SayHello.propTypes = {
//   firstName(props, propName, componentName) {
//     if(typeof props[propName] !== 'string') {
//       return new Error(`Hey, you should pass a string for ${propName} in ${componentName} but you passed the type ${typeof props[propName]}`)
//     }
//   }
// }


// 2.
// const PropTypes = {
//   string (props, propName, componentName) {
//     if(typeof props[propName] !== 'string') {
//       return new Error(`Hey, you should pass a string for ${propName} in ${componentName} but you passed the type ${typeof props[propName]}`)
//     }
//   }
// }


// 3.
// SayHello.propTypes = {
//   firstName: PropTypes.string,
//   lastName: PropTypes.string
// }

SayHello.propTypes = {
  firstName: PropTypes.string.isRequired,
  lastName: PropTypes.string.isRequired
}


ReactDOM.render(<SayHello firstName={true} />, rootElement)
</script>