React Native Get Started

**- REACT NATIVE là gì ? - **

Chắc hẳn đã một lần bạn nghe tới React, một opensource mà đội ngũ kĩ sư của Facebook phát triển.

Trong kì FB conferrence vừa rồi, các kĩ sư của facebook tiếp tục công bố React Native như một cố gắng để đêm lại cách thức mới mẻ trong viẹc phát triển các ứng dụng di động. Với quan điểm vô cùng mới mẻ, không giống như các Cross Platform là "Viết một lần, chạy nhiều nền tảng". Với React chúng ta sẽ làm quen với quan điểm "Học một lần, viết trên nhiều nền tảng".

Bằng việc sử dụng React và Javascript, React Native cho phép ta :

** 1. Sử dụng các đối tượng của Native **

Với React Native bạnh có thể sử dụng các đối tượng căn bản của platform ví dụ như UITabBar, UINavigationController. Ứng dụng phát triển với React Native đem lại trại nghiệm người dùng tương đồng với ecosystem của Platform. Tất nhiên, rất dễ sử dụng

var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;

var App = React.createClass({
  render: function() {
    return (
      <TabBarIOS>
        <TabBarIOS.Item title="React Native" selected={true}>
          <NavigatorIOS initialRoute={{ title: 'React Native' }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  },
});

2. Thực thi một cách bất đồng bộ

Tất cả các xử lí giữa JavaScript và Native Platform được thực thi bất đồng bộ. Điều này có nghĩa là chugns ta có thể decode ảnh ngoài main thread, lưu thông tin vào bộ nhớ dưới background, tính toán text và layout mà không block đi thực thi của User Interface.

3. Thiết kế các layout một cách dễ dàng hơn

React Native sử dụng flexbox layout model từ web vào sử dụng. Flexbox khiến cho việc xây dựng các UI dù là phức tạp nhất cũng trở nên dễ dàng hơn. React Native đồng thời cũng hỗ trợ một số các style cơ bản của web ví dụ như : fontWeight, StyleSheet.

var React = require('react-native');
var { Image, StyleSheet, Text, View } = React;

var ReactNative = React.createClass({
  render: function() {
    return (
      <View style={styles.row}>
        <Image
          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
          style={styles.image}
        />
        <View style={styles.text}>
          <Text style={styles.title}>
            React Native
          </Text>
          <Text style={styles.subtitle}>
            Build high quality mobile apps using React
          </Text>
        </View>
      </View>
    );
  },
});
var styles = StyleSheet.create({
  row: { flexDirection: 'row', margin: 40 },
  image: { width: 40, height: 40, marginRight: 10 },
  text: { flex: 1, justifyContent: 'center'},
  title: { fontSize: 11, fontWeight: 'bold' },
  subtitle: { fontSize: 10 },
});

**4. Tính mở rộng. ** Bạn có thể xây dựng một ứng dụng hoàn chỉnh với React Native mà không cần phải động một dòng native code nào. Nhưng React Native cũng được thiết kế để có thể dễ dàng extend từ các native views , modules.

Bạn có thể tái sư dụng tất cả các native libraries trên native một cách dễ dàng.

Để tạo mọt module đơn giản trong iOS, ta tạo một class implement RCTBridgeModule protcol, sau đó wrap các function trong RCT_EXPORT_METHOD. Thêm vào đó, class phải được export với RCT_EXPORT_MODULEMODULE

#import "RCTBridgeModule.h"

@interface MyCustomModule : NSObject <RCTBridgeModule>
@end

@implementation MyCustomModule

RCT_EXPORT_MODULE();

// Available as NativeModules.MyCustomModule.processString
RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlock)callback)
{
  callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"]]);
}
@end
// JavaScript

var React = require('react-native');
var { NativeModules, Text } = React;

var Message = React.createClass({
  getInitialState() {
    return { text: 'Goodbye World.' };
  },
  componentDidMount() {
    NativeModules.MyCustomModule.processString(this.state.text, (text) => {
      this.setState({text});
    });
  },
  render: function() {
    return (
      <Text>{this.state.text}</Text>
    );
  }
});
Custom iOS views can be exposed by subclassing RCTViewManager, implementing a -(UIView *)view method, and exporting properties with the RCT_EXPORT_VIEW_PROPERTY macro. Then a simple JavaScript file connects the dots.
// Objective-C

#import "RCTViewManager.h"

@interface MyCustomViewManager : RCTViewManager
@end

@implementation MyCustomViewManager

RCT_EXPORT_MODULE()

- (UIView *)view
{
  return [[MyCustomView alloc] init];
}

RCT_EXPORT_VIEW_PROPERTY(myCustomProperty, NSString);
@end
// JavaScript

var React = require('react-native');
var { requireNativeComponent } = React;

class MyCustomView extends React.Component {
  render() {
    return <NativeMyCustomView {...this.props} />;
  }
}
MyCustomView.propTypes = {
  myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
};

var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
module.exports = MyCustomView;

Getting Started!

Requirements :

_Xcode 6.3 hoặc cao hơn.

Homebrew để cài đặt io.js, watchman, và flow.

io.js 1.0 hoặc mới hơn. io.js là phiên bản modern của Node.

nvm _

Sau khi cài đặt io.js, watchman và flow bằng các lệnh sau :

run nvm install iojs-v2
nvm alias default iojs-v2
brew install watchman
brew install flow

Sau khi cài đặt các thứ trên, ta chạy lệnh

 npm install -g react-native-cli

Để cài đặt React Native

Để khởi tạo một project mới :

 react-native init newProjects

Sau khi chạy dòng lệnh này, một folder mới sẽ được tạo newProjects/

Congrat! bạn đã tạo ra project React Native đầu tiên của mình.

Ở bài viết sau, mình sẽ hướng dẫn một demo hoàn chỉnh một ứng dụng nhỏ trên React Native.