5日間でreact native + expo + firebaseアプリをゼロから基本まで理解するまでやったこと

「react native？　なにそれ美味しいの？」状態から、５日間やったことをまとめておきます。

#まずはexpoの環境構築した

[公式ページ](https://docs.expo.io/versions/latest/introduction/installation.html)を参考にやる

macに、nodeとnpm入れて

```
npm install -g expo-cli

```

あと、iOSシミュレータのためにxcodeを入れた

それで

```

expo start

```

何か聞かれるので、とりあえずblankを選択する

するとhello worldなアプリが立ち上がる

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ノリと勢いだけでreact  native expo を始めた<br><br>とりあえず環境構築+hello worldだけできた</p>&mdash; れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1064163974290137088?ref_src=twsrc%5Etfw">2018年11月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

expoをスマホのアプリストアで検索してインストールして、QRコード読み取ると、スマホでもアプリが立ちあがる

#React Native　+　expo + Firebaseの基本を英語で解説してくれている動画シリーズを写経した

[![ビデオが開けなかった場合に表示されるテキスト](http://img.youtube.com/vi/KnwfK807Mgc/0.jpg)](https://www.youtube.com/watch?v=KnwfK807Mgc&list=PLy9JCsy2u97m-xWAxGwHZ2vITtj4qBKDm)

React Native　+　expo　+　Firebaseの基本を英語で解説してくれている神シリーズ

- firebase authを使ったログイン
- firebase realtime databaseを使ったToDoアプリ
- firebase を使ってアプリに通知を送る

この辺を解説してくれている。めっちゃ分かりやすくて神。写経した。

最後の通知を送るやつは、なぜかうまく通知トークンが取れなかったので飛ばした。何か見落としたのかも。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">React Native expo + Firebaseでメールログイン＆Facebookログイン実装までできた！youtube動画の写経だけど...<br><br>簡単すぎワロタ。。。Firebaseめっちゃすごいなこれ。<a href="https://t.co/T503DdTPEm">https://t.co/T503DdTPEm</a> <a href="https://t.co/QdcAM8touR">pic.twitter.com/QdcAM8touR</a></p>&mdash; れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1064210587440140288?ref_src=twsrc%5Etfw">2018年11月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#インスタグラムのUIクローンするチュートリアル動画をやった

[![ビデオが開けなかった場合に表示されるテキスト](http://img.youtube.com/vi/cgg1HidN4mQ/0.jpg)](https://www.youtube.com/watch?v=cgg1HidN4mQ&list=PLy9JCsy2u97lNUL3e3R-uoMQv5GDvf22T)

これも上の動画の作者が公開しているシリーズ。こっちも分かりやくて神。

[react-navigation](https://reactnavigation.org/)を使ってる部分が、ヴァージョンが変わっててそのままだと動かないので注意。[公式ページのドキュメント](https://reactnavigation.org/docs/en/stack-navigator.html)を見て修正した。


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Youtubeの動画のサンプルの写経終わった〜〜〜<br><br>UIだけだけど、割と頑張った<br><br>#5 Instagram UI Profile Tab Tutorial Part 2 | React Native(UI) Layout Se... <a href="https://t.co/73v6Oh5Ete">https://t.co/73v6Oh5Ete</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから <a href="https://t.co/2PlsIFTgkp">pic.twitter.com/2PlsIFTgkp</a></p>&mdash; れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1064952142811717633?ref_src=twsrc%5Etfw">2018年11月20日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#サンプルコードを理解する

facebookログイン写真投稿アプリのサンプルが公開してくれてる人がいたので、ローカルで動かして、コードを読む

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">このサンプルのソースコード読み込んで見た。reduxってやつが肝っぽいけど、詳しくないので調べる。道のりはまだまだ遠い。<br><br>React Native + Firebaseによる写真投稿アプリのサンプル（Paintings） <a href="https://t.co/YOCntZbTtZ">https://t.co/YOCntZbTtZ</a></p>&mdash; れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1065289044525891584?ref_src=twsrc%5Etfw">2018年11月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

微妙に分からなかった。reduxて何だろう

reduxについて分かりやすい動画があった。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">混乱して来る<a href="https://t.co/m3g3Q0UVdT">https://t.co/m3g3Q0UVdT</a></p>&mdash; れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1065313033709215744?ref_src=twsrc%5Etfw">2018年11月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

まだ分からないのでqiita記事を読んだらだいたい分かった。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">読んだ！なんとなく分かった！<br><br>たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 <a href="https://t.co/2DHD3fiXIp">https://t.co/2DHD3fiXIp</a></p>&mdash; れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1065550172988436482?ref_src=twsrc%5Etfw">2018年11月22日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ここで、さっき出てきたreduxの動画を写経してreduxの基礎が腑に落ちた。

こっちも読んだ。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">これ読む<br><br>ログインフォーム(認証機能)で覚えるReact NativeのReact Reduxの使い方 <a href="https://t.co/e3gmDTO8pb">https://t.co/e3gmDTO8pb</a> <a href="https://twitter.com/rara_bass?ref_src=twsrc%5Etfw">@rara_bass</a>から</p>&mdash; れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1065560783994515462?ref_src=twsrc%5Etfw">2018年11月22日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ここで、最初に出てきたfirebaseで写真投稿できるアプリのソースを読み返すとだいたい理解できた。

ここまで５日間。

バックエンドはfirebaseでデータ保存、reduxでステートメント管理、UIはnative-base, 画面遷移はreact-navigaitonで頑張るって感じの流れっぽい。