@retorutocarryの技術ブログ

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

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

公式ページを参考にやる

macに、nodeとnpm入れて

npm install -g expo-cli

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

それで


expo start

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

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

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

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

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

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

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

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

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

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

react-navigationを使ってる部分が、ヴァージョンが変わっててそのままだと動かないので注意。公式ページのドキュメントを見て修正した。

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

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

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

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

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

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

こっちも読んだ。

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

ここまで5日間。

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