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とかは動くのに、、、なぜ？）
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
これからどんどん使ってみるのでなんかあったら追記していきます