diff --git a/docs/Basics-Component-Image.md b/docs/Basics-Component-Image.md new file mode 100644 index 000000000..262736048 --- /dev/null +++ b/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 ( + + ); +} + +// App registration and rendering +AppRegistry.registerComponent('MyApp', () => App); +``` diff --git a/docs/Basics-Component-ListView.md b/docs/Basics-Component-ListView.md new file mode 100644 index 000000000..63844ed17 --- /dev/null +++ b/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 ( + + {rowData}} + /> + + ); + } +}); + +// App registration and rendering +AppRegistry.registerComponent('MyApp', () => SimpleList); +``` diff --git a/docs/Basics-Component-Text.md b/docs/Basics-Component-Text.md new file mode 100644 index 000000000..3167375f7 --- /dev/null +++ b/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 ( + Hello World! + ); +} + +// App registration and rendering +AppRegistry.registerComponent('MyApp', () => App); +``` diff --git a/docs/Basics-Component-TextInput.md b/docs/Basics-Component-TextInput.md new file mode 100644 index 000000000..0942e2fae --- /dev/null +++ b/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 ( + + + + ); +} + +// App registration and rendering +AppRegistry.registerComponent('MyApp', () => App); +``` diff --git a/docs/Basics-Component-View.md b/docs/Basics-Component-View.md new file mode 100644 index 000000000..47e2c0530 --- /dev/null +++ b/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 ( + + Hello! + + ); +} + +// App registration and rendering +AppRegistry.registerComponent('MyApp', () => App); +``` diff --git a/docs/Basics-Components.md b/docs/Basics-Components.md new file mode 100644 index 000000000..a9bd13ca1 --- /dev/null +++ b/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) diff --git a/docs/Tutorial-IntegrationWithExistingApps.md b/docs/Basics-IntegrationWithExistingApps.md similarity index 99% rename from docs/Tutorial-IntegrationWithExistingApps.md rename to docs/Basics-IntegrationWithExistingApps.md index 9ed7b870f..e356a2ae4 100644 --- a/docs/Tutorial-IntegrationWithExistingApps.md +++ b/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 --- diff --git a/docs/QuickStart-GettingStarted.md b/docs/QuickStart-GettingStarted.md index 249296abf..a35288e52 100644 --- a/docs/QuickStart-GettingStarted.md +++ b/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 --- diff --git a/docs/Tutorial-CoreComponents.md b/docs/Tutorial-CoreComponents.md deleted file mode 100644 index a0440dc2c..000000000 --- a/docs/Tutorial-CoreComponents.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: tutorial-core-components -title: Core Components -layout: docs -category: Tutorials -permalink: docs/tutorial-core-components.html -next: tutorial-integration-with-existing-apps ---- - -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. - -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 - -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 ( - Hello World! - ); -} - -// App registration and rendering -AppRegistry.registerComponent('MyApp', () => App); -``` - -## Image - -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 ( - - ); -} - -// App registration and rendering -AppRegistry.registerComponent('MyApp', () => App); -``` - -## View - -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 ( - - Hello! - - ); -} - -// App registration and rendering -AppRegistry.registerComponent('MyApp', () => App); -``` - -## TextInput - -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 ( - - - - ); -} - -// App registration and rendering -AppRegistry.registerComponent('MyApp', () => App); -``` - -## ListView - -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/tutorials/core-components.html#view) 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 ( - - {rowData}} - /> - - ); - } -}); - -// App registration and rendering -AppRegistry.registerComponent('MyApp', () => SimpleList); -```