Update typechecking-with-proptypes.md (#9392)

* Update typechecking-with-proptypes.md

* Update typechecking-with-proptypes.md

* Use consistent style for PropTypes import

docs/typechecking-with-proptypes.md

@@ -12,6 +12,8 @@ redirect_from:
 As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like [Flow](https://flowtype.org/) or [TypeScript](https://www.typescriptlang.org/) to typecheck your whole application. But even if you don't use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special `propTypes` property:
 
 ```javascript
+import PropTypes from 'prop-types';
+
 class Greeting extends React.Component {
   render() {
     return (
@@ -21,68 +23,70 @@ class Greeting extends React.Component {
 }
 
 Greeting.propTypes = {
-  name: React.PropTypes.string
+  name: PropTypes.string
 };
 ```
 
-`React.PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `React.PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode.
+`PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode.
 
-### React.PropTypes
+### PropTypes
 
 Here is an example documenting the different validators provided:
 
 ```javascript
+import PropTypes from 'prop-types';
+
 MyComponent.propTypes = {
   // You can declare that a prop is a specific JS primitive. By default, these
   // are all optional.
-  optionalArray: React.PropTypes.array,
+  optionalArray: PropTypes.array,
-  optionalBool: React.PropTypes.bool,
+  optionalBool: PropTypes.bool,
-  optionalFunc: React.PropTypes.func,
+  optionalFunc: PropTypes.func,
-  optionalNumber: React.PropTypes.number,
+  optionalNumber: PropTypes.number,
-  optionalObject: React.PropTypes.object,
+  optionalObject: PropTypes.object,
-  optionalString: React.PropTypes.string,
+  optionalString: PropTypes.string,
-  optionalSymbol: React.PropTypes.symbol,
+  optionalSymbol: PropTypes.symbol,
 
   // Anything that can be rendered: numbers, strings, elements or an array
   // (or fragment) containing these types.
-  optionalNode: React.PropTypes.node,
+  optionalNode: PropTypes.node,
 
   // A React element.
-  optionalElement: React.PropTypes.element,
+  optionalElement: PropTypes.element,
 
   // You can also declare that a prop is an instance of a class. This uses
   // JS's instanceof operator.
-  optionalMessage: React.PropTypes.instanceOf(Message),
+  optionalMessage: PropTypes.instanceOf(Message),
 
   // You can ensure that your prop is limited to specific values by treating
   // it as an enum.
-  optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
+  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
 
   // An object that could be one of many types
-  optionalUnion: React.PropTypes.oneOfType([
+  optionalUnion: PropTypes.oneOfType([
-    React.PropTypes.string,
+    PropTypes.string,
-    React.PropTypes.number,
+    PropTypes.number,
-    React.PropTypes.instanceOf(Message)
+    PropTypes.instanceOf(Message)
   ]),
 
   // An array of a certain type
-  optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
 
   // An object with property values of a certain type
-  optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
 
   // An object taking on a particular shape
-  optionalObjectWithShape: React.PropTypes.shape({
+  optionalObjectWithShape: PropTypes.shape({
-    color: React.PropTypes.string,
+    color: PropTypes.string,
-    fontSize: React.PropTypes.number
+    fontSize: PropTypes.number
   }),
 
   // You can chain any of the above with `isRequired` to make sure a warning
   // is shown if the prop isn't provided.
-  requiredFunc: React.PropTypes.func.isRequired,
+  requiredFunc: PropTypes.func.isRequired,
 
   // A value of any data type
-  requiredAny: React.PropTypes.any.isRequired,
+  requiredAny: PropTypes.any.isRequired,
 
   // You can also specify a custom validator. It should return an Error
   // object if the validation fails. Don't `console.warn` or throw, as this
@@ -101,7 +105,7 @@ MyComponent.propTypes = {
   // will be called for each key in the array or object. The first two
   // arguments of the validator are the array or object itself, and the
   // current item's key.
-  customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
+  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
     if (!/matchme/.test(propValue[key])) {
       return new Error(
         'Invalid prop `' + propFullName + '` supplied to' +
@@ -114,9 +118,11 @@ MyComponent.propTypes = {
 
 ### Requiring Single Child
 
-With `React.PropTypes.element` you can specify that only a single child can be passed to a component as children.
+With `PropTypes.element` you can specify that only a single child can be passed to a component as children.
 
 ```javascript
+import PropTypes from 'prop-types';
+
 class MyComponent extends React.Component {
   render() {
     // This must be exactly one element or it will warn.
@@ -130,7 +136,7 @@ class MyComponent extends React.Component {
 }
 
 MyComponent.propTypes = {
-  children: React.PropTypes.element.isRequired
+  children: PropTypes.element.isRequired
 };
 ```