react-nativeの開発環境を構築する(Watchman + Atom + Nuclide)

[Masiello, Eric, Friedmann, Jacob]のMastering React Native

React-native + Watchman

WatchmanをインストールしてからReact Native CLIをインストールします。WatchmanはReactNativeプロジェクトのファイルの変更を監視するために使うらしいです。ホットリロードってやつですね。

$ brew install watchman
$ npm install -g react-native-cli

次に、React Nativeプロジェクトを作成します。とりあえずiosエミュレータで動かしてみて問題ないことを確認します。後は、redux, redux-thunkも使いたいので追加しておきます。

$ react-native init ProjectName
$ cd ProjectName
$ react-native run-ios
$ npm install react-redux redux redux-thunk –save

Atom + Nuclide

Nuclideのインストール手順は公式サイトに載っています。英語です。
https://nuclide.io/docs/editor/setup/#quick-install

  1. Atomを開く
  2. Atomのメニュー「Atom」「環境設定」をクリック
  3. 表示された「設定」タブの左リストにある「インストール」をクリック
  4. ”Nuclide”と入力しEnterを押す
  5. 表示された”nuclide”パッケージをインストールする

次に、Nuclideを実際に動かしてデバッグしてみます。なお、以下の手順だとしっかりNuclideを使いこなせていないようなのですが、どうも公式ドキュメントの通りやってもデバッグが出来たり出来なかったりで安定しなかったので、Chromeを介してデバッグしています。もしかしたら最新版では安定しているかもしれません。

  1. AtomでCommand+Shift+P
  2. 「Nuclide React Native: Start packager」を実行する
  3. Atomのコンソールに以下のような文字列が出力されていることを確認する
    Running packager on port 8081.
    React Native Packager
    Looking for JS files in: /Users/xxx/work/ProjectName
    React packager ready.
    Loading dependency graph, done.
  4. $ react-native run-iosを叩き、エミュレータ上でアプリを動かす
  5. エミュレータでCommand+Dを押す
  6. メニューの「Debug JS Remotely」をクリックする
  7. ブラウザで http://localhost:8081/debugger-ui が自動的に開かれる
  8. 例えばChromeで開いたときは、右クリック「検証」で開発者ツールを表示する
  9. 「Sources」タブで、左のツリーから「debuggerWorkers.js」「localhost:8081」の下にアプリのソースが配置されている
  10. アプリのソースにブレイクポイントを設置すればちゃんと引っかかって止まる

なお、エミュレータからデバッガを使おうとすると"Maximum call stack size exceeded"というエラーが発生する場合は、react-nativeの新しいバージョンを使うことで解決します。package.jsonの"dependencies"で"react-native": “0.42.0-rc.1″のバージョンを指定しましょう。

React Native debugging – Maximum call stack size exceeded
https://github.com/facebook/nuclide/issues/900

サイト運営雑記