Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make "The Basics" flow like a linear tutorial #8429

Closed
wants to merge 6 commits into from
Closed
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 0 additions & 32 deletions docs/Basics-Component-Image.md

This file was deleted.

71 changes: 0 additions & 71 deletions docs/Basics-Component-ScrollView.md

This file was deleted.

53 changes: 0 additions & 53 deletions docs/Basics-Component-Text.md

This file was deleted.

39 changes: 0 additions & 39 deletions docs/Basics-Component-TextInput.md

This file was deleted.

34 changes: 0 additions & 34 deletions docs/Basics-Component-View.md

This file was deleted.

36 changes: 0 additions & 36 deletions docs/Basics-Components.md

This file was deleted.

35 changes: 26 additions & 9 deletions docs/QuickStart-GettingStarted.md → docs/GettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,17 @@ title: Getting Started
layout: docs
category: The Basics
permalink: docs/getting-started.html
next: basics-components
next: tutorial
---

Welcome to React Native! This page will help you install React Native on
your system, so that you can build apps with it right away. If you already
have React Native installed, you can skip ahead to the
[Tutorial](/react-native/docs/tutorial.html).

The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you
want to develop for both iOS and Android, that's fine - you just have to pick
one to start with, since the setup is a bit different.

<div class="toggler">
<style>
Expand Down Expand Up @@ -35,7 +43,7 @@ block { display: none; }
.display-platform-android.display-os-windows .android.windows {
display: block;
}</style>
<span>Target:</span>
<span>Mobile OS:</span>
<a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
<a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
<span>Development OS:</span>
Expand All @@ -58,13 +66,13 @@ block { display: none; }

<block class="mac ios" />

## Dependencies
## Dependencies for Mac + iOS

You will need Xcode, node.js, the React Native command line tools, and Watchman.

<block class="mac android" />

## Dependencies
## Dependencies for Mac + Android

You will need Android Studio, node.js, the React Native command line tools, and Watchman.

Expand Down Expand Up @@ -98,9 +106,15 @@ If you plan to make changes in Java code, we recommend [Gradle Daemon](https://d

<!-- ######### LINUX and WINDOWS for ANDROID ##################### -->

<block class="linux windows android" />
<block class="linux android" />

## Dependencies
## Dependencies for Linux + Android

<block class="windows android" />

## Dependencies for Windows + Android

<block class="linux windows android" />

You will need node.js, the React Native command line tools, Watchman, and Android Studio.

Expand Down Expand Up @@ -228,11 +242,14 @@ Congratulations! You've successfully run and modified a React Native app.

<block class="mac windows linux ios android" />

## Special Cases
## Now What?

- If you want to add this new React Native code to an existing application, check out the [Integration guide](docs/integration-with-existing-apps.html).

- This page explains how to create a new React Native app. If you are adding React Native components to an existing application, check out the [Integration guide](docs/integration-with-existing-apps.html).
- If you can't get this to work, see the [Troubleshooting](docs/troubleshooting.html#content) page.

- If you run into any issues getting started, see the [Troubleshooting](docs/troubleshooting.html#content) page.
- If you're curious to learn more about React Native, continue on
to the [Tutorial](docs/tutorial.html).

<script>
// Convert <div>...<span><block /></span>...</div>
Expand Down
46 changes: 46 additions & 0 deletions docs/HandlingTextInput.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
id: handling-text-input
title: Handling Text Input
layout: docs
category: The Basics
permalink: docs/handling-text-input.html
next: using-a-scrollview
---

[`TextInput`](/react-native/docs/textinput.html#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes
a function to be called every time the text changed.

This example shows how to count the number of characters that have been typed in a box.

```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

class CharacterCounter extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}

render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Pleeeease type on me!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 10}}>{this.state.text.length}</Text>
</View>
);
}
}

AppRegistry.registerComponent('CharacterCounter', () => CharacterCounter);
```

In this example, we store `text` in the state, because it changes over time.

There are a lot more advanced things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://facebook.github.io/react/docs/forms.html), or the [reference docs for TextInput](/react-native/docs/textinput.html).

Text input is probably the simplest example of a component whose state naturally changes over time. Next, let's look at another type of component like this is one that controls layout, and [learn about the ScrollView](/react-native/docs/using-a-scrollview.html).
Loading