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
$ 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
- need Xcode 7.0
Android
- read this
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
