Warning: Accessing PropTypes via the main React package is deprecated…

package.json

@@ -97,6 +97,7 @@
     "node-sass": "^4.0.0",
     "normalize.css": "^5.0.0",
     "postcss-loader": "^1.1.0",
+    "prop-types": "^15.5.10",
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
     "react-redux": "^5.0.1",

src/layouts/CoreLayout/CoreLayout.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Header from '../../components/Header'
 import './CoreLayout.scss'
 import '../../styles/core.scss'
@@ -13,7 +14,7 @@ export const CoreLayout = ({ children }) => (
 )
 
 CoreLayout.propTypes = {
-  children: React.PropTypes.element.isRequired
+  children: PropTypes.element.isRequired
 }
 
 export default CoreLayout

src/routes/Counter/components/Counter.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 export const Counter = (props) => (
   <div style={{ margin: '0 auto' }}>
@@ -14,9 +15,9 @@ export const Counter = (props) => (
 )
 
 Counter.propTypes = {
-  counter: React.PropTypes.number.isRequired,
-  doubleAsync: React.PropTypes.func.isRequired,
-  increment: React.PropTypes.func.isRequired
+  counter: PropTypes.number.isRequired,
+  doubleAsync: PropTypes.func.isRequired,
+  increment: PropTypes.func.isRequired
 }
 
 export default Counter

src/routes/Elapse/components/Elapse.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 export default class Elapse extends Component {
 
@@ -21,6 +22,6 @@ export default class Elapse extends Component {
 }
 
 Elapse.propTypes = {
-  elapse: React.PropTypes.number.isRequired,
-  plus: React.PropTypes.func.isRequired
+  elapse: PropTypes.number.isRequired,
+  plus: PropTypes.func.isRequired
 }

src/routes/PageNotFound/components/PageNotFound.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import NotFoundImage from '../assets/404.jpg'
 import classes from './PageNotFound.scss'
 import { withRouter } from 'react-router'
@@ -19,7 +20,7 @@ class PageNotFound extends Component {
 }
 
 PageNotFound.propTypes = {
-  router: React.PropTypes.object.isRequired
+  router: PropTypes.object.isRequired
 }
 
 export default withRouter(PageNotFound)

src/routes/Route/components/Route.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { Link, withRouter } from 'react-router'
 
 class Route extends Component {
@@ -29,8 +30,8 @@ class Route extends Component {
 }
 
 Route.propTypes = {
-  location: React.PropTypes.object.isRequired,
-  router: React.PropTypes.object.isRequired
+  location: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired
 }
 
 export default withRouter(Route)

src/routes/Zen/components/Zen.js

@@ -1,11 +1,12 @@
-import React, {Component} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import './Zen.scss'
 import Spinner from 'react-spinkit'
 
 export default class Zen extends Component {
 
   render () {
-    const { fetchZen, clearZen, zen: {fetching, text} } = this.props
+    const { fetchZen, clearZen, zen: { fetching, text } } = this.props
 
     return (
       <div>
@@ -32,5 +33,5 @@ export default class Zen extends Component {
 }
 
 Zen.propTypes = {
-  zen: React.PropTypes.object.isRequired
+  zen: PropTypes.object.isRequired
 }