ReactNativeを使ってみる

##ReactNativeとは
ReactNative http://facebook.github.io/react-native/

ReactNativeとはReactjsベースでネイティブアプリを構築できるSDK（プラットフォーム？）で、Facebookが作っています。FacebookやInstagram, AirBnBなどのアプリがReactNativeで書かれているらしいです。
現在はiOS, Androidともに動かせるようになっている（v0.45.0現在）

内部ではJavaScript のコードがコンパイルされてネイティブコードになるわけではなく、内部に JavaScript ランタイム (JavaScriptCore) があって JS はそのランタイム上で動く。

内部には Objective-C で書かれた、JS <=> ネイティブブリッジの実装があり JavaScript ランタイムからはそのブリッジが呼ばれて、UIKit の各種コンポーネントや iOS ネイティブの API が呼ばれるようになっている。

JavaScript ランタイムの実行とネイティブコードは、ドキュメントをみる限り非同期で実行されていて各種ネイティブモジュール群も別スレッドで動いており、パフォーマンス的な劣化はそれほど大きくないと謳っている。

#開発環境
Document参照
http://facebook.github.io/react-native/docs/getting-started.html#content

• Mac OS X
• Xcode(最新推奨)
• 適当なエディタ

##準備

• Homebrewをインストールhttp://brew.sh/index_ja.html

• node.jsが入っていない場合はnodejsをインストール

brew install node

• watchmanをインストール(bug監視のため)

brew install watchman

• flowをインストール(使いたかったら。。。flowはtype errorをチェックしてくれるツールです)

brew install flow

• reactNativeをグローバルにインストール

npm install -g react-native-cli

• 作りたいディレクトリに移動し、プロジェクトを作成

react-native init hogeProject

ここでなんと僕の場合

zsh: command not found: react-native

###ふぁっ！？

sudoしてもプロジェクト立てるディレクトリでnpm initしてもダメ。。。
どうやらこちらの記事http://qiita.com/umechiki/items/a1de903a2e5e27f5c606
にあるようにPATHが通ってなかったみたいです。（gulpとかは動くのに、、、なぜ？）

.zshrc

if [ -d ${HOME}/node_modules/.bin ]; then
    export PATH=${PATH}:${HOME}/node_modules/.bin
fi

を入れて

source ~/.zshenv

これで再びコマンドを叩くとプロジェクトを立てることが出来ました。

その後、プロジェクトのディレクトリ内で

$ cd hogeProject
$ npm i  <--これでnode_modulesをインストール
$ react-native link

#はじめてみる
できたプロジェクトの中から

hogeProject.xcodeproj
というのを起動
とりあえず実行してみると

みたいなページがiOSシュミレータで立ち上がります。

立ち上がらない場合はターミナルから

$ react-native run-ios

を実行してみてください

起動するときにターミナルが立ち上がると思いますがこのターミナルは閉じてはいけません。もし閉じてしまった時にはXcodeからもう一度ビルドしましょう。

#参考ページ

• ReactNativeでサクッとReactjs記事リーダーを作ってみるhttp://qiita.com/y_matsuwitter/items/a7fc88e566b80b4c1eea
• React Native ファーストインプレッションhttp://qiita.com/naoya@github/items/ecda4d3089902dcbea53

これからどんどん使ってみるのでなんかあったら追記していきます