【React Native勉強メモ】環境構築手順

Reactive Nativeを利用するために必要な環境構築から簡易プロジェクト作成実行まで記述する．

具体的には，React Nativeを動作させるのに必要な各種コンポーネントのインストール，React Nativeの簡易プロジェクトを作成し，実行手順も記述する．

# **目次**

- 1. React Nativeについて
- 2. 実行環境
- 3. 環境構築
    - 3.1. XCode
    - 3.2. Homebrew
    - 3.3. node
    - 3.4. watchman
    - 3.5. React Native CLI
- 4. プロジェクトを作成・実行
- 5. プログラムの修正・反映

# **1. React Nativeについて**

[React](https://reactjs.org/)とはFacebookが開発したJavaScriptのフレームワークで，[React Native](https://facebook.github.io/react-native/)はReactをモバイル(iOSとAndroid)で使えるようにしたフレームワークである．

React Nativeは言語としてJavaScriptを利用．React NativeはWEBエンジニアがWEB開発で培ったノウハウを使ったモバイルアプリ開発を可能とした画期的なフレームワーク．React Nativeで作成したプログラムはiOSとAndroidのどちらの環境でも動作することができ，一つのコードで２つの環境で動作するため個別に２つのモバイルアプリ開発を実施する必要がなく，企業としては低コストでモバイルアプリ開発が可能である．

# **2. 実行環境**

```bash
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.13.4
BuildVersion:	17E199
```

# **3. 環境構築**

Reactive Nativeを利用するために必要な環境構築手順を記載．上から順に実施していけば良い．

## **3.1. XCode**

XCodeをインストール．最新版を取得すること．既にインストール済みの場合は，念の為に最新化すること．

## **3.2. Homebrew**

nodeをインストールするためにHomebrewをインストールする．

[Homebrew](https://brew.sh/)のサイトからリンクを取得する

```bash
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

Homebrewの最新化

```bash
$ brew update
```

Homebrewのバージョンを確認

```bash
$ brew --version
Homebrew 1.6.9
```

## **3.3. node**

nodeをインストール．version 4.5以上を取得する．

```bash
$ brew install node

$ node -v
v10.6.0

$ npm -v
6.1.0
```

nodeがすでにインストール済みであれば必要に応じてアップグレード

```bash
$ brew upgrade node
```

## **3.4. watchman**

watchmanをインストール．watchmanはfacebook製のファイル/フォルダ監視ツールです．watchmanについては[公式サイト](https://facebook.github.io/watchman/)を参照．

```bash
$ brew install watchman

$ watchman -v
4.9.0
```

## **3.5. React Native CLI**

React Native CLIをインストール

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

react-nativeのバージョンを確認する．
正しく動作していれば下記のようなメッセージが表示される

```bash
$ react-native -v
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory
```

### トラブルシューティング 

動作確認ができない場合は，パスが通っていない可能性がある．私の場合はパスが遠ていないため，下記の通りエラーが帰ってきた．

```bash
$ react-native
-bash: react-native: command not found
```

profileを開く

```bash
$ vi ~/.bash_profile
```

パスを追加

```
export PATH="$HOME/.npm-packages/bin:$PATH"
```

設定を読み込む．これでOK!

```bash

$ source ~/.bash_profile
```

バージョンを確認

```bash
$ react-native -v
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory
```

# **4. プロジェクトを作成・実行**

## **4.1. プロジェクト作成**

プロジェクトの作成は1〜2分ほど時間がかかる

```bash
$ pwd
/Volumes/DataDsk/ReactNative/20180706_sample_project
$ react-native init sample
```

プロジェクトの作成が完了すると下記のようなメッセージがコンソールに表示される．これはプロジェクトの実行方法が記載されている．

```bash
To run your app on iOS:
   cd /Volumes/DataDsk/ReactNative/20180706_sample_project/sample
   react-native run-ios
   - or -
   Open ios/sample.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Volumes/DataDsk/ReactNative/20180706_sample_project/sample
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android
```

見て分かる通りReactNativeはプロジェクトを作成するとiOSとAndroidの両方のプロジェクトを作成する．どちらの環境でも実行が可能である．

## **4.2. プロジェクト実行**

早速実行してみる．書きを実行することで，プロジェクトがビルドされ，iOSのシミュレーターがlaunchされる．コンソール上では非常に沢山のログが流れるが気にせずしばらく待つ．初回のビルドは時間が掛かるが次回からのビルドは時間がかからない．私の環境だと約5分ぐらい初回のビルドにかかった．

```bash
$ cd sample
$ react-native run-ios
```

かなり時間かかるがじっと待つ・・・

しばらくするとコンソールがポップアップしiOS Simulatorが開く．コンソールには`Loading dependency graph, done.`と出ているが，もとのコンソールでは大量なログが流れていることから，まだビルド中だということがわかる．

じっと待つ．．．

もとのコンソールで，下記のように表示される．

```bash
The following commands produced analyzer issues:
	Analyze Base/RCTModuleMethod.mm normal x86_64
(1 command with analyzer issues)

Installing build/Build/Products/Debug-iphonesimulator/sample.app
Launching org.reactjs.native.example.sample
org.reactjs.native.example.sample: 11002
```

ポップアップしたコンソールには下記のように表示されロードが完了したことがわかる．

```bash
BUNDLE  [ios, dev] ../../index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (505/505), done.
```

下記がiOS Simulatorの画面．これが表示されればOK!

![image01.png](https://qiita-image-store.s3.amazonaws.com/0/262328/e2ec7256-756e-45cf-0465-dba19baf5e02.png)

# **5. プログラムの修正・反映**

## **5.1. プログラムの修正**

```javascript:index.js
// library
import React from 'react';
import { Text, AppRegistry } from 'react-native';　

// component
// 表示内容をComponentで定義する．下記の場合だと*Hello World*の文字列がスクリーン上に表示されることは容易に想像出来る．
const App = () => (
  <Text>Hello World</Text>
);

// rendering
// 作成したComponentをアプリに登録します
AppRegistry.registerComponent('sample', () => App);
```

## **5.2. 修正内容をアプリに反映**

修正内容をアプリに反映する方法は2つ

下記をコマンドラインで実行すればシミュレーターに反映される．

```bash
$ react-native run-ios
```

あるいは，シミュレーターを選択し，`COMMAND+r`でリフレッシュすればシミュレーターに反映される．