Add extends Component to Dimensions and Layout Basics Examples

Summary:
It works without out the `extends`, but I do not really understand why,
unless there is some magic implicit `extends` if you don't put it and
you call `registerComponent`. But, I figure we should be explicit unless
there is a good reason not to be.
Closes #8377

Differential Revision: D3478950

Pulled By: JoelMarcey

fbshipit-source-id: 05ea4367c3c8c34aea6c092639ee51d8761bca3f

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);
 ```

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,18 +34,18 @@ class AwesomeProject {
   }
 };
 
-AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
 ```
 
 #### Justify Content
 
 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