React Native環境構築手順

※ 自分用・共有用メモ

## ReactNativeとは
Build native mobile apps using JavaScript and React

<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/3752/a60a2fc7-1ea4-0d23-c7f9-d59e8acf0aed.png" />
https://facebook.github.io/react-native/
ReactとJSを使用して、iOSとAndroidのネイティブアプリ開発を行うことができるフレームワーク


## getting started
バージョン: React Native 0.54

### インストール

```
brew install node
brew install watchman
```

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

### Xcode/Android Studioのセットアップ
* Xcodeのインストール
	* Xcode Command Line Toolsのインストール（Xcodeを開いてPreferences > Command Line Tools）

* Androidのインストールと設定
	* Android Studioの設定
		* SDK Managerで下記にチェック
			* Android 6.0 (Marshmallow) 
				* Google APIs
				* Android SDK Platform 23
				* Intel x86 Atom_64 System Image
				* Google APIs Intel x86 Atom_64 System Image
				* Android SDK Build-Tools 23.0.1 

				![GettingStartedAndroidSDKManagerMacOS.png](https://qiita-image-store.s3.amazonaws.com/0/3752/b1ae1b50-c3a4-2b69-1b3b-436a11e87ef0.png "GettingStartedAndroidSDKManagerMacOS.png")
		![GettingStartedAndroidSDKManagerSDKToolsMacOS.png](https://qiita-image-store.s3.amazonaws.com/0/3752/c3c25fa3-8274-9134-4059-c9a110a59b1b.png "GettingStartedAndroidSDKManagerSDKToolsMacOS.png")

		* AVDの作成
		![GettingStartedCreateAVDx86MacOS.png](https://qiita-image-store.s3.amazonaws.com/0/3752/e9363a2b-7b61-0d94-c44c-fc427351d5bb.png "GettingStartedCreateAVDx86MacOS.png")

		
	* 環境変数の設定
	
		```
		export ANDROID_HOME=$HOME/Library/Android/sdk
		export PATH=$PATH:$ANDROID_HOME/tools
		export PATH=$PATH:$ANDROID_HOME/platform-tools
		```


## プロジェクト作成

```
react-native init AwesomeProject
```

## アプリ実行（シュミレーター）

```
cd AwesomeProject
react-native run-ios or react-native run-android // Androidの場合、emulatorを別途起動してからでないと実行できなかった
```

<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/3752/3c9ee2da-62d8-83d6-1455-0f4505fb3e9c.png" />

※ ターミナルからAndroidのエミュレータ実行

```
emulator -list-avds // インストールされているAVDの一覧表示
emulator -avd {avd_name} // AVDを指定してエミュレータの起動
```
※ emulator -avd {avd_name}で「PANIC: Missing emulator engine program for 'x86' CPUS.」エラーが出た場合

```
export ANDROID_SDK=$HOME/Library/Android/sdk
export PATH=$ANDROID_SDK/emulator:$ANDROID_SDK/tools:$PATH
```
参考: https://stackoverflow.com/a/49511666

### オプショナル


#### その他の開発ツール
* flow(静的型チェックツール)のインストール

	* ```react-native init ~```した時点で.flowconfigができているので、中身をみてflowのversionを確認する

	```
	~
	suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
	
	[version]
	^0.65.0
	```

	* yarnやnpmで対応するflow-binをインストールする

	```
	npm i flow-bin@0.65.0 --save-dev
	```

	* package.jsonのscriptにflowコマンドを追加する
	
	```
	"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "flow": "flow"
  },
	```
	
	* flowコマンドを実行する
	
	```
	npm run flow
	```
	
	```
	// 実行結果
	> AwesomeProject@0.0.1 flow /Users/ST0124/Source/AwesomeProject
	> flow
	
	No errors!
	```

    * エディターで使うためのセットアップ
        * エディターにflowのプラグインをセットアップする
        * .babelrcファイルに設定を追加する

		```
		{
		  "presets": ["react-native", "flow"]
		}

		```
		![スクリーンショット 2018-03-16 10.41.11.png](https://qiita-image-store.s3.amazonaws.com/0/3752/69b22e4f-6459-47c9-4539-2d940535a1c6.png "スクリーンショット 2018-03-16 10.41.11.png")
※ 参考: https://medium.com/react-native-training/getting-started-with-react-native-and-flow-d40f55746809


* eslintのインストール

	```
	npm i eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-watch babel-core babel-eslint babel-preset-airbnb babel-preset-react-native -D
	```
	
	* .eslintrcを以下の設定にする
	
	```
	{
	  "parser": "babel-eslint",
	  "extends": "airbnb",
	  "plugins": ["react", "jsx-a11y", "import"],
	  "rules": {
	    "react/jsx-filename-extension": ["off"],
	    "linebreak-style": ["off"],
	    "no-undef": ["error"],
	    "react/sort-comp": ["off"],
	    "react/prefer-stateless-function": ["off"],
	    "no-use-before-define": ["off"],
	    "no-useless-concat": ["off"]
	  }
	}
	```
	
    * エディターにeslintのプラグインをセットアップする  
	
	![スクリーンショット 2018-03-16 11.52.44.png](https://qiita-image-store.s3.amazonaws.com/0/3752/788f0a8e-b943-3981-0d9f-6176d8b1269c.png "スクリーンショット 2018-03-16 11.52.44.png")

	

* prettierのインストール

	```
	npm install --save-dev --save-exact prettier
	```
	
	* エディターにprettierとeslintを共存して使うためのプラグイン等をセットアップする。
	
	
<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/3752/733465ee-e814-526a-4a01-b2e57ec8d0d8.png" />
※ 画像引用元: [Building the F8 App](http://makeitopen.com/)

### Redux
```
npm install --save redux
npm install --save react-redux
```


## 参考
### 公式のgetting started
https://facebook.github.io/react-native/docs/getting-started.html

### with Native Code
* iOS: https://facebook.github.io/react-native/docs/getting-started.html
* Android: https://facebook.github.io/react-native/docs/getting-started.html


### ライブラリリンク集
https://native.directory/
https://github.com/jondot/awesome-react-native
https://github.com/brillout/awesome-react-components

### オープンソースアプリ
* f8: https://github.com/fbsamples/f8app
* HackerNews-React-Native: https://github.com/iSimar/HackerNews-React-Native