Fixing Intro Guide (#2679)

* Fixing Intro Guide

Fixes #832 - the code in this page was wrong, that export default was causing errors.

I've also modified a few phrases here and there to help the comprehension.

* more fixes, for CRNA

docs/guides/Guide-Intro.md

@@ -6,7 +6,6 @@ Let's use React Navigation to build a simple chat application for Android and iO
 
 First, make sure you're [all set up to use React Native](http://facebook.github.io/react-native/docs/getting-started.html). Next, create a new project and add `react-navigation`:
 
-
 ```sh
 # Create a new React Native App
 react-native init SimpleApp
@@ -16,11 +15,13 @@ cd SimpleApp
 npm install --save react-navigation
 
 # Run the new app
-react-native run-android # or:
+react-native run-android
+# or:
 react-native run-ios
 ```
 
 If you are using `create-react-native-app` instead of `react-native init`, then:
+
 ```sh
 # Create a new React Native App
 create-react-native-app SimpleApp
@@ -41,13 +42,11 @@ Verify that you can successfully see the bare sample app run on iOS and/or Andro
 bare-project
 ```
 
-We want to share code on iOS and Android, so lets delete the contents of `index.ios.js` and `index.android.js` and replace it with `import './App';`.
-
-Now lets create the new file for our app implementation, `App.js`.
+We want to share code on iOS and Android, so let's delete the contents of `index.ios.js` and `index.android.js` and replace it with `import './App';` - after which, we need to create create the new file for our app implementation, `App.js` (if you used `create-react-native-app` this has been already done)
 
 ## Introducing Stack Navigator
 
-For our app, we want to use the `StackNavigator` because we want a conceptual 'stack' navigation, where each new screen is put on the top of the stack and going back removes a screen from the top of the stack. Let's start with just one screen:
+For our app, we want to use the `StackNavigator` because conceptually we want to obtain a 'card stack' effect of movement, where each new screen is put on the top of the stack and going back removes a screen from the top of the stack. Let's start with just one screen:
 
 ```js
 import React from 'react';
@@ -66,14 +65,50 @@ class HomeScreen extends React.Component {
   }
 }
 
-export default const SimpleApp = StackNavigator({
+export const SimpleApp = StackNavigator({
   Home: { screen: HomeScreen },
 });
 
-// if you are using create-react-native-app you don't need this line
 AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
 ```
 
+If you used `create-react-native-app` the already existing `App.js` will be modified to
+
+```js
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { StackNavigator } from 'react-navigation';
+
+class HomeScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Welcome'
+  };
+  render() {
+    return <Text>Hello, Navigation!</Text>;
+  }
+}
+
+const SimpleApp = StackNavigator({
+  Home: { screen: HomeScreen }
+});
+
+export default class App extends React.Component {
+  render() {
+    return <SimpleApp />;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+
+```
+
 The `title` of the screen is configurable on the [static `navigationOptions`](/docs/navigators/navigation-options), where many options can be set to configure the presentation of the screen in the navigator.
 
 Now the same screen should appear on both iPhone and Android apps:
@@ -84,9 +119,15 @@ first-screen
 
 ## Adding a New Screen
 
-In our `App.js` file, let's add a new screen called `ChatScreen`:
+In our `App.js` file, let's add a new screen called `ChatScreen`, defining it under `HomeScreen`:
 
 ```js
+// ...
+
+class HomeScreen extends React.Component {
+    //...
+}
+
 class ChatScreen extends React.Component {
   static navigationOptions = {
     title: 'Chat with Lucy',
@@ -99,9 +140,10 @@ class ChatScreen extends React.Component {
     );
   }
 }
+
 ```
 
-We can then add a button to our `HomeScreen` component that links to `ChatScreen` using the `routeName` `Chat`.
+We can then add a button to our `HomeScreen` component that links to `ChatScreen`: we need to use the provided method `navigate` (from the [screen navigation prop](/docs/navigators/navigation-prop)) by giving it the `routeName` of the screen we want to reach, in this case `Chat`.
 
 ```js
 class HomeScreen extends React.Component {
@@ -123,10 +165,12 @@ class HomeScreen extends React.Component {
 }
 ```
 
-We're using the navigate function from the [screen navigation prop](/docs/navigators/navigation-prop) to go to `ChatScreen`. But that won't work until we add this to our `StackNavigator` like so:
+(*don't forget to import View and Button from react-native: * `import { AppRegistry, Text, View, Button } from 'react-native';`)
+
+But that won't work until we say to our `StackNavigator` of the existence of the `Chat` screen, like so:
 
 ```js
-export default const SimpleApp = StackNavigator({
+export const SimpleApp = StackNavigator({
   Home: { screen: HomeScreen },
   Chat: { screen: ChatScreen },
 });