Fix prop-types

Author: mathieuancelin

instructions/1-your-first-component.md

@@ -162,7 +162,8 @@ export class MyComponent extends Component {
 You can provide some validation for the `props` of a component using `React.PropTypes` to have error message in developement. it's quite useful when you provide components to other dev teams.
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class MyComponent extends Component {
 
@@ -290,7 +291,8 @@ Let's write a nice component that will display details of a wine. This wine will
 First let's just display it's name
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class Wine extends Component {
 
@@ -399,7 +401,8 @@ Let say the `<Wine />` component should now look like
 to achieve that, you will create a new component called `<LikeButton />` with the following contract
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class LikeButton extends Component {
 

instructions/2-the-wine-app.md

@@ -83,7 +83,8 @@ Create all *Dumb Components*: `<Regions />`, `<WineList />` and `<Wine />` and i
 The `<Regions />` component just display a list of regions. The contract of the `<Regions />` component is the following
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class Regions extends Component {
   static propTypes = {
@@ -142,7 +143,8 @@ the view of `<WineList />` component will look something like
 The `<Wine />` component display a list of wine for the selected region. The contract of the `<Wine />` component is the following
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class Wine extends Component {
 

instructions/4-handle-likes.md

@@ -37,7 +37,8 @@ export function isWineLiked(id) {
 Now, you have to write a new component to display the `like` button into a `<Wine />` component. The button will be added in the `card-action` section. This component will have the following contract
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class LikeButton extends Component {
 
@@ -71,7 +72,8 @@ when the wine is liked, the button must look something like the following snippe
 If you need to react to the change of a property value in a component, you can use the `componentWillReceiveProps` function
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class LikeButton extends Component {
 

instructions/5-handle-comments.md

@@ -23,7 +23,8 @@ export function fetchComments(id) {
 The  `<CommentList />` will be added in the `card-action` section and will have the following contract
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class CommentList extends Component {
 
@@ -57,7 +58,8 @@ We can see that the comment list will use another component to display each comm
 The `<Comment />` component will have the following contract
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class Comment extends Component {
   static propTypes = {

instructions/6-integrate-with-third-party-apis.md

@@ -32,7 +32,8 @@ the comment button is a very simple component, its only job is to trigger the `<
 The contract of `<CommentButton />` is the following
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class CommentButton extends Component {
   static propTypes = {
@@ -59,7 +60,8 @@ The only issue is that the [materialize css modal component](http://materializec
 The contract of `<CommentModal />` is the following
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class CommentModal extends Component {
 
@@ -121,7 +123,8 @@ to use this code inside a our React component, we need to get a reference to the
 To do that we are going to use React refs
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export class CommentModal extends Component {
   ...

package.json

@@ -9,6 +9,7 @@
     "es-symbol": "1.1.2",
     "es6-shim": "0.35.3",
     "prettier": "1.7.4",
+    "prop-types": "15.6.0",
     "react": "16.0.0",
     "react-dom": "16.0.0",
     "whatwg-fetch": "2.0.3"

yarn.lock

@@ -5041,7 +5041,7 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@^1.7.4:
+[email protected]:
   version "1.7.4"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa"
 
@@ -5091,7 +5091,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.0:
+prop-types@15.6.0, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies: