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

公開日:2018-11-24
最終更新:2018-11-24
※この記事は外部サイト(https://qiita.com/retoruto_carry/items/830...)からのクロス投稿です

「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で頑張るって感じの流れっぽい。

記事が少しでもいいなと思ったらクラップを送ってみよう!
72
+1
@retorutocarryの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする