React Native ✖️ Expoで始める楽々アプリ開発環境

in React Native

最終更新日: 2017/06/26
環境: macOS, nvm(v0.33.2), node(v6.11.0)
目的: React Nativeの開発環境を作る

上記はこの記事を記した当時の環境です。最低でも3ヶ月に一度は最新の情報を取り入れたものにアップデートをするようします。

また、この記事に対するPull Requestはこちらへ

React Native...facebookやinstagramのモバイルアプリに導入されておるReactベースのコード1つでiOSとAndroidアプリをビルドするネイティブアプリのハイブリッド開発環境。

この手の発想は今までにも存在しその良し悪しは議論されてきたが、筆者はJavascriptランタイムによるアプローチ、facebookを中心とするreactの思想(learn once, write anywhere)やコミュニティの熱量からこの技術への確信を得ています。

また今回使用するexpoと呼ばれるreact nativeのsdk(当人曰く「translation machine for mobile app code」)は非常に筋の良い快適な開発環境を提供してくれる。またexpoのチームメンバーはQuoraのco-founderでfacebookやamazonでも活躍したCharlie Cheeverを中心とする大変優秀なメンバーでY combinatorからの出資という後押しもあり個人的にはreact nativeを語る上では外せないスタックである。

参考リンク: http://fortune.com/2016/08/23/charlie-cheever-y-combinator/

How to

React Native ✖️ Expo: 10分ほどの初期設定を済ませば、xcodeもandroid studio不要でvim(好きなエディタ)でyarn(npm)のwatchタスクで実機に差分をビルドしつつという快適な開発環境を得れます。

(vimで開発してfile更新でQRコードでsyncさせた実機にbuildみたいな感じでやっています。)

1. Install nvm

nodeのバージョン管理マネジャーを入れていない方は入れる事をオススメします。nvm が中でもオススメです。

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

~/.bash_profile, ~/.zshrc などのお使いのshell profileに

export NVM_DIR="$HOME/.nvm"  
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

を追加して下さい。

2. Install Node

Nodeを入れます。LTS版の最新バージョンを入れると良いです。

$ nvm install v6.11.0 
$ nvm use v6.11.0

以下のコマンドで適切なバージョンがインストールされている事を確認します。

$ node -v

3. Install YARN

better npmなポジションであるyarnを使います。
npmより高速で、きちっとしたバージョン管理が出来ます。

$ npm install -g yarn

4. Install create-react-native-app

アプリの雛形はcreate-react-native-appで作る事をオススメします。少し前までは使いづらい印象でしたが、素朴でプレーンな設定をいい感じにしてくれるのでオススメです。react-native公式のドキュメントでも推しています。

$ npm install -g create-react-native-app

5. Initialize app

今回は AwesomeProject というアプリを作ることにします。

$ create-react-native-app AwesomeProject 
$ cd AwesomeProject
$ git init
$ git add -A .
$ git commit -am 'First commit'
$ yarn start

とすると

というQRコードがコマンドラインに出てくるので、実機で Expo(https://expo.io/) のアプリをインストールし指示に従ってQRコードをカシャリ。

6. いじってみる

App.js の文言などをいじってみると実機の方の文言が更新される事が確かめられます。

<View style={styles.container}>  
  <Text>Open up App.js to start working on your app!</Text>
  <Text>Changes you make will automatically reload.</Text>
  <Text>Shake your phone to open the developer menu.</Text>
</View>  

7. next things

react-native.jpではこの環境をベースにに実際にプロダクションアプリを3つほどメンテしている筆者の経験を元に記事を記してゆきます。

もしreactそれ自体に馴染みのない方は、reactの勉強を少しされると良いと思います。

react nativeの事始めであれば公式のドキュメント(https://facebook.github.io/react-native/docs/tutorial.html )をオススメします。

今のままですと最小構成でredux機構などが備わっていないのでyarn add [package name] でパッケージを適宜追加する事をオススメ致します。

このエントリーをはてなブックマークに追加

Comments