「react native？ なにそれ美味しいの？」状態から、５日間やったことをまとめておきます。
#まずはexpoの環境構築した
公式ページを参考にやる
macに、nodeとnpm入れて
npm install -g expo-cli
あと、iOSシミュレータのためにxcodeを入れた
それで
expo start
何か聞かれるので、とりあえずblankを選択する
するとhello worldなアプリが立ち上がる
ノリと勢いだけでreact native expo を始めた
— れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) 2018年11月18日
とりあえず環境構築+hello worldだけできた
expoをスマホのアプリストアで検索してインストールして、QRコード読み取ると、スマホでもアプリが立ちあがる
#React Native + expo + Firebaseの基本を英語で解説してくれている動画シリーズを写経した
React Native + expo + Firebaseの基本を英語で解説してくれている神シリーズ
- firebase authを使ったログイン
- firebase realtime databaseを使ったToDoアプリ
- firebase を使ってアプリに通知を送る
この辺を解説してくれている。めっちゃ分かりやすくて神。写経した。
最後の通知を送るやつは、なぜかうまく通知トークンが取れなかったので飛ばした。何か見落としたのかも。
React Native expo + Firebaseでメールログイン＆Facebookログイン実装までできた！youtube動画の写経だけど...
— れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) 2018年11月18日
簡単すぎワロタ。。。Firebaseめっちゃすごいなこれ。https://t.co/T503DdTPEm pic.twitter.com/QdcAM8touR
#インスタグラムのUIクローンするチュートリアル動画をやった
これも上の動画の作者が公開しているシリーズ。こっちも分かりやくて神。
react-navigationを使ってる部分が、ヴァージョンが変わっててそのままだと動かないので注意。公式ページのドキュメントを見て修正した。
Youtubeの動画のサンプルの写経終わった〜〜〜
— れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) 2018年11月20日
UIだけだけど、割と頑張った
#5 Instagram UI Profile Tab Tutorial Part 2 | React Native(UI) Layout Se... https://t.co/73v6Oh5Ete @YouTubeさんから pic.twitter.com/2PlsIFTgkp
#サンプルコードを理解する
facebookログイン写真投稿アプリのサンプルが公開してくれてる人がいたので、ローカルで動かして、コードを読む
このサンプルのソースコード読み込んで見た。reduxってやつが肝っぽいけど、詳しくないので調べる。道のりはまだまだ遠い。
— れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) 2018年11月21日
React Native + Firebaseによる写真投稿アプリのサンプル（Paintings） https://t.co/YOCntZbTtZ
微妙に分からなかった。reduxて何だろう
reduxについて分かりやすい動画があった。
混乱して来るhttps://t.co/m3g3Q0UVdT
— れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) 2018年11月21日
まだ分からないのでqiita記事を読んだらだいたい分かった。
読んだ！なんとなく分かった！
— れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) 2018年11月22日
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 https://t.co/2DHD3fiXIp
ここで、さっき出てきたreduxの動画を写経してreduxの基礎が腑に落ちた。
こっちも読んだ。
これ読む
— れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) 2018年11月22日
ログインフォーム(認証機能)で覚えるReact NativeのReact Reduxの使い方 https://t.co/e3gmDTO8pb @rara_bassから
ここで、最初に出てきたfirebaseで写真投稿できるアプリのソースを読み返すとだいたい理解できた。
ここまで５日間。
バックエンドはfirebaseでデータ保存、reduxでステートメント管理、UIはnative-base, 画面遷移はreact-navigaitonで頑張るって感じの流れっぽい。