Add flow-react-proptypes

verekia · verekia · commit c65dfa65d02c · 2017-03-15T10:27:18.000+08:00
diff --git a/tutorial/04-webpack-react-hmr.md b/tutorial/04-webpack-react-hmr.md
@@ -199,16 +199,19 @@ const App = () => <h1>Hello React!</h1>
 export default App
 ```
 
-Since we use the JSX syntax here, we have to tell Babel that it needs to transform it as well.
+Since we use the JSX syntax here, we have to tell Babel that it needs to transform it with the `babel-preset-react` preset. And while we're at it, we're also going to add a Babel plugin called `flow-react-proptypes` which automatically generates PropTypes from Flow annotations for your React components.
 
-- Run `yarn add --dev babel-preset-react` and add `react` to your `.babelrc` file like so:
+- Run `yarn add --dev babel-preset-react babel-plugin-flow-react-proptypes` and edit your `.babelrc` file like so:
 
 ```json
 {
   "presets": [
     "env",
     "flow",
     "react"
+  ],
+  "plugins": [
+    "flow-react-proptypes"
   ]
 }
 ```
diff --git a/tutorial/05-redux-immutable-fetch.md b/tutorial/05-redux-immutable-fetch.md
@@ -111,7 +111,7 @@ In this section we are going to create *Components* and *Containers*.
 ```js
 // @flow
 
-import React, { PropTypes } from 'react'
+import React from 'react'
 
 type Props = {
   label: string,
@@ -121,11 +121,6 @@ type Props = {
 const Button = ({ label, handleClick }: Props) =>
   <button onClick={handleClick}>{label}</button>
 
-Button.propTypes = {
-  label: PropTypes.string.isRequired,
-  handleClick: PropTypes.func.isRequired,
-}
-
 export default Button
 ```
 
@@ -136,7 +131,7 @@ export default Button
 ```js
 // @flow
 
-import React, { PropTypes } from 'react'
+import React from 'react'
 
 type Props = {
   message: string,
@@ -145,10 +140,6 @@ type Props = {
 const Message = ({ message }: Props) =>
   <p>{message}</p>
 
-Message.propTypes = {
-  message: PropTypes.string.isRequired,
-}
-
 export default Message
 ```
 

Original file line number	Diff line number	Diff line change
`@@ -199,16 +199,19 @@ const App = () => <h1>Hello React!</h1>`
`199`	`199`	`export default App`
`200`	`200`	```
`201`	`201`
`202`		`-Since we use the JSX syntax here, we have to tell Babel that it needs to transform it as well.`
	`202`	+Since we use the JSX syntax here, we have to tell Babel that it needs to transform it with the `babel-preset-react` preset. And while we're at it, we're also going to add a Babel plugin called `flow-react-proptypes` which automatically generates PropTypes from Flow annotations for your React components.
`203`	`203`
`204`		-- Run `yarn add --dev babel-preset-react` and add `react` to your `.babelrc` file like so:
	`204`	+- Run `yarn add --dev babel-preset-react babel-plugin-flow-react-proptypes` and edit your `.babelrc` file like so:
`205`	`205`
`206`	`206`	```json
`207`	`207`	`{`
`208`	`208`	`"presets": [`
`209`	`209`	`"env",`
`210`	`210`	`"flow",`
`211`	`211`	`"react"`
	`212`	`+ ],`
	`213`	`+ "plugins": [`
	`214`	`+ "flow-react-proptypes"`
`212`	`215`	`]`
`213`	`216`	`}`
`214`	`217`	```