ReactNativeを試してみる

概要

ReactNativeを試してみた。現在iOSのみサポート。Androidサポートはcoming soonらしい。

準備

Getting Startedを参考に進める。

Node.jsのインストール

• HomebrewでもインストールできるがNodebrewやnvmを使った方が良いと思う。
• nodevbrew
• nvm

watchmanとflowのインストール

$ brew install watchman

$ brew install flow

watchmanとflowはサンプルを動かすだけならインストールしなくても問題ないと思う。

ReactNativeクライアントのインストール

$ npm install -g react-native-cli

サンプルプロジェクトの作成

$ react-native init AwesomeProject

xcodeでプロジェクトを読み込む

• AwesomeProject/AwesomeProject.xcodeprojをXcodeで開く
• Runボタンを押す
• エミュレータが起動

サンプルを編集してみる

• index.ios.jsをエディタで開く
• Welcome to React Native!の後ろにHello World!を追記してみる。

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native! Hello World!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js{'\n'}
          Press Cmd+R to reload
        </Text>
      </View>
    );
  }
});

• 保存してcmd+R

変更が反映される。

デバッグ

• Xcode上でcmd+Rを押すとChromeのタブが開く
• タブ上でReactNativeのJSコードが実行されているらしく、Chromeのdeveloperツールでデバッグできるようだった。

感想

思ってた以上に簡単にサンプルを動かせた。デバッガの使い方がよく分かってないので、もう少し触ってみようと思う。