React Native勉強メモ　〜導入編〜 #reactnative

はじめに

Android JavaエンジニアがReact Nativeの勉強をした際のメモ。

バージョン：React Native 0.44

Reactとは

コンポーネント志向でViewを扱うJavaScriptのフレームワーク。
プロパティに応じてViewを変える。
JSXでXml + CSSっぽくレイアウトを記述できる。
状態の変化があったときに仮想DOMを書き換えてから、実際のDOMを差分だけ更新する。
ReactではView層のみ扱う。fluxアーキテクチャで状態を管理するReduxを併用すると良い。

React Nativeとは

Reactでモバイルアプリを作れるようにするフレームワーク。
JavaScriptランタイムからネイティブコードのUIを動かす。

Reduxとは

facebookが提唱するfluxパターンの実装の１つ。
fluxはデータの流れを１方向に強制してわかりやすくする。
https://app.codegrid.net/entry/react-ex-1

Reduxの説明はこちらがわかりやすい。
- Redux入門【ダイジェスト版】10分で理解するReduxの基礎
http://qiita.com/kiita312/items/49a1f03445b19cf407b7
チュートリアルの和訳とまとめ
- Redux. From twitter hype to production
http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9
こちらのアニメーションがとてもわかりやすい

環境構築

React Native
公式ページのGetting Startedに従ってインストール https://facebook.github.io/react-native/docs/getting-started.html
Redux
http://redux.js.org/
react-recux
ReactとReduxをつなぐ。 https://github.com/reactjs/react-redux
Nuclide
Facebook製のAtomプラグイン https://nuclide.io/docs/quick-start/getting-started/
Chrome
DevToolでデバッグ
Xcode, Android Studio
シミュレータ/エミュレータ, ネイティブコード編集, アイコン設定、リリースビルドなどなど何かと要る。

仮想デバイス準備

iOSシミュレータ

react-native run-ios

Cmd + Dでデバッグメニュー
Cmd + Rでリロード

Androidエミュレータ

react-native run-android

Cmd + Mでデバッグメニュー表示。
（実機は端末を振るとデバッグメニュー）
R,R("R"2連打)でリロード

コマンドラインからAndroidエミュレータを起動する。

$ android list avd
$ emulator -avd <エミュレータ名>

なんかエラーでた。

ERROR:./android/qt/qt_setup.cpp:28:Qt library not found at ../emulator/lib64/qt/lib
Could not launch '../emulator/qemu/darwin-x86_64/qemu-system-x86_64': No such file or di

こちらに従って./bashrcに書く。
http://www.wazalab.com/2017/04/08/%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%8B%E3%82%89android-emulator%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/

./bash_profileにこれを書いとく。

if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi

デバッグ手順

Command Line Paletteで"Nuclide React Native: Start Packager"を実行
react-native run-ios
Nuclide React Native: Start Debuggingを実行
シミュレータ/エミュレータのデバッグメニューから"Enable JS Remotely"を選択
Chromeで⌘⌥Jを押し、DevToolでデバッグ開始。

署名付きリリースビルド

Android
コマンドラインからビルド
https://facebook.github.io/react-native/docs/signed-apk-android.html
iOS
Xcodeでビルド
https://facebook.github.io/react-native/docs/running-on-device.html

入門向けチュートリアル

以下でそれぞれの基礎を体験しながら学ぶ。

React 公式チュートリアル
https://facebook.github.io/react/tutorial/tutorial.html
まずは基本となるReact自体の練習から。
ブラウザで動く３並べ(=tit-tat-toe)を例として、Reactの基本を学べる。
ベースになるソースコードが用意されており、手順に沿ってそれに加筆・修正していく。
以下のようなReactの肝となる機能を体験できるので、React Nativeだけやりたい人にもオススメ。
- propsで表示内容を決める。
- クリックイベントでstateを変える。
- 操作履歴を保存してタイムトラベル。
React Native 公式チュートリアル
https://facebook.github.io/react-native/releases/next/docs/tutorial.html
React自体の説明は少なめで、React Native向けのコンポーネントの使い方を学ぶ。
"The Basics"で簡単なリスト表示までの例。
"Guides"で画面遷移やネイティブコードとの連携、デバッグやビルドの仕方が解説されている。
Redux 公式サンプル
http://redux.js.org/docs/basics/ExampleTodoList.html
ToDoリストを作って、データの追加から反映する流れを学ぶ。

おわりに

開発環境と心の準備ができました。

実践編につづく。

React Native勉強メモ 〜導入編〜