ReactNativeはじめの一歩(Create React Native App)

## できること 
実機を使ってライブデバッグをしながらアプリを開発出来る環境を簡単に作る事が出来ます。
『Create React Native App』というFacebookとExpoで共同開発したという、環境構築ツールを利用します。
また詳しくは書きませんが、『Expo SDK』を使うと、開発版の簡易リリースが出来ます(開発版DL用のURLが発行される)。気軽に、開発したものを他人に見せる事が出来るので便利です。

## やったこと
  * インストール
     * Node.js & npm
     * npmダウングレード
     * watchmanの導入
  * 実機でのライブデバッグ
  * Hello World

※ 環境は、mac & ios :apple:

## インストール
#### Node.js & npm
公式ドキュメントではまず[Node](https://nodejs.org/en/download/)を入れよと書いてあるので、
[nodebrew](https://github.com/hokaccha/nodebrew#install)を使って最新版のNode.jsをインストールします。

#### nodebrew導入

```bash
$ curl -L git.io/nodebrew | perl - setup
$ vi .bashrc
  export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source .bashrc
$ echo $PATH
$ nodebrew help
  nodebrew 0.9.7
```
#### Node.js

Node.jsの最新版を確認します。
[こちら](https://nodejs.org/en/blog/)にバージョンについて書かれていますが、この時点では、
LTS(長期サポート版)がv8.9.1、最新版がv9.0.0となっていました。
特に業務で使うものでないので、せっかくなのでv9.0.0にします。



```bash
$ nodebrew ls-remote
v8.0.0    v8.1.0    v8.1.1    v8.1.2    v8.1.3    v8.1.4    v8.2.0    v8.2.1
v8.3.0    v8.4.0    v8.5.0    v8.6.0    v8.7.0    v8.8.0    v8.8.1    v8.9.0
v8.9.1    

v9.0.0
```

ということで9.0.0をインストール

```bash
$ nodebrew install-binary v9.0.0
Fetching: https://nodejs.org/dist/v9.0.0/node-v9.0.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
```

currentがnoneなので、

```
$ nodebrew ls
v9.0.0
current: none
```

9を使うように設定してやります。

```bash
$ nodebrew use v9.0.0
use v9.0.0

$ nodebrew ls
v9.0.0
current: v9.0.0

// こちらもOK
$ node -v
v9.0.0

// Node.jsと一緒にnpmも入ります
$ npm -v
5.5.1
```

`npm` (Node Package Manager)も一緒に入りますので、このコマンドで諸々インストールしていきます。

#### npmのダウングレード
現時点でnpm 5系は、React Nativeでは使えないという問題があるらしく、
4系にダウングレードします :thumbsdown: 

*  https://github.com/npm/npm/issues/16991
*  https://github.com/react-community/create-react-native-app/issues/233#issuecomment-309250036

```bash
$ npm -v
5.5.1

$ npm install -g npm@4.6.1
/Users/me/.nodebrew/node/v9.0.0/bin/npm -> /Users/me/.nodebrew/node/v9.0.0/lib/node_modules/npm/bin/npm-cli.js
+ npm@4.6.1
added 32 packages, removed 193 packages and updated 267 packages in 9.173s

$ npm -v
4.6.1
```

#### watchmanのインストール
さて、このまま作業を進めると、下記のエラーに遭遇することになると思うので、ここで [watchman](https://facebook.github.io/watchman/)を入れておきます。

```bash:エラー
Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288
```

* https://github.com/react-community/create-react-native-app/issues/382
* http://itexplorer.hateblo.jp/entry/20170901-react-native-install-watchman

[インストール方法](https://facebook.github.io/watchman/docs/install.html#buildinstall) にも書いてある通りに以下でインストールします。

```bash
$ brew update
$ brew install watchman
```

## ReactNativeのインストール

Create React Native App インストール

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

## プロジェクトの作成とビルトインサーバーの起動

```bash
$ cd 自分の/好きな/ディレクトリ
$ create-react-native-app MyProject

  npm start
    Starts the development server so you can open your app in the Expo
    app on your phone.

  npm run ios
    (Mac only, requires Xcode)
    Starts the development server and loads your app in an iOS simulator.

  npm run android
    (Requires Android build tools)
    Starts the development server and loads your app on a connected Android
    device or emulator.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd MyProject
  npm start

Happy hacking!
```

npmコマンドの説明と、次にするべきことが出力されてくるので、そのとおりに `npm start` してみます。

```
$ cd MyProject
$ npm start
```

![スクリーンショット.png](https://qiita-image-store.s3.amazonaws.com/0/87716/23f882a9-f475-a781-80fb-620187d6455b.png)

## 実機での確認
iPhoneでの例になりますが、App Storeから 『Expo App』をインストールします。開発中はこのアプリ上で動作確認をしながら進めます。

また、iPhoneとPCを同じWifiに接続しておきます。
出力されたQRコードをアプリで読み取ると、アプリ起動リンクが表示されるので、押下して起動。

`App.js` にべた書きされた文章が出てくれば完了です。

続いて[チュートリアル](https://facebook.github.io/react-native/docs/tutorial.html)に沿ってべた書き文章を `Hello world` に書き換えて保存をすると、アプリ側がローディングして変更が反映されます。

## 参考
* 本家React Native
  https://facebook.github.io/react-native

* Expoのドキュメント
https://docs.expo.io/versions/latest/sdk/imagepicker.html

* Node.Jｓ
https://nodejs.org/en/download/current/

* nodebrew
https://github.com/hokaccha/nodebrew#install

* watchman
https://facebook.github.io/watchman/docs/install.html#buildinstall

* Expo
https://expo.io/
https://docs.expo.io/versions/latest/introduction/installation.html