React Native 入門してみた① 環境構築編 + Hello World

## 前提
- Reactを知っている人
- React Nativeを使ってアプリを作りたい人
- iOS Onlyです(とりあえず...)

入門してみて学んだことの備忘録みたいなものです。

## 経緯
いろいろあってフロントエンドから2年弱離れており、JS界隈から取り残されていました。
今回、Reactで開発する機会があり、感を取り戻す(リハビリ)ことと、React再学習を踏まえてReactNativeに入門することにしました。
リリース間もない頃、一度さらっと触った経験もありますが、以前は環境構築で疲れてしまった記憶があります。
ReactNativeがどう進化しているのか知るのも楽しみでもありました。


## React Nativeとは？
[React Native · A framework for building native apps using React](https://facebook.github.io/react-native/)

> Build native mobile apps using JavaScript and React

JavaScriptとReactを使ってモバイルアプリiOS・Annroidを開発するフレームワークです。
Facebookが開発しており、Facebookアプリは元論、SkypeやUberなどで採用されています。
フロントエンドエンジニア(JavaScript)特にReactエンジニアであればすぐに開発できるのが特徴です。

## 学んだこと
まずは、[チュートリアル](https://facebook.github.io/react-native/docs/tutorial)を一通り一読

その他、下記サイトを読ませて頂きました。

- [世界一シンプルなReactNative + Reduxチュートリアル① - Qiita](https://qiita.com/kaba/items/8c46767413a3c8d15f00)
- [React Native + Expoを用いて、1週間でアプリを作ってみて学んだこと - ログミーTech](https://logmi.jp/tech/articles/320479)
- [React Native でアプリ開発をして良かったところ・ツラかったところ - BizReach Tech Blog](https://tech.bizreach.co.jp/posts/300/react-native/)
- [ReactNativeで何が出来るのかさっと知れるサイト、その他リンクまとめ - Qiita](https://qiita.com/imaimiami/items/8e62a5111fe48a65b911)
など

周辺ライブラリの調査など

- [jondot/awesome-react-native: Awesome React Native components, news, tools, and learning material!](https://github.com/jondot/awesome-react-native)
- [2018年 React Nativeで真剣なアプリを開発するなら、    絶対使うライブラリー！ - KOKENSHAの技術ブログ](https://kokensha.xyz/reactnative/react-native-production-ready-library-2018/)


### 実装したもの
実際に実装を試してのが下記です。

- Expoの環境構築 + Hello World : [React Native 入門してみた① 環境構築編 + Hello World - Qiita](https://qiita.com/garbanzo/items/abd892a12aae2cc19530)
- React Navigationで画面遷移:  [React Native 入門してみた② 画面遷移編 - Qiita](https://qiita.com/garbanzo/items/61eb9d389324057f226b)
- axiosでHttpアクセス:  [React Native 入門してみた③ Httpアクセス編 - Qiita](https://qiita.com/garbanzo/items/a2bb2cdb0f65273ed84d)
- カメラ実装(Expo): [React Native 入門してみた④ カメラ実装編 - Qiita](https://qiita.com/garbanzo/items/f861982efe2d80e84d84)
- データ永続化(redux-persist): [React Native 入門してみた⑤ データ永続化編 - Qiita](https://qiita.com/garbanzo/items/f10c08a0888e84f3af4f)
についてです。

多かったので記事を分割してます。
まだ学習途中だったりするので、おいおい追加しようと思います。

### リポジトリ
サンプル実装したコードをGitHub上げてあります。

- [Gitbanzo/react-native-sample: React Native Sample Code](https://github.com/Gitbanzo/react-native-sample)

ちなみにExpoに開発したサンプルアプリをUpしてありますので良かったら見て下さい。

- [garbanzo on Expo](https://expo.io/@garbanzo)


## 環境構築/下準備

開発環境

| ライブラリ名 | バージョン | 備考 |
| -------- | --------|------|
| Mac | Mojava(10.14.3) |   |
| Node.js | v10.15.2 |   |
| npm | 6.8.0 |   |
| Xcode | 10.2.1|   |

開発は`VSCode`を使用してます。
基本は、**React + TypeScript + Expo**の構成で開発を行います。

### Expoとは？
[Expo](https://expo.io/)

ReactNativeのビルド環境・開発支援ツールです。

チュートリアルでは、「Quick Start」「Building Projects with Native Code」の2パターンの環境構築手順があります。
「Quick Start」は**expo-cli**を使用するパータン
「Building Projects with Native Code」は、**react-native-cli**を使用するパターン
今回は、セッテイングが簡単なQuickStartの**expo**を選択するパターンにします。

※Nodejs v.8以上が必須です

### Expoインストールと新規プロジェクト作成

#### Expoをインストールする

```
npm install -g expo-cli
expo -V
2.11.6
```

#### 新規アプリケーションを作成する

```
expo init {AppName}
```
`AppName`は開発するアプリ名を入力して下さい。
今回はアプリ名`Sample`とします。
入力後、テンプレートの選択できます。

```
? Choose a template:
  ----- Managed workflow -----
❯ blank         minimal dependencies to run and an empty root component
  tabs          several example screens and tabs using react-navigation
  ----- Bare workflow -----
  bare-minimum  minimal setup for using unimodules
```  

それぞれ

- blank: 最小限構成のアプリを作成します。
- tabs: react-navigationを使用したナビゲーションテンプレートを作成します
- bare-minimum: ejectされた状態のテンプレートを作成します。ios/Androidのnativeコードを生成します。

今回は、サンプルなのでblankを選択してます。
続いて、ホームスクリーンに表示されるアプリ名を入力します。

```
? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ › 50% completed
 {
   "expo": {
     "name": "<The name of your app visible on the home screen>",
     "slug": "Sample"
   }
 }
```

入力したらインストールが開始されます。
下記が表示されたら完了です

```
(省略)
Your project is ready at /project/path/Sample

To get started, you can type:

  cd Sample
  npm start
```

## Hello World
まずは、HelloWordを表示してみます
上記で記載しましたが、React + TypeScriptの構成にするのでインストールします

### イントールする ~TypeScript対応~

ライブラリ一覧

| ライブラリ名 | バージョン | 備考 |
| -------- | --------|------|
| expo  | 32.0.0   |   |
| react | 16.5.0   |   |
| typescript | 3.3.3333 |   |


#### 1.パッケージインストール
TypeScriptとReact、ReatNatrive、expoの型定義ファイルをインストール

```
npm install typescript @types/react @types/react-native @types/expo
```

#### 2.tsconfigを初期化

```
tsc --init
```
成功すれば、`message TS6071: Successfully created a tsconfig.json file.`と表示され、`tsconfig.json`が追加されています

#### 3.tsconfigを編集
先ほど生成された`tsconfig.json`を修正します

```
- "target": "es5",
+ "target": "ES2018",
...
- //"jsx": "preserve",
+ "jsx": "preserve",
...
```
targetを`es5`から`ES2018`に変更します。これは環境によって変更して下さい。
コメントアウトされている`"jsx": "preserve"`を有効にします。


#### 4.ファイル拡張子変更
ファイル拡張子が`.js`になっているので`.tsx`に変更します
JSXを使用するファイルは`.tsx`として、その他は、`.ts`とします
コンポーネントファイルでなかったとしてもJSX構文を記載したらその時点で`.tsx`になるので注意が必要です。

```
mv App.js App.tsx
```

これでインストール完了です。

### 起動してみる
`npm start`or `expo stat`で起動します。
すると、`http://localhost:19001`(他に使用していない場合)でWebブラウザが開きます
「Run on iOS simulator」をクリックしてSimulatorを起動します。

ExpoはiOSアプリもあり、インストールして実機で試す事も出来ます。
iPhoneで開く場合は、QRコードを読み取って起動するのが便利です。


もし上手く起動しない場合は、下記を試してみて下さい。
1. xcodeがインストールされている事を確認
2. xcodeを起動する
3. `sudo xcode-select -s /Applications/Xcode.app`を実行する
4. Simulatorアプリを起動してから実行してみる

### 表示を「Hello World!」に変更してみる

#### 構成
```
src
├── App.tsx
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
└── tsconfig.json
```
このファイル達は、`create-react-app`で生成されたファイルです。
メイン画面となるのが`App.tsx`ファイルです。

#### 編集
App.tsxを編集し`Hello World!`を表示します。

```App.tsx
...

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
-       <Text>Open up App.js to start working on your app!</Text>
+       <Text>Hello World!</Text>
      </View>
    );
  }
}

...
```
Textコンポーネントの`Open up App.js to start working on your app!`を`Hello World!`に変更します。
変更し保存すると、HotReloadによりSimulatorの表示が自動で「Hello World!」と更新されます

## リポジトリ
[react-native-sample/1-HelloWorld at master · Gitbanzo/react-native-sample](https://github.com/Gitbanzo/react-native-sample/tree/master/1-HelloWorld)

## まとめ ~入門してみて~
入門しての全体を通しての感想ですが、リリースもしてないし、まだまだ学習する事は多いですが、`ReactNative + Expo `での開発は簡単かつ、Reactを知っていれば何も問題なくすぐに参入出来るのではないだろうか。
何より学んで楽しかったっ!
おいおいReactNativeでアプリをリリースしてその際記事にします。

TypeScriptを学ぶべきと思い導入したがまだまだ経験不足...
と、サンプルがTypeScript実装が少ないように思えます。
個人で開発する分には、ちょっとコストかかりすぎるので不要かなとも思ってしまいます。(つまづいたのが、何箇所かあったので...)

まだ続きがあるので興味があれば読んで下さい。