[React] update react syntaxes and remove legacy methods (#856)

* Update React cheatsheet syntaxes and remove legacy methods

* Update React updated date

react.md

@@ -4,7 +4,7 @@ category: React
 layout: 2017/sheet
 ads: true
 tags: [Featured]
-updated: 2017-10-10
+updated: 2018-10-04
 weight: -10
 keywords:
   - React.Component
@@ -48,20 +48,36 @@ ReactDOM.render(<Hello name='John' />, el)
 
 Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output))
 
+### Import multiple exports
+{: .-prime}
+
+```jsx
+import React, {Component} from 'react'
+import ReactDOM from 'react-dom'
+```
+{: .-setup}
+
+```jsx
+class Hello extends Component {
+  ...
+}
+```
+
 ### Properties
 
 ```html
-<Video fullscreen={true} />
+<Video fullscreen={true} autoplay={false} />
 ```
 {: .-setup}
 
 ```jsx
 render () {
   this.props.fullscreen
+  const { fullscreen, autoplay } = this.props
   ···
 }
 ```
-{: data-line="2"}
+{: data-line="2,3"}
 
 Use `this.props` to access properties passed to the component.
 
@@ -72,7 +88,7 @@ See: [Properties](https://reactjs.org/docs/tutorial.html#using-props)
 ```jsx
 constructor(props) {
   super(props)
-  this.state = {}
+  this.state = { username: undefined }
 }
 ```
 
@@ -83,19 +99,30 @@ this.setState({ username: 'rstacruz' })
 ```jsx
 render () {
   this.state.username
+  const { username } = this.state
   ···
 }
 ```
-{: data-line="2"}
+{: data-line="2,3"}
 
 Use states (`this.state`) to manage dynamic data.
 
+With [Babel](https://babeljs.io/) you can use [proposal-class-fields](https://github.com/tc39/proposal-class-fields) and get rid of constructor
+
+```jsx
+class Hello extends Component {
+  state = { username: undefined };
+  ...
+}
+```
+
 See: [States](https://reactjs.org/docs/tutorial.html#reactive-state)
 
+
 ### Nesting
 
 ```jsx
-class Info extends React.Component {
+class Info extends Component {
   render () {
     const { avatar, username } = this.props
 
@@ -109,15 +136,20 @@ class Info extends React.Component {
 As of React v16.2.0, fragments can be used to return multiple children without adding extra wrapping nodes to the DOM.
 
 ```jsx
-class Info extends React.Component {
+import React, {
+  Component,
+  Fragment
+} from 'react'
+
+class Info extends Component {
   render () {
     const { avatar, username } = this.props
 
     return (
-      <React.Fragment>
+      <Fragment>
         <UserAvatar src={avatar} />
         <UserProfile username={username} />
-      </React.Fragment>
+      </Fragment>
     )
   }
 }
@@ -140,7 +172,7 @@ See: [Composing Components](https://reactjs.org/docs/components-and-props.html#c
 {: data-line="2"}
 
 ```jsx
-class AlertBox extends React.Component {
+class AlertBox extends Component {
   render () {
     return <div className='alert-box'>
       {this.props.children}
@@ -169,7 +201,7 @@ See: [defaultProps](https://reactjs.org/docs/react-component.html#defaultprops)
 ### Setting default state
 
 ```jsx
-class Hello extends React.Component {
+class Hello extends Component {
   constructor (props) {
     super(props)
     this.state = { visible: true }
@@ -180,13 +212,24 @@ class Hello extends React.Component {
 
 Set the default state in the `constructor()`.
 
+And without constructor using [Babel](https://babeljs.io/) with [proposal-class-fields](https://github.com/tc39/proposal-class-fields).
+
+```jsx
+class Hello extends Component {
+    state = { visible: true }
+  }
+}
+```
+
+{: data-line="2"}
+
 See: [Setting the default state](https://reactjs.org/docs/react-without-es6.html#setting-the-initial-state)
 
 Other components
 ----------------
 {: .-three-column}
 
-### Function components
+### Functional components
 
 ```jsx
 function MyComponent ({ name }) {
@@ -204,11 +247,13 @@ See: [Function and Class Components](https://reactjs.org/docs/components-and-pro
 ### Pure components
 
 ```jsx
-class MessageBox extends React.PureComponent {
+import React, {PureComponent} from 'react'
+
+class MessageBox extends PureComponent {
   ···
 }
 ```
-{: data-line="1"}
+{: data-line="3"}
 
 Performance-optimized version of `React.Component`. Doesn't rerender if props/state hasn't changed.
 
@@ -222,6 +267,7 @@ this.forceUpdate()
 
 ```jsx
 this.setState({ ... })
+this.setState(state => { ... })
 ```
 
 ```jsx
@@ -257,9 +303,8 @@ Add DOM event handlers, timers (etc) on `componentDidMount()`, then remove them
 
 | Method | Description |
 | --- | --- |
-| `componentWillReceiveProps` *(newProps)* | Use `setState()` here |
+| `componentDidUpdate` *(prevProps, prevState, snapshot)* | Use `setState()` here, but remember to compare props |
 | `shouldComponentUpdate` *(newProps, newState)* | Skips `render()` if returns false |
-| `componentWillUpdate` *(newProps, newState)* | Can't use `setState()` here |
 | `render()` | Render |
 | `componentDidUpdate` *(prevProps, prevState)* | Operate on the DOM here |
 
@@ -274,7 +319,7 @@ DOM nodes
 ### References
 
 ```jsx
-class MyComponent extends React.Component {
+class MyComponent extends Component {
   render () {
     return <div>
       <input ref={el => this.input = el} />
@@ -295,7 +340,7 @@ See: [Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html)
 ### DOM Events
 
 ```jsx
-class MyComponent extends React.Component {
+class MyComponent extends Component {
   render () {
     <input type="text"
         value={this.state.value}
@@ -323,7 +368,7 @@ See: [Events](https://reactjs.org/docs/events.html)
 {: .-setup}
 
 ```jsx
-class VideoPlayer extends React.Component {
+class VideoPlayer extends Component {
   render () {
     return <VideoEmbed {...this.props} />
   }
@@ -363,7 +408,7 @@ JSX patterns
 ### Style shorthand
 
 ```jsx
-var style = { height: 10 }
+const style = { height: 10 }
 return <div style={style}></div>
 ```
 
@@ -385,7 +430,7 @@ See: [Dangerously set innerHTML](https://reactjs.org/tips/dangerously-set-inner-
 ### Lists
 
 ```jsx
-class TodoList extends React.Component {
+class TodoList extends Component {
   render () {
     const { items } = this.props
 
@@ -403,19 +448,20 @@ Always supply a `key` property.
 ### Conditionals
 
 ```jsx
-<div>
+<Fragment>
   {showMyComponent
     ? <MyComponent />
     : <OtherComponent />}
-</div>
+</Fragment>
 ```
 
 ### Short-circuit evaluation
 
 ```jsx
-<div>
+<Fragment>
   {showPopup && <Popup />}
-</div>
+  ...
+</Fragment>
 ```
 
 New features
@@ -444,10 +490,10 @@ render () {
 render () {
   // Fragments don't require keys!
   return (
-    <React.Fragment>
+    <Fragment>
       <li>First item</li>
       <li>Second item</li>
-    </React.Fragment>
+    </Fragment>
   )
 }
 ```
@@ -471,7 +517,7 @@ See: [Fragments and strings](https://reactjs.org/blog/2017/09/26/react-v16.0.htm
 ### Errors
 
 ```js
-class MyComponent extends React.Component {
+class MyComponent extends Component {
   ···
   componentDidCatch (error, info) {
     this.setState({ error })