Merge pull request #552 from andrewsardone/aps-embedded-app

Improve EmbeddedApp.md docs wrt location of ReactComponent (also minor formatting)

Author: vjeux

docs/EmbeddedApp.md

@@ -7,6 +7,13 @@ permalink: docs/embeded-app.html
 next: activityindicatorios
 ---
 
+Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the `V` in `MVC` – it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like [CocoaPods](http://cocoapods.org/).
+
+## Requirements
+
+- [CocoaPods](http://cocoapods.org/) – `gem install cocoapods`
+- [Node.js](http://nodejs.org) – `brew install node`
+
 ## Install React Native Using CocoaPods
 
 [CocoaPods](http://cocoapods.org/) is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't install CocoaPods yet, checkout [this tutorial](http://guides.cocoapods.org/using/getting-started.html).
@@ -21,29 +28,32 @@ pod 'React/RCTText'
 
 Remember to install all subspecs you need. The `<Text>` element cannot be used without `pod 'React/RCTText'`.
 
-Then install pods via shell
+Then install your pods:
 
 ```
-$ pod install --verbose
+$ pod install
 ```
 
-The installation process also requires [Node.js](http://nodejs.org).
-
 ## Create Your React Native App
 
-First, enter React Native's pod root directory and create **index.ios.js** inside a directory `ReactComponent`.
+There are two pieces you’ll need to set up:
+
+1. The root JavaScript file that will contain your actual React Native app and other components
+- Wrapper Objective-C code that will load up your script and create a `RCTRootView` to display and manage your React Native components
+
+First, create a directory for your app’s React code and create a simple `index.ios.js` file:
 
 ```
-$ cd Pods/React
 $ mkdir ReactComponent
 $ touch index.ios.js
 ```
 
-Copy & paste following starter code for **index.ios.js**.
+Copy & paste following starter code for `index.ios.js` – it’s a barebones React Native app:
 
 ```
-var React = require('react-native');
+'use strict';
 
+var React = require('react-native');
 var {
   Text,
   View
@@ -58,9 +68,11 @@ var styles = React.StyleSheet.create({
 
 class SimpleApp extends React.Component {
   render() {
-    return <View style={styles.container}>
+    return (
+      <View style={styles.container}>
         <Text>This is a simple application.</Text>
-      </View>;
+      </View>
+    )
   }
 }
 
@@ -71,11 +83,11 @@ React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
 
 ## Add Container View To Your App
 
-You should now add container view for React Native component. It can be any **UIView** in your app.
+You should now add a container view for the React Native component. It can be any `UIView` in your app.
 
 ![Container view example](/react-native/img/EmbeddedAppContainerViewExample.png)
 
-However, let's subclass **UIView** for the sake of clean code. Let's name it **ReactView**. Open up **Yourproject.xcworkspace** and create a new class **ReactView** (You can name it whatever you like :)).
+However, let's subclass `UIView` for the sake of clean code. Let's name it `ReactView`. Open up `Yourproject.xcworkspace` and create a new class `ReactView` (You can name it whatever you like :)).
 
 ```
 // ReactView.h
@@ -85,7 +97,7 @@ However, let's subclass **UIView** for the sake of clean code. Let's name it **R
 @end
 ```
 
-Don't forget to add an outlet for it.
+In a view controller that wants to manage this view, go ahead and add an outlet and wire it up:
 
 ```
 // ViewController.m
@@ -99,19 +111,25 @@ Here I disabled **AutoLayout** for simplicity. In real production world, you sho
 
 ## Add RCTRootView To Container View
 
-Ready for the most interesting part? Now we shall create the **RCTRootView**, where your React Native app lives in.
+Ready for the most interesting part? Now we shall create the `RCTRootView`, where your React Native app lives in.
 
-In **ReactView.m**, we need to first initiate **RCTRootView** with the URI of your **index.ios.bundle**. **index.ios.bundle** will be created by packager and served by React Native server, which will be discussed later on.
+In `ReactView.m`, we need to first initiate `RCTRootView` with the URI of your `index.ios.bundle`. `index.ios.bundle` will be created by packager and served by React Native server, which will be discussed later on.
 
 ```
-NSString *urlString = @"http://localhost:8081/index.ios.bundle";
-NSURL *jsCodeLocation = [NSURL URLWithString:urlString];
+NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
+// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
+//
+//   NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+//
+// To generate that file, run the curl command and add the output to your main Xcode build target:
+//
+//   curl http://localhost:8081/index.ios.bundle -o main.jsbundle
 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                     moduleName: @"SimpleApp"
                                                  launchOptions:nil];
 ```
 
-Then add it as a subview of the **ReactView**.
+Then add it as a subview of the `ReactView`.
 
 ```
 [self addSubview:rootView];
@@ -123,19 +141,21 @@ rootView.frame = self.bounds;
 In root directory, we need to start React Native development server.
 
 ```
-$ ./Pods/React/packager/packager.sh --root ./ReactComponents
+(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)
 ```
 
-`--root` indicates the root of your React Native apps. Here we just have one **index.ios.js**. React Native development server will use packager to create a **index.ios.bundle**. Which can be access via `http://localhost:8081/index.ios.bundle`.
+This command will start up a React Native development server within our CocoaPods dependency to build our bundled script. The `--root` option indicates the root of your React Native apps – this will be our `ReactComponents` directory containing the single `index.ios.js` file. This running server will package up the `index.ios.bundle` file accessible via `http://localhost:8081/index.ios.bundle`.
 
 ## Compile And Run
 
-Now compile and run your app. You shall now see your React Native app running inside of the **ReactView**.
+Now compile and run your app. You shall now see your React Native app running inside of the `ReactView`.
 
 ![Example](/react-native/img/EmbeddedAppExample.png)
 
+Live reload works from the simulator, too! You’ve got a simple React component totally encapsulated behind an Objective-C `UIView` subclass.
+
 ## Conclusion
 
-So under the hood, when **RCTRootView** is initialized, it will try to download, parse and run the bundle file from React Native development server. All you need to do is to implement your own container view, add **RCTRootView** as its subclass. And then serve the bundle using React Native development server. Then, bravo!
+So under the hood, when `RCTRootView` is initialized, it will try to download, parse and run the bundle file from React Native development server. This means all you need to do is to implement your own container view or view controller for the `RCTRootView` – the `RCTRootView` ingests your bundled JS and renders your React components. Bravo!
 
-You can checkout full source code of sample application [here](https://github.com/tjwudi/EmbededReactNativeExample).
+You can checkout full source code of a sample application [here](https://github.com/tjwudi/EmbededReactNativeExample).