diff --git a/docs/Basics-Component-View.md b/docs/Basics-Component-View.md
index 5db73ac25279d1..0a6a728f9f1c2e 100644
--- a/docs/Basics-Component-View.md
+++ b/docs/Basics-Component-View.md
@@ -16,17 +16,19 @@ It is recommended that you wrap your components in a `View` to style and control
 The example below creates a `View` that aligns the `string` `Hello` in the top center of the device, something which could not be done with a `Text` component alone (i.e., a `Text` component without a `View` would place the `string` in a fixed location in the upper corner):
 
 ```ReactNativeWebPlayer
-import React from 'react';
+import React, { Component } from 'react';
 import { AppRegistry, Text, View } from 'react-native';
 
-const AwesomeProject = () => {
-  return (
-    <View style={{marginTop: 22, alignItems: 'center'}}>
-      <Text>Hello!</Text>
-    </View>
-  );
+class ViewBasics extends Component {
+  render() {
+    return (
+      <View style={{marginTop: 22, alignItems: 'center'}}>
+        <Text>Hello!</Text>
+      </View>
+    );
+  }
 }
 
 // App registration and rendering
-AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+AppRegistry.registerComponent('AwesomeProject', () => ViewBasics);
 ```