create-react-native-appから本格的な開発に移行するためのTips #JavaScript

Qiita初投稿です。
記事に起こしてみると思ったより書きたい事が多かったので何回かに分けて投稿します。

初めまして、普段はReactでフロントエンド寄りのWeb屋さんをしています。
最近までスマホアプリ経験の開発はありませんでしたが、React Nativeならできそうだと感じ学習中です。

前置き

FacebookとExpoが共同で開発したcreate-react-native-appというツールが超便利です。

スマホアプリの開発経験が無かった私でも簡単に実機上で世界に挨拶できました。
新しい技術を学習する際の敵は兎にも角にも環境構築だと思いますので、（最終的に必要になるとはいえ）そこをスキップ出来るのは初学者には大変有難い事です。
しかし、チュートリアルを終えた後、本格的な開発に移行するのは簡単な事ではないです。
create-react-appにも同じ事が言えますが、チュートリアル用に色々なものを隠してくれているので、環境をカスタマイズするコストについては自力で環境を作った時より大きくなると思っています。

そういった開発の「第2歩目」的な記事があまり無かったので、その立ち位置を目指しています、
以下のような方のお役に立てるかもしれません。

Reactについては基本的な事が分かっている。
スマホアプリ開発の経験がない。
React Nativeでサンプルアプリを動かしてみたけれど、ここから本格的な開発までどうもっていくか悩んでいる。

各個別のやるべきことについては既に詳しい記事が沢山ありますので、本記事は「何をすれば本格的な開発の土台を作れるのか」が分かることを目標にし、詳細な説明は薄くしていこうと思います。

基本的な考え方

まずは何か一つでも試しに作り上げてみてから、詳しい勉強をしていけば良いと思っているタイプなので、集中すべきこと（React Native）以外は可能な限り楽します。

極力React以外書きたく無い
→必要になるまでnpm run ejectしない。
インフラやバックエンドも手を抜けるなら抜きたい
→firebaseを利用、その2あたりで詳しく書きます。
環境のコンテナ化とかCIも一旦考えない
→本格的にプロダクトにしようと思った時に考える。

環境

macで開発しています。

node: v10.5.0(nodebrew経由)
npm: v6.1.0
watchman: 4.9.0

とりあえずHello World

公式のGetting Startedに従っていれば問題無いはずです。
watchmanのインストールを忘れずに

公式ドキュメント
 ReactNativeはじめの一歩(Create React Native App)

スタンドアロン版のビルド

expのコマンドが使える必要があります。

また、ビルド用の設定が必要になります。
公式のドキュメントのほか、参考になる記事も多くあるのでそれらを参考にしてください。

apiファイルのビルド

exp build:ios

apkファイルのビルド

exp build:android

環境変数を扱う

スマホアプリだからどうという話ではなく、根っこの話ですが、
重要な情報を秘匿するためにも、環境（development,productionなど）に応じて動作を変えるためにも、環境変数を扱う方法は最初に考慮すべきです。
.envにアプリでしようしたい環境変数を書いてそのファイルをバージョン管理から外すという方法でやっていきます。

react-native-dotenvを使用

npm i --save react-native-dotenv
以下のような内容の.envファイルを作成して定数を定義する
```
API_KEY="hogehoge"
```
以下のように記載することでプログラム側で使用可能
```
import { API_KEY } from 'react-native-dotenv'

const apiKey = API_KEY
```
.gitignoreに.envの除外を追記

reduxとredux-sagaを入れる

スマホアプリ絡みの話ではありませんが、
「React」で「本格的な開発」となればこのあたりは高確率で必要になってくると思います。

redux

reactで状態を扱う場合、現状マストと言っても過言ではないフレームワークなので出来れば身につけておきましょう。

公式ドキュメント
 Redux入門【ダイジェスト版】10分で理解するReduxの基礎

Reduxを理解するためにはFluxというアーキテクチャの理解が重要になってきます。
Fluxアーキテクチャの概要

redux-saga

reduxで非同期処理を行うためのミドルウェアです。
これが一番使いやすいと思います。

公式ドキュメント
 redux-sagaで非同期処理と戦う

UIコンポーネント

必須では無いですが、デザインには自信があまり無いのでUIコンポーネントは極力利用していきたい派です。

今回はNativeBaseをお試しで使用
使い勝手が悪そうであれば別のに乗り換えます。

公式のGetStartedに「Setup with CRNA」の項目があるので、そちらに従って設定

ただ、Robotoフォント読み込み完了前にNativeBaseを使用したコンポネントのレンダリングが走ってしまうとエラーが発生するため、以下の記事に記載のある方法で回避する必要がありました

NativeBaseでのRoboto_mediumフォントの読み込みに関するErrorについて

もっと良いやり方があるような気もします。
フォント周りは開発が進んでいったら手を入れようと思っているので、その時に再度考えてみます。

カスタマイズやテーマの指定は公式ドキュメントにある「Setup to theme NativeBase apps」を参考に設定
（特に今は活用していないですが）

スタイルの指定

現状、特に工夫せずreact-nativeのStyleSheetを使用する方法をとっています。
Reactではsassを使っていたので若干違和感はありますが、慣れてきました。

定義側

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
　　title: {
　　　　textAlign: 'center'
　　},
});

使用側

<View>
　　<Title style={styles.title}>Header</Title>
</View>