【自由研究①：react native】Expoを使って、react native環境を作ってみる

夏休み中ですが、休暇明けに「react native」 +「redux」の案件に携わるので 自由研究な感じで諸々やってみたメモをまとめてみようと思います。 今日は、Expoを触ってみた感想をまとめました。

---

目次：

---

Expo.io

ちょっと前までは、「react native」はreact-native-cliを使用してアプリ構築する手段 しななかったようですが、xcodeやAndroid Stdioでビルドする必要があったりして、結構手間なようです。 また、実機テストが通常のネイティブアプリ開発のようにUSB接続が必要があります。

今回、Expo.ioというサービスを使用すると幸せになれるらしいということが分かったので こちらを使用してみることにします。react nativeの公式ページを見てもこれ使うサンプルが あるのでこちらを使用する方向になりそうです。

---

create-react-native-appのインストール

Expoを使用するために、create-react-native-appを使用してreact-nativeプロジェクトを 作成する必要があります。

npm install -g create-react-native-app

---

プロジェクト作成

プロジェクトを作成します。

create-react-native-app hogefuga

---

XDEのインストール

Desktop Development Tool: XDEをインストールします。

以下を参照しました。 Installation | Expo v15.0.0 documentation

---

Expoアプリのインストール

各デバイス向けのExpoアプリをGoogle Play/App Storeよりインストールします。 自分はとりあえず、Androidアプリをインストールしました。

以下を参照しました。 Installation | Expo v15.0.0 documentation

---

XDEでプロジェクトを読み込み

「Project」-「Open Project」でプロジェクトを読み込みます。

「Share」でQRコードを表示します。

QRコードをExpoアプリでスキャンする

Expoアプリ（今回は、Android）を起動して、「Scan QR Code」を選択し QRコードを読み込みます。

しばらくすると、作成したサンプルプロジェクトが起動します。

---

まとめ

Expoを使用したreact native環境は、非常にお手軽に実機テストまで出来て良い感じでした。 ビルド待ちが少し気になりましたが・・。

がっつりネイティブ依存の機能を作り込む場合は、「react-native-cli」+「各IDE」を使用して開発するのかもしれ ませんが現状は「Expo」+「create-react-native-app」で充分に思いました。

今日はここまで。

---

いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック

JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

入門 React ―コンポーネントベースのWebフロントエンド開発

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用