propTypes Object vs propTypes Shape

<!DOCTYPE html>
<html>

  <head>
    
    <link rel="stylesheet" href="style.css" />
    <script data-require="react@0.12.2" data-semver="0.12.2" src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
    <script data-require="react-jsx@*" data-semver="0.12.2" src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
  </head>

  <body>
    <!-- Create a div that we'll append the 
    HelloWorld component to -->
    <div id="app"></div>
    
    <script src="script.js"></script>
  </body>

</html>

// Define the person object
var person = {
  name: "Jeff Labowski",
  alias: "The Dude",
  notAString: {}
}

//Define greetings
var phrases = {
  common: "Hello",
  slang: "Far out",
  alsoNotAString: {
    test: {}
  }
}


// Define React component
// React.createClass is used to create a component class. This 
// houses the methods, properties, and state of the component. 
var WrongShape = React.createClass({
  propTypes: {
    person: React.PropTypes.shape({
      notAString: React.PropTypes.string
    }),
    phrases: React.PropTypes.shape({
      alsoNotAString: React.PropTypes.object({
        test: React.PropTypes.string  // This isn't tested
      })
    })
  },
  render: function() {
    // It is important to mention that there 
    // must be a single wrapping element.
    return (
        <div>
          {this.props.phrases.slang}, {this.props.person.alias}!
        </div>
      );
  }
});

//Now lets render the component.
React.render(
  <WrongShape person={person} phrases={phrases} />,  // We pass the value of the prop through an attribute
  document.getElementById('app')        // Element to attach component to
);

/* Styles go here */

# Testing PropTypes.shape vs PropTypes.object

Testing how PropTypes.shape behaves differently then PropTypes.object