どうも僕(@matumotto)です。 ReactNativeを久しぶりに覗いたらバージョンがめっちゃあがってたので、1からやりなおしていきます。

※OS X環境想定
node: 4.2.2, react: 15.3.2, react-native: 0.34.0

ReactNativeでHelloWorldまでやってみる

環境準備

• まずnode.jsとwatchmanをインストール

brew install node
brew install watchman

※watchmanは推奨。Facebook製のファイル監視ツール。

• npmでReactNativeのコマンドツールをインストール

npm install -g react-native-cli

プロジェクト作成〜ビルド

• まずはプロジェクトを作成する

react-native init TestProject

• 移動

 cd TestProject

• Android用にビルドして実行 ※事前にエミュレータを立ち上げておいてください(もしくは実機接続)

 #実機でやる場合のみ必須
 adb reverse tcp:8081 tcp:8081
 react-native run-android

※ iOSの場合は run-ios になります。

アプリが立ち上がった！

すこし文言を替えてみます！
起動したままで、プロジェクト内にある”index.android.js”を変更してみましょう！

• 文言を変更する

 sed -i '' 's/Welcome to React Native!/Hello React!/g' index.android.js

変更をアプリに反映

アプリのメニューからReloadを選択するとテキストが更新されます。
Hello React! やったね！

おしまい。

つぎは何かモノを作っていきます。