[ReactNative] 1. とりあえず動かす

AndroidとiOSとWebといちいち、Java、Swift、Html/JS/CSSを別々に書いていくのと、それぞれのプラットフォームに合ったいいアプリに出来るとは思うんだけど、プライベートではそんな時間はない！
というわけで、CordovaかReactNativeか迷ったのですが、Cordovaで開発したことあるので、今回はReactNativeで開発をしていこうと思いました。
その際のメモです。

# Requirements

## Install nvm

```js
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  7731  100  7731    0     0   8287      0 --:--:-- --:--:-- --:--:--  8286
=> Downloading nvm from git to '/Users/hogemi/.nvm'
=> Cloning into '/Users/hogrmi/.nvm'...
remote: Counting objects: 4197, done.
remote: Compressing objects: 100% (15/15), done.
remote: Total 4197 (delta 3), reused 0 (delta 0), pack-reused 4182
Receiving objects: 100% (4197/4197), 1.04 MiB | 548.00 KiB/s, done.
Resolving deltas: 100% (2441/2441), done.
Checking connectivity... done.
* (HEAD detached at v0.29.0)
  master

=> Appending source string to /Users/hogemi/.zshrc
=> You currently have modules installed globally with `npm`. These will no
=> longer be linked to the active version of Node when you install a new node
=> with `nvm`; and they may (depending on how you construct your `$PATH`)
=> override the binaries of modules installed with `nvm`:

/usr/local/lib
├── bower@1.3.12
├── coffeelint@1.9.4
├── cordova@5.0.0
├── express-generator@4.12.1
├── generator-angular@0.11.1
├── generator-angular-famous-ionic@1.4.9
├── generator-aurelia@0.4.1
├── generator-ionic-gulp@1.1.2
├── generator-karma@0.9.0
├── generator-sublime@1.6.11
├── grunt-cli@0.1.13
├── gulp@3.9.0
├── ionic@1.5.5
├── ios-deploy@1.7.0
├── ios-sim@3.1.1
├── jspm@0.15.7
├── spawn-sync@1.0.11
├── supervisor@0.6.0
└── yo@1.4.7

=> If you wish to uninstall them at a later point (or re-install them under your
=> `nvm` Nodes), you can remove them from the system Node as follows:

     $ nvm use system
     $ npm uninstall -g a_module

=> Close and reopen your terminal to start using nvm
```

```js
$ source ~/.zshrc
$ nvm

Node Version Manager

Note: <version> refers to any version-like string nvm understands. This includes:
  - full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1)
  - default (built-in) aliases: node, stable, unstable, iojs, system
  - custom aliases you define with `nvm alias foo`

Usage:
  nvm help                                  Show this message
  nvm --version                             Print out the latest released version of nvm
  nvm install [-s] <version>                Download and install a <version>, [-s] from source. Uses .nvmrc if available
    --reinstall-packages-from=<version>     When installing, reinstall packages installed in <node|iojs|node version number>
  nvm uninstall <version>                   Uninstall a version
  nvm use [--silent] <version>              Modify PATH to use <version>. Uses .nvmrc if available
  nvm exec [--silent] <version> [<command>] Run <command> on <version>. Uses .nvmrc if available
  nvm run [--silent] <version> [<args>]     Run `node` on <version> with <args> as arguments. Uses .nvmrc if available
  nvm current                               Display currently activated version
  nvm ls                                    List installed versions
  nvm ls <version>                          List versions matching a given description
  nvm ls-remote                             List remote versions available for install
  nvm version <version>                     Resolve the given description to a single local version
  nvm version-remote <version>              Resolve the given description to a single remote version
  nvm deactivate                            Undo effects of `nvm` on current shell
  nvm alias [<pattern>]                     Show all aliases beginning with <pattern>
  nvm alias <name> <version>                Set an alias named <name> pointing to <version>
  nvm unalias <name>                        Deletes the alias named <name>
  nvm reinstall-packages <version>          Reinstall global `npm` packages contained in <version> to current version
  nvm unload                                Unload `nvm` from shell
  nvm which [<version>]                     Display path to installed node version. Uses .nvmrc if available

Example:
  nvm install v0.10.32                  Install a specific version number
  nvm use 0.10                          Use the latest available 0.10.x release
  nvm run 0.10.32 app.js                Run app.js using node v0.10.32
  nvm exec 0.10.32 node app.js          Run `node app.js` with the PATH pointing to node v0.10.32
  nvm alias default 0.10.32             Set default node version on a shell

Note:
  to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`)
```

## Install node

```js
$ nvm install node && nvm alias default node

Downloading https://nodejs.org/dist/v5.3.0/node-v5.3.0-darwin-x64.tar.xz...
######################################################################## 100.0%
WARNING: checksums are currently disabled for node.js v4.0 and later
Now using node v5.3.0 (npm v3.3.12)
default -> node (-> v5.3.0)
```

### check
<img width="585" alt="Screen Shot 2015-12-23 at 15.10.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/18705/1b4b5353-7740-9545-f8ee-4d821d50f482.png">

```js
$ npm -v
3.3.12
```

omg....

```js
$ npm install -g npm@2
```

## Install watchman

```js
$ brew install watchman

==> Installing dependencies for watchman: pcre
==> Installing watchman dependency: pcre
==> Downloading https://homebrew.bintray.com/bottles/pcre-8.38.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring pcre-8.38.yosemite.bottle.tar.gz
🍺  /usr/local/Cellar/pcre/8.38: 146 files, 5.9M
==> Installing watchman
==> Downloading https://homebrew.bintray.com/bottles/watchman-4.1.0.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring watchman-4.1.0.yosemite.bottle.tar.gz
🍺  /usr/local/Cellar/watchman/4.1.0: 20 files, 316K
```

## Install flow

```js
$ brew install flow

==> Downloading https://homebrew.bintray.com/bottles/flow-0.19.1.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring flow-0.19.1.yosemite.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completion has been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/flow/0.19.1: 6 files, 6.0M
```

# Set up
## iOS

- need Xcode 7.0
 
## Android

- read [this](https://facebook.github.io/react-native/docs/android-setup.html)

# Install react-native-cli

```js
$ npm install -g react-native-cli

/Users/hogemi/.nvm/versions/node/v5.3.0/bin/react-native -> /Users/hogemi/.nvm/versions/node/v5.3.0/lib/node_modules/react-native-cli/index.js
react-native-cli@0.1.7 /Users/hogemi/.nvm/versions/node/v5.3.0/lib/node_modules/react-native-cli
├── semver@5.1.0
├── chalk@1.1.1 (ansi-styles@2.1.0, supports-color@2.0.0, escape-string-regexp@1.0.4, has-ansi@2.0.0, strip-ansi@3.0.0)
└── prompt@0.2.14 (revalidator@0.1.8, pkginfo@0.3.1, read@1.0.7, winston@0.8.3, utile@0.2.1)
```

# Quick Start

```js
# at project root
$ react-native init testProject

This will walk you through creating a new React Native project in /Users/hogemi/workspace/react-native/test/testProject
Installing react-native package from npm...
Setting up new React Native app in /Users/hogemi/workspace/react-native/test/testProject
To run your app on iOS:
   Open /Users/hogemi/workspace/react-native/test/testProject/ios/testProject.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd /Users/hogemi/workspace/react-native/test/testProject
   react-native run-android
```

# 参考
- [[React Native] 1.1 MacでReact Nativeを使ってAndroidアプリを動かそうとして、failed to find Build Tools revision 23.0.1 というエラーが出た時の対応](http://qiita.com/satomin/items/803053b4f5d9249b2c94)