From 7ee01a1b9f3ac96e146d8b9bdb92d6377353caa3 Mon Sep 17 00:00:00 2001
From: Joel Marcey <joelm@fb.com>
Date: Thu, 23 Jun 2016 12:02:16 -0700
Subject: [PATCH] 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 | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/docs/Basics-Component-ListView.md b/docs/Basics-Component-ListView.md
index d15cdec341ecaf..a269ee46c897cf 100644
--- a/docs/Basics-Component-ListView.md
+++ b/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);
 ```