Separate Out Core Components Into Individual Parts

Summary:
Will create new issue to add more information to the `Components` section of the Tutorial
since that was gutted by this change.

Fixes facebook#8156
Closes facebook#8256

Differential Revision: D3459601

Pulled By: JoelMarcey

fbshipit-source-id: 4038afc463bffcf8efda36d29bc7c443bbc8f4bd

Author: JoelMarcey

docs/Basics-Component-Image.md

@@ -0,0 +1,30 @@
+---
+id: basics-component-image
+title: Image
+layout: docs
+category: Basics
+permalink: docs/basics-component-image.html
+next: basics-component-view
+---
+
+The other basic React Native component is the [`Image`](/react-native/docs/image.html#content) component. Like `Text`, the `Image` component simply renders an image.
+
+> An `Image` is analogous to using `img` when building websites.
+
+The simplest way to render an image is to provide a source file to that image via the `source` attribute.
+
+This example displays a checkbox `Image` on the device.
+
+```JavaScript
+import React from 'react';
+import { AppRegistry, Image } from 'react-native';
+
+const App = () => {
+  return (
+    <Image source={require('./img/check.png')} />
+  );
+}
+
+// App registration and rendering
+AppRegistry.registerComponent('MyApp', () => App);
+```

docs/Basics-Component-ListView.md

@@ -0,0 +1,44 @@
+---
+id: basics-component-listview
+title: ListView
+layout: docs
+category: Basics
+permalink: docs/basics-component-listview.html
+next: basics-integration-with-existing-apps
+---
+
+On mobile devices, lists are a core element in many applications. The [`ListView`](/react-native/docs/listview.html#content) component is a special type of [`View`](/react-native/docs/tutorial-component-view.html) that displays a vertically scrolling list of changing data.
+
+The `ListView` component requires two properties, `dataSource` and `renderRow`. `dataSource` is the actual source of information that will be part of the list. `renderRow` takes the data and returns a renderable component to display.
+
+This example creates a simple `ListView` of hardcoded data. It first initializes the `datasource` that will be used to populate the `ListView`. Then it renders that `ListView` with that data.
+
+> 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 { AppRegistry, Text, View, ListView} from 'react-native';
+
+var SimpleList = React.createClass({
+  // Initialize the hardcoded data
+  getInitialState: function() {
+    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    return {
+      dataSource: ds.cloneWithRows(['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie'])
+    };
+  },
+  render: function() {
+    return (
+      <View>
+        <ListView
+          dataSource={this.state.dataSource}
+          renderRow={(rowData) => <Text>{rowData}</Text>}
+        />
+      </View>
+    );
+  }
+});
+
+// App registration and rendering
+AppRegistry.registerComponent('MyApp', () => SimpleList);
+```

docs/Basics-Component-Text.md

@@ -0,0 +1,26 @@
+---
+id: basics-component-text
+title: Text
+layout: docs
+category: Basics
+permalink: docs/basics-component-text.html
+next: basics-component-image
+---
+
+The most basic component in React Native is the [`Text`](/react-native/docs/text.html#content) component. The `Text` component simply renders text.
+
+This example displays the `string` `"Hello World!"` on the device.
+
+```JavaScript
+import React from 'react';
+import { AppRegistry, Text } from 'react-native';
+
+const App = () => {
+  return (
+    <Text>Hello World!</Text>
+  );
+}
+
+// App registration and rendering
+AppRegistry.registerComponent('MyApp', () => App);
+```

docs/Basics-Component-TextInput.md

@@ -0,0 +1,28 @@
+---
+id: basics-component-textinput
+title: TextInput
+layout: docs
+category: Basics
+permalink: docs/basics-component-textinput.html
+next: basics-component-listview
+---
+
+Direct text-based user input is a foundation for many apps. Writing a post or comment on a page is a canonical example of this. [`TextInput`](/react-native/docs/textinput.html#content) is a basic component that allows the user to enter text.
+
+This example creates a simple `TextInput` box with the `string` `Hello` as the placeholder when the `TextInput` is empty.
+
+```JavaScript
+import React from 'react';
+import { AppRegistry, TextInput, View } from 'react-native';
+
+const App = () => {
+  return (
+      <View>
+        <TextInput placeholder="Hello" />
+      </View>
+  );
+}
+
+// App registration and rendering
+AppRegistry.registerComponent('MyApp', () => App);
+```

docs/Basics-Component-View.md

@@ -0,0 +1,32 @@
+---
+id: basics-component-view
+title: View
+layout: docs
+category: Basics
+permalink: docs/basics-component-view.html
+next: basics-component-textinput
+---
+
+A [`View`](/react-native/docs/view.html#content) is the most basic building block for a React Native application. The `View` is an abstraction on top of the target platform's native equivalent, such as iOS's `UIView`.
+
+> A `View` is analogous to using a `div` for building websites.
+
+While basic components such as `Text` and `Image`, can be displayed without a `View`, this is not generally recommended since the `View` gives you the control for styling and layout of those components.
+
+This example 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):
+
+```JavaScript
+import React from 'react';
+import { AppRegistry, Text, View } from 'react-native';
+
+const App = () => {
+  return (
+    <View style={{alignItems: 'center'}}>
+      <Text>Hello!</Text>
+    </View>
+  );
+}
+
+// App registration and rendering
+AppRegistry.registerComponent('MyApp', () => App);
+```

docs/Basics-Components.md

@@ -0,0 +1,20 @@
+---
+id: basics-components
+title: Components
+layout: docs
+category: Basics
+permalink: docs/basics-components.html
+next: basics-component-text
+---
+
+Components are the building blocks for a React Native application. A React Native user interface (UI) is specified by declaring components, possibly nested, and then those components are mapped to the native UI on the targeted platform.
+
+## Core Components.
+
+React Native has a number of core components that are commonly used in applications, either on their own or combined to build new components.
+
+- [Text](/react-native/docs/tutorial-component-text.html)
+- [Image](/react-native/docs/tutorial-component-image.html)
+- [View](/react-native/docs/tutorial-component-view.html)
+- [TextInput](/react-native/docs/tutorial-component-textinput.html)
+- [ListView](/react-native/docs/tutorial-component-listview.html)

docs/Tutorial-IntegrationWithExistingApps.md renamed to docs/Basics-IntegrationWithExistingApps.md

@@ -1,9 +1,9 @@
 ---
-id: tutorial-integration-with-existing-apps
+id: basics-integration-with-existing-apps
 title: Integration With Existing Apps
 layout: docs
-category: Tutorials
-permalink: docs/tutorial-integration-with-existing-apps.html
+category: Basics
+permalink: docs/basics-integration-with-existing-apps.html
 next: sample-application-movies
 ---
 

docs/QuickStart-GettingStarted.md

@@ -4,7 +4,7 @@ title: Getting Started
 layout: docs
 category: Quick Start
 permalink: docs/getting-started.html
-next: tutorial-core-components
+next: basics-components
 ---