Umi and Satomi

シーズー犬うみと飼い主Satomiが楽しく生活してみます

1. Getting Started

It takes really long to make applications (Android, iOS, Web), with their own language. The method is good to make better UI and performance. But in private time, there is not so much time!!! So, I choose cross-platform technology. Cordova, Titanium, React Native. I've experienced Cordova and Titanium, so this time I decide to use React Native.

Requirements

Install nvm

$ 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
$ 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

$ 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

Screen Shot 2015-12-23 at 15.10.28.png

$ npm -v
3.3.12

omg....

$ npm install -g npm@2

Install watchman

$ 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

$ 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

Android

Install react-native-cli

$ 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

# 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