diff --git a/docs/embeded-app.html b/docs/embeded-app.html index ad2d02cd8ac..8aed4b5bc85 100644 --- a/docs/embeded-app.html +++ b/docs/embeded-app.html @@ -1,9 +1,9 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Integration with Existing App

Install React Native Using CocoaPods #

CocoaPods 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.

When you are ready to work with CocoaPods, add the following line to Podfile. If you don't have one, then create it under the root directory of your project.

pod 'React' +React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Integration with Existing App

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.

Requirements #

Install React Native Using CocoaPods #

CocoaPods 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.

When you are ready to work with CocoaPods, add the following line to Podfile. If you don't have one, then create it under the root directory of your project.

pod 'React' pod 'React/RCTText' -# Add any subspecs you want to use in your project

Remember to install all subspecs you need. The <Text> element cannot be used without pod 'React/RCTText'.

Then install pods via shell

$ pod install --verbose

The installation process also requires Node.js.

Create Your React Native App #

First, enter React Native's pod root directory and create index.ios.js inside a directory ReactComponent.

$ cd Pods/React -$ mkdir ReactComponent -$ touch index.ios.js

Copy & paste following starter code for index.ios.js.

var React = require('react-native'); +# Add any subspecs you want to use in your project

Remember to install all subspecs you need. The <Text> element cannot be used without pod 'React/RCTText'.

Then install your pods:

$ pod install

Create Your React Native App #

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
  2. 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:

$ mkdir ReactComponent +$ touch index.ios.js

Copy & paste following starter code for index.ios.js – it’s a barebones React Native app:

'use strict'; +var React = require('react-native'); var { Text, View @@ -18,26 +18,34 @@ $ touch index.iosSimpleApp extends React.Component { render() { - return <View style={styles.container}> + return ( + <View style={styles.container}> <Text>This is a simple application.</Text> - </View>; + </View> + ) } } -React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

SimpleApp will be your module name, which will be used later on.

Add Container View To Your App #

You should now add container view for React Native component. It can be any UIView in your app.

Container view example

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 +React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

SimpleApp will be your module name, which will be used later on.

Add Container View To 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

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 #import <UIKit/UIKit.h> @interface ReactView : UIView -@end

Don't forget to add an outlet for it.

// ViewController.m +@end

In a view controller that wants to manage this view, go ahead and add an outlet and wire it up:

// ViewController.m @interface ViewController () @property (weak, nonatomic) IBOutlet ReactView *reactView; -@end

Here I disabled AutoLayout for simplicity. In real production world, you should turn on AutoLayout and setup constraints by yourself.

Add RCTRootView To Container View #

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.

NSString *urlString = @"http://localhost:8081/index.ios.bundle"; -NSURL *jsCodeLocation = [NSURL URLWithString:urlString]; -RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation +@end

Here I disabled AutoLayout for simplicity. In real production world, you should turn on AutoLayout and setup constraints by yourself.

Add RCTRootView To Container View #

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.

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.

[self addSubview:rootView]; -rootView.frame = self.bounds;

Start Development Server #

In root directory, we need to start React Native development server.

$ ./Pods/React/packager/packager.sh --root ./ReactComponents

--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.

Compile And Run #

Now compile and run your app. You shall now see your React Native app running inside of the ReactView.

Example

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!

You can checkout full source code of sample application here.

Next →
© 2015 Facebook Inc.