Beginning React--Native

#ios

#objectivec

#swift

#reactjs

#reactnative

#fluxjs

Installation and setup new project

If you go to main React-native site, you can see these steps below to setup:

Requirements

OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
New to Xcode? Download it from the Mac App Store.
Homebrew is the recommended way to install node, watchman, and flow.
brew install node. 
brew install --HEAD watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
brew install flow. If you want to use flow.

Quick start

npm install -g react-native-cli
react-native init AwesomeProject

In the newly created folder AwesomeProject/

Open AwesomeProject.xcodeproj and hit run in Xcode
Open index.ios.js in your text editor of choice and edit some lines
Hit cmd+R (twice) in your iOS simulator to reload the app and see your change!

Congratulations! You've just successfully run and modified your first React Native app.

Troubleshooting

In case your Xcode built failed. Please follow steps below:

Clone main react native repository from github: git clone https://github.com/facebook/react-native
Copy Examples/SampleApp to Examples/AwesomeProject mkdir Examples/AwesomeProject cp -R Examples/SampleApp Examples/AwesomeProject
Run packager.sh to point to AwesomeProject just created: packager/packager.sh --root=./Examples/AwesomeProject
Now reopen again AwesomeProject in Xcode and start building.

Build and run on device:

In order to build and run on your device, follow these steps below:
curl http://localhost:8081/index.ios.js > main.jsbundle

In Xcode, click on Project name, goto Build Phases, and link the main.jsbundle to Assets

Open* AppDelegate.m*, remove the default code, and edit as below:

NSURL *jsCodeLocation;
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"SampleApp" launchOptions:self.launchOptions];
Now try to build and run project on your device.

So what is React-Native ?

Phuhh. Congratulation if you come to this step. I hope you're seeing your AwesomeProject running on your iPhone 5. Now it's time to understand what's going on.

In traditional iOS architecture, if you're an artist, you have:

A Canvas, it's the UIWindow class you often use to create your window application.
A Brush, it's the UIViewController that you use to draw something on Canvas
A Paint, it's the color and the view for your application. You use it with a Brush, and paint on a Canvas.

For more complex application design, you will have many Brush, as well as Paint. They're nested to others in a top-down manner to compose GUI.

React-Native is just a Paint. If you see in the code above:

NSURL *jsCodeLocation;
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"SampleApp" launchOptions:self.launchOptions];

you will see that to create new React-Native view, you have to pass two parameters:
- The jsLocation address: it's the local or remote url for the React component.
- The module name: It's the name that you register with AppRegistry in index.ios.js file:

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

After creating the React-Native View, now you can use its properties like any other iOS View, it's the Paint of your project.

Exercise:

It's enough for theory. There is a small exercise for you before you come to chapter 2.

Create new react native view, and put it inside a `ViewController`, style the view with backgroundColor blue.

Solution:

Please do the exercise by yourself before coming here!
If you're completely new to iOS, i recommend you to learn some basic Objective-C. There is a good resource here for you to learn.

Now create two file MyViewController.h and MyViewController.m in xcode. The code for each file is listed below:

// MyViewController.h
#import <UIKit/UIKit.h>
#import "RCTRootView.h"
@interface MyViewController : UIViewController
@property (weak, nonatomic) NSDictionary *launchOptions;
@end

// MyViewController.m
#import "MyViewController.h"

@implementation MyViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    NSURL *jsCodeLocation;
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"AdmobTest" launchOptions:self.launchOptions];
    rootView.frame = CGRectMake(0, 50, viewRect.size.width, viewRect.size.height - 50);
    [self.view addSubview:rootView];
}
@end

Now modify the default SampleApp's AppDelegate.m:

#import "AppDelegate.h"
#import "MyViewController.h"
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  //NSURL *jsCodeLocation;

  // Loading JavaScript code - uncomment the one you want.

  // OPTION 1
  // Load from development server. Start the server from the repository root:
  //
  // $ npm start
  //
  // To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
  // iOS device are on the same Wi-Fi network.
  //jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

  // OPTION 2
  // Load from pre-bundled file on disk. To re-generate the static bundle, run
  //
  // $ curl http://localhost:8081/index.ios.bundle -o main.jsbundle
  //
  // and uncomment the next following line


    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    //UIViewController *rootViewController = [[UIViewController alloc] init];
    MyViewController  *rootViewController = [[MyViewController alloc] init];
    rootViewController.launchOptions = launchOptions;
    self.window.rootViewController = rootViewController;
    [self.window makeKeyAndVisible];
    return YES;
}

@end