ReactNative学習記 in 2016


普段は、Androidをメインで開発していて、たまにiOSやその他のサーバーサイドの開発を行うのですが、たまたまお仕事の関係で両環境用のアプリを作ることになり、かつ相手先もWeb屋さんということでReactNativeを使用しての開発をしております。
今回は、最近1週間ほどで、調べられるだけ調べたReactNativeの直近の情報などをまとめた私的な勉強の記録になります。

まだまだ初心者なので、ぜひコメントいただければと思います。


## 導入

### ReactNativeの設定

```
# NodeとWatchmanを追加
$ brew install node
$ brew install watchman
# ReactNativeを追加
$npm install -g react-native-cli
# プロジェクトの作成
$ react-native init AwesomeProject
$ cd AwesomeProject
# 起動(それぞれ、エミュレーターをしている必要がある)
$ react-native run-ios
$ react-native run-android
```

#### 参考リンク
- http://facebook.github.io/react-native/docs/getting-started.html#content

### TypeScriptの設定

インストールとTypescriptの設定

```
# Typescriptのインストール
$ npm install --save dev typescript
# Typingsのインストール
$ npm install typings --global
# srcフォルダの作成
$ mkdir src
$ cd src
# Typescriptの初期化
$ tsc --init
# Typingsの初期化
$ typings init
# ReactNativeの型定義ファイルの検索
$ typings search react-native
# ReactNativeの型定義ファイルのインストール
$ typings install dt~react dt~react-native --save --global
# NodeModulesに型定義ファイルがある場合のインストール
$ typings install npm:react-native-router-flux --save
# srcフォルダの追加
$ mkdir src
```

`tsconfig.json`ファイルの編集

```tsconfig.json
{
    "compilerOptions": {
        "target": "es6",
        "jsx": "react",
        "outDir": "build",
        "rootDir": "src",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": false,
        "experimentalDecorators": true,
        "preserveConstEnums": true,
        "allowJs": true,
        "sourceMap": true
    },
    "filesGlob": [
        "typings/index.d.ts",
        "src/**/*.ts",
        "src/**/*.tsx"
    ],
    "exclude": [
        "index.android.js",
        "index.ios.js",
        "build",
        "node_modules",
        "__tests__"
    ],
    "compileOnSave": false
}
```

`typings.json`ファイルの確認
reactとreact-nativeの型定義が反映されていることを確認する

```typings.json
{
  "name": "sampleapp",
  "dependencies": {},
  "globalDependencies": {
    "react": "registry:dt/react#0.14.0+20161024223416",
    "react-native": "registry:dt/react-native#0.34.0+20161025145826"
  }
}

```

`.gitignore`に以下を追加する

```.gitignore
build
typings
```

#### 参考リンク
- https://medium.com/react-weekly/react-native-and-typescript-ad57b7413ead#.d7dgr4b8f
- http://blog.okazuki.jp/entry/2016/01/11/095156
- http://qiita.com/literalice/items/d83249a5646abcb0bec6
- http://qiita.com/literalice/items/d83249a5646abcb0bec6

### gulpの設定

gulpのインストール

```
$ npm install gulp --save-dev
$ npm install gulp-typescript --save-dev
$ npm install gulp-plumber--save-dev
$ npm install gulp-watch --save-dev
$ touch gulpfile.js
```

`gulpfile.js`にスクリプトを記述する

```gulpfile.js
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var typescript = require('gulp-typescript');
var watch = require('gulp-watch');

var tsProject = typescript.createProject('./tsconfig.json');
var outDir = './build/';
var tsFiles = './src/**/*.{ts,tsx}';

gulp.task('ts:compile', function() {
  return gulp.src(tsFiles)
    .pipe(plumber())
    .pipe(tsProject())
    .pipe(gulp.dest(outDir));
});

// Auto compile
gulp.task('watch', function() {
  watch(tsFiles, function() {
    gulp.run('ts:compile'); 
  });
});
```

gulpコマンドを使用

```
$ gulp watch
```

#### 参考リンク
- http://mikazuki.hatenablog.jp/entry/2016/01/25/160000

### Fluxなどのライブラリの設定:

```
$ npm install flux --save
$ npm install events --save
$ npm install keymirror --save
$ npm install object-assign --save
```

## コーディング

## TypeScript
- http://blog.okazuki.jp/entry/2016/01/11/095156
- http://mikazuki.hatenablog.jp/entry/2016/01/25/160000

### Flux
- http://qiita.com/shohey1226/items/ae4580449afb259a064e

### [Redux](https://github.com/jposts/redux)
- https://egghead.io/courses/getting-started-with-redux
- http://twins-tech.hatenablog.com/entry/2016/07/02/092926
- http://blog.thebakery.io/todomvc-with-react-native-and-redux/
- http://qiita.com/shohey1226/items/0de513a8b5b863286eb2
- https://github.com/xgrommx/awesome-redux

### タグ一覧：

### ライフサイクル（Componentクラス）
- https://facebook.github.io/react/docs/react-component.html
- http://qiita.com/kawachi/items/092bfc281f88e3a6e456
- http://qiita.com/yukika/items/1859743921a10d7e3e6b#_reference-826db32edadeb1b61f19

#### Mounting
These methods are called when an instance of a component is being created and inserted into the DOM:

- constructor()
- componentWillMount()
- render()
- componentDidMount()

#### Updating
An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:

- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()

#### Unmounting
This method is called when a component is being removed from the DOM:

- componentWillUnmount()

#### Other APIs
Each component also provides some other APIs:

- setState()
- forceUpdate()

#### Class Properties

- defaultProps
- displayName
- propTypes

#### Instance Properties

- props
- state


### カスタムタグの作成：

```
//トップのとき。自動生成されているはず
AppRegistry.registerComponent('Sample', () => Sample);
//それ以外のとき。こっちは手動で書く
module.exports = Sample;
```

### スタイル
- flex -> weightと同様に割合を指定する
- flexDirection -> 向きを指定する
	- row -> 横並び
- flexWrap -> 回り込みの設定を行う
	- nowrap -> 回り込みなし※デフォルト
	- wrap -> 回り込みあり
- justifyContent -> 親コンポーント内の子コンポーネントの配置を決める（directionの方向に対して）
	- flex-start -> 先頭から配置する※デフォルト
	- flex-end -> 後ろから配置する
	- center -> 真ん中に配置する
	- space-between -> 子コンポーネントを先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟む
	- space-around -> 各子コンポーネントの均等なスペースを先頭の前、最後の後に加えて配置する
- alignItems -> directionの方向とは別方向のサイズ合わせの配置を決める
	- stretch -> 子コンポーネントを伸ばして配置する※デフォルト
	- flex-start -> 子コンポーネントを先頭から配置する
	- flex-end -> 子コンポーネントを後ろに配置する
	- center -> 真ん中に配置する
- alignSelf -> alignSelfはalignItemsで配置したものを子コンポーネント側で上書きする

## 画面遷移
- https://github.com/aksonov/react-native-router-flux
- http://twins-tech.hatenablog.com/entry/2016/06/05/101916


## IDE

### DECO
https://www.decosoftware.com/

### VS CODE
http://goo.gl/CchLSs

### Nuclide.io
https://nuclide.io/

### UNIFIED IDE
http://nuclide.io/docs/platforms/react-native/

### PlayGround
https://rnplay.org/


## まとめサイト

### Use React Native

React Nativeのニュースサイトです。メルマガもあります。
http://www.reactnative.com/

### js.coach

ReactとReact Nativeのライブラリ検索サイトです。
ライブラリの説明をみればなんとなく可能性をつかめるでしょう。
https://js.coach/react-native

### awesome react native

各種ライブラリで見受けれる、まとめリポジトリです。
ざっと見るとReact Nativeがわかってくると思います。
https://github.com/jondot/awesome-react-native

### 55 ReactNative Examples
ReactNativeのサンプル集
https://react.rocks/tag/ReactNative

## 使用しそうなライブラリ

### 全体・設計
- [Redux routing](https://github.com/aksonov/react-native-redux-router)
- [Flux routing](https://github.com/aksonov/react-native-router-flux)

### UI系
- [ナビゲーションバー](https://js.coach/react-native/navbar-native)
- [下タブ](https://js.coach/react-native/react-native-navigation)
- [下タブ2](https://js.coach/react-native/react-native-smartbar)
- [ViewPager](https://github.com/race604/react-native-viewpager)
- [FAB](https://js.coach/react-native/react-native-action-button)
- [ブラー](https://js.coach/react-native/react-native-blur)
- [NativeBase](https://github.com/GeekyAnts/NativeBase)
- [Material UI](https://js.coach/react-native/react-native-material-ui)

## サンプルコード
### 設計がしっかりとしているRedux
- https://github.com/wwayne/react-native-nba-app
- https://github.com/iZaL/my-appointment
- https://github.com/catalinmiron/react-native-dribbble-app
- https://github.com/khirayama/ReactNative-flux-todo
- https://github.com/start-react/native-starter-kit

### シンプル系
- https://github.com/iSimar/HackerNews-React-Native
- https://github.com/taskrabbit/ReactNativeSampleApp
- https://github.com/roman01la/react-native-babel

### Tips系
- https://github.com/wix/react-native-navigation
- https://github.com/gcanti/tcomb-form-native
- https://github.com/brentvatne/react-native-login
- https://github.com/glenjamin/ReactNativeFlexboxPlayground
- https://github.com/almost/react-native-sqlite

## 参考記事
- http://qiita.com/susieyy/items/aa8ad519cc62dd7ae592
- https://egghead.io/courses/getting-started-with-redux
- http://qiita.com/imaimiami/items/8e62a5111fe48a65b911
- http://qiita.com/y_matsuwitter/items/a7fc88e566b80b4c1eea
- http://wpdev.hatenablog.com/entry/2015/06/06/121210
- http://qiita.com/shohey1226/items/5185fcba7381bf4da2f2
- http://qiita.com/shohey1226/items/f413c65b7f110dcb955c#_reference-0ea3cfab5ce7889e3060
- http://qiita.com/shohey1226/items/ae4580449afb259a064e
- http://twins-tech.hatenablog.com/entry/2016/06/05/101916
- http://blog.takanabe.tokyo/2015/06/21/1118/
- http://postd.cc/react-native-ios-app/
- https://developers.eure.jp/tech/react_native_pomodoro/
- [データベースについて](http://www.wazalab.com/2016/08/14/react-native%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E8%80%83%E5%AF%9F/)