ES6-ify ListView Basics

Summary:
Fixes #8184
Closes https://github.com/facebook/react-native/pull/8370

Differential Revision: D3477196

Pulled By: caabernathy

fbshipit-source-id: 929f84b3f8edaf03f918bb04fb9dbb48b4884b18

docs/Basics-Component-ListView.md

@@ -20,20 +20,21 @@ This example creates a simple `ListView` of hardcoded data. It first initializes
 > A `rowHasChanged` function is required to use `ListView`. Here we just say a row has changed if the row we are on is not the same as the previous row.
 
 ```JavaScript
-import React from 'react';
+import React, { Component } from 'react';
 import { AppRegistry, ListView, Text, View } from 'react-native';
 
-var AwesomeList = React.createClass({
+class ListViewBasics extends Component {
   // Initialize the hardcoded data
-  getInitialState: function() {
-    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-    return {
+  constructor(props) {
+    super(props);
+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    this.state = {
       dataSource: ds.cloneWithRows([
-        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie'
-        ])
+        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
+      ])
     };
-  },
-  render: function() {
+  }
+  render() {
     return (
       <View style={{paddingTop: 22}}>
         <ListView
@@ -43,8 +44,8 @@ var AwesomeList = React.createClass({
       </View>
     );
   }
-});
+}
 
 // App registration and rendering
-AppRegistry.registerComponent('AwesomeProject', () => AwesomeList);
+AppRegistry.registerComponent('AwesomeProject', () => ListViewBasics);
 ```