Docs: Basic Components Update

Summary:
This is an improvement to basic components docs.

* I updated the basic components example code to better render components on iOS (added paddingTop).
* I also modified the code to allow reader to easily copy, paste, and then run the code in their project if they followed the 'Getting Started' quick start guide.
* I also added additional copy to clarify suggested usage/guidelines.
Closes https://github.com/facebook/react-native/pull/8292

Differential Revision: D3469943

Pulled By: JoelMarcey

fbshipit-source-id: 21ff6ee13b59741c43d80aab68a38aace0fbfca6

docs/Basics-Component-Text.md

@@ -15,12 +15,37 @@ This example displays the `string` `"Hello World!"` on the device.
 import React from 'react';
 import { AppRegistry, Text } from 'react-native';
 
-const App = () => {
+const AwesomeProject = () => {
   return (
-    <Text>Hello World!</Text>
+    <Text style={{marginTop: 22}}>Hello World!</Text>
   );
 }
 
 // App registration and rendering
-AppRegistry.registerComponent('MyApp', () => App);
+AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
 ```
+
+In this slightly more advanced example we will display the `string` `"Hello World"` retrieved from this.state on the device and stored in the `text` variable. The value of the `text` variable is rendered by using `{text}`.
+
+```JavaScript
+import React from 'react';
+import { AppRegistry, Text } from 'react-native';
+
+var AwesomeProject = React.createClass({
+  getInitialState: function() {
+    return {text: "Hello World"};
+  },
+  render: function() {
+    var text = this.state.text;
+    return (
+        <Text style={{marginTop: 22}}>
+            {text}
+        </Text>
+    );
+  }
+});
+
+// App registration and rendering
+AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+
+```