diff --git a/docs/Basics-Dimensions.md b/docs/Basics-Dimensions.md
index 3003c02faaf973..3497db13e97698 100644
--- a/docs/Basics-Dimensions.md
+++ b/docs/Basics-Dimensions.md
@@ -14,10 +14,10 @@ A component's dimensions determine its size on the screen.
 The simplest way to set the dimensions of a component is by adding a fixed `width` and `height` to style. All dimensions in React Native are unitless, and represent density-independent pixels.
 
 ```ReactNativeWebPlayer
-import React from 'react';
+import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
-class AwesomeProject {
+class FixedDimensionsBasics extends Component {
   render() {
     return (
       <View>
@@ -29,7 +29,7 @@ class AwesomeProject {
   }
 };
 
-AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
 ```
 
 Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.
@@ -41,10 +41,10 @@ Use `flex` in a component's style to have the component expand and shrink dynami
 > A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed `width` and `height` or `flex`, the parent will have dimensions of 0 and the `flex` children will not be visible.
 
 ```ReactNativeWebPlayer
-import React from 'react';
+import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
-class AwesomeProject {
+class FlexDimensionsBasics extends Component {
   render() {
     return (
       // Try removing the `flex: 1` on the parent View.
@@ -59,5 +59,5 @@ class AwesomeProject {
   }
 };
 
-AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
 ```
diff --git a/docs/Basics-Layout.md b/docs/Basics-Layout.md
index 275d210d56dd22..8d2972f4d1da86 100644
--- a/docs/Basics-Layout.md
+++ b/docs/Basics-Layout.md
@@ -18,10 +18,10 @@ You will normally use a combination of `flexDirection`, `alignItems`, and `justi
 Adding `flexDirection` to a component's `style` determines the **primary axis** of its layout. Should the children be organized horizontally (`row`) or vertically (`column`)? The default is `column`.
 
 ```ReactNativeWebPlayer
-import React from 'react';
+import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
-class AwesomeProject {
+class FlexDirectionBasics extends Component {
   render() {
     return (
       // Try setting `flexDirection` to `column`.
@@ -34,7 +34,7 @@ class AwesomeProject {
   }
 };
 
-AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
 ```
 
 #### Justify Content
@@ -42,10 +42,10 @@ AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
 Adding `justifyContent` to a component's style determines the **distribution** of children along the **primary axis**. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are `flex-start`, `center`, `flex-end`, `space-around`, and `space-between`.
 
 ```ReactNativeWebPlayer
-import React from 'react';
+import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
-class AwesomeProject {
+class JustifyContentBasics extends Component {
   render() {
     return (
       // Try setting `justifyContent` to `center`.
@@ -63,7 +63,7 @@ class AwesomeProject {
   }
 };
 
-AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
 ```
 
 #### Align Items
@@ -73,10 +73,10 @@ Adding `alignItems` to a component's style determines the **alignment** of child
 > For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
 
 ```ReactNativeWebPlayer
-import React from 'react';
+import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
-class AwesomeProject {
+class AlignItemsBasics {
   render() {
     return (
       // Try setting `alignItems` to 'flex-start'
@@ -96,7 +96,7 @@ class AwesomeProject {
   }
 };
 
-AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
 ```
 
 #### API Reference