Fix guides docs to es2015 classes and remove flowtype from Animation example

Summary:
1. Animation guide page is the only place where Flowtype is used, it would be better to remove it to prevent some confusion.

2. ES2015 classes in guidelines docs pages and fixed some typos

**Test plan (required)**

Should i write any tests for this?
Closes https://github.com/facebook/react-native/pull/8339

Differential Revision: D3474192

Pulled By: bestander

fbshipit-source-id: 5531d1e399eaed0952732ac2e0bd1effc72d00a8

docs/DirectManipulation.md

@@ -32,7 +32,7 @@ uses `setNativeProps` internally to update the opacity of its child
 component:
 
 ```javascript
-setOpacityTo: function(value) {
+setOpacityTo(value) {
   // Redacted: animation related code
   this.refs[CHILD_REF].setNativeProps({
     opacity: value
@@ -57,9 +57,10 @@ might implement it with that constraint is to store the opacity value
 in the state, then update that value whenever `onPress` is fired:
 
 ```javascript
-getInitialState() {
-  return { myButtonOpacity: 1, }
-},
+constructor(props) {
+  super(props);
+  this.state = { myButtonOpacity: 1, };
+}
 
 render() {
   return (
@@ -93,25 +94,25 @@ Composite components are not backed by a native view, so you cannot call
 `setNativeProps` on them. Consider this example:
 
 ```javascript
-var MyButton = React.createClass({
+class MyButton extends React.Component {
   render() {
     return (
       <View>
         <Text>{this.props.label}</Text>
       </View>
     )
-  },
-});
+  }
+}
 
-var App = React.createClass({
+class App extends React.Component {
   render() {
     return (
       <TouchableOpacity>
         <MyButton label="Press me!" />
       </TouchableOpacity>
     )
-  },
-});
+  }
+}
 ```
 [Run this example](https://rnplay.org/apps/JXkgmQ)
 
@@ -132,10 +133,10 @@ that calls `setNativeProps` on the appropriate child with the given
 arguments.
 
 ```javascript
-var MyButton = React.createClass({
+class MyButton extends React.Component {
   setNativeProps(nativeProps) {
     this._root.setNativeProps(nativeProps);
-  },
+  }
 
   render() {
     return (
@@ -143,8 +144,8 @@ var MyButton = React.createClass({
         <Text>{this.props.label}</Text>
       </View>
     )
-  },
-});
+  }
+}
 ```
 [Run this example](https://rnplay.org/apps/YJxnEQ)
 
@@ -172,10 +173,15 @@ necessary. For example, the following code demonstrates clearing the
 input when you tap a button:
 
 ```javascript
-var App = React.createClass({
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.clearText = this.clearText.bind(this);
+  }
+
   clearText() {
     this._textInput.setNativeProps({text: ''});
-  },
+  }
 
   render() {
     return (
@@ -188,7 +194,7 @@ var App = React.createClass({
       </View>
     );
   }
-});
+}
 ```
 [Run this example](https://rnplay.org/plays/pOI9bA)