From 016c36bb9682efa6dc633db9e716e44fa06e2473 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Thu, 24 Aug 2017 06:44:14 +0800
Subject: [PATCH] Update

---
 react.md | 69 +++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 41 insertions(+), 28 deletions(-)

diff --git a/react.md b/react.md
index 463f1b8c1..f5e8443d2 100644
--- a/react.md
+++ b/react.md
@@ -42,6 +42,8 @@ function MyComponent ({ name }) {
 }
 ```
 
+Functional components have no state. Also, their `props` are passed as the first parameter to a function.
+
 ### Nesting
 
 ```jsx
@@ -93,48 +95,59 @@ These are methods available for `Component` instances. See [Component API](http:
 
 Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html).
 
-### States & properties
+### Properties
 
 ```html
-<MyComponent fullscreen={true} />
-```
- 
-```jsx
-// props
-  this.props.fullscreen //=> true
-
-// state
-  this.setState({ username: 'rstacruz' });
-  this.replaceState({ ... });
-  this.state.username //=> 'rstacruz'
+<Video fullscreen={true} />
 ```
 
 ```jsx
-render: function () {
-  return <div className={this.props.fullscreen ? 'full' : ''}>
-    Welcome, {this.state.username}
-  </div>;
+class Video extends React.Component {
+  render () {
+    this.props.fullscreen
+    /* ... */
+  }
 }
 ```
 
 Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent.
-Use [states](https://facebook.github.io/react/docs/tutorial.html#reactive-state) (`this.state`) to manage dynamic data.
 
-### Setting defaults
+### States
 
 ```jsx
-React.createClass({
-  getInitialState: function () {
-    return { comments: [] };
-  },
-
-  getDefaultProps: function () {
-    return { name: "Hello" };
-  }
-);
+this.setState({ username: 'rstacruz' })
+this.replaceState({ ... })
 ```
 
-Pre-populates `this.state.comments` and `this.props.name`.
+```jsx
+render () {
+  this.state.username
+  /* ... */
+}
+```
+
+Use [states](https://facebook.github.io/react/docs/tutorial.html#reactive-state) (`this.state`) to manage dynamic data.
+
+### Setting default props
+
+```jsx
+class Hello extends React.Component {
+  constructor (props) {
+    super({ shown: true, ...props })
+  }
+}
+```
+
+### Setting default state
+
+```jsx
+class Hello extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = { visible: true }
+  }
+}
+```
 
 Lifecycle
 ---------