ハロー！ React Native - ついんてっく

Hello! React Native

どうも兄です。
React Nativeの概要、印象、始め方を共有します。
僕はWebが本職で、ネイティブはかじった程度です。そんな中、同僚からReact Nativeがとても良いとの話を聞き触りだしてハマったというのが経緯です。React Nativeを触って要所で感じたことは「Web脳 <-> Native脳」の切り替えが少ないということです。
実際に触ってみた印象を、まだまだ勉強中の身ですが、なるべく噛み砕いて伝えれれば幸いです。

React Nativeの概要

facebook.github.io Facebook社のOSSで、JavascriptとReactを用いてネイティブアプリを作るライブラリです。React.jsを触ったことある人は記法が似ている事に驚くと思います。

We call this approach “learn once, write anywhere.”

Facebookが提唱するアプローチです。「一度覚えれば、どこでも書ける」 実際に触ってみて、これが誇張表現でないと感じました。

React.js

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

ReactDOM.render(<Timer />, mountNode);

React Native

var React = require('react');
var ReactNative = require('react-naative');
var {View, Text} = ReactNative;

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <View><Text>Seconds Elapsed: {this.state.secondsElapsed}</Text></View>
    );
  }
});

module.exports Timer;

これはA JavaScript library for building user interfaces | ReactのサンプルをReact Nativeに置き換えたものです。実際に動かしてないのでerrorになるかもしれませんが、ここで言いたいのは、ほぼ、renderの書き換えでいけた。という事実です。 getInitialState,componentDidMount,componentWillUnmountのmethodも用意されています(初期処理やpropsの変更のmethod)。カメラやローケションなどを使うデバイス特有の所や、エントリポイントなど異なる書き方はありますが、 React Nativeのとっつき易さを感じてもらえれば幸いです。

※上記の書き方はES5の書き方になります。React NativeはあるバージョンからES6をサポートしています(すみません忘れましたw) そのため、OSSのComponentを使おうとすると、ES5とES6が混じってるのでどっちを使うか混乱すると思います。
今のプロジェクトの状況がex.プロジェクトでは主にES5を使っている。場合は無理にES6を使う必要はないのかなぁと思います。。。ただ、今から出るOSSがES6で書かれてるケースが多いので何とも言えませんが(汗)
僕はCoffee Scriptで書くケースが多かったのと、練習のためES6に挑戦しています。

次回は、始め方を書きたいと思います。