STEP 1での成果物 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

STEP 1ではFirebaseをReact+Reduxのアプリに統合していきます。Reduxの公式ページに記載されているタスク管理アプリを使用します。

Firebaseからタスク一覧を読み込んだり、Firabaseへタスクを追加したり、タスクの完了フラグを変更します。

f:id:yucatio:20180923231721p:plain

f:id:yucatio:20180923232528p:plain

Reduxのサンプルとほぼ見た目は変わらないですが、データベースにデータを保存しているので、ページを再読み込みしてもタスクの一覧が削除されません。

システム図は以下です。

f:id:yucatio:20180923230338p:plain

誰でも読み込めて書き込めるアプリをまずは作ります。ユーザの認証は行いません。ユーザ認証はSTEP 2で扱います。

チュートリアルでは以下のモジュールを使用します。

それでは、STEP 1のチュートリアルを始めましょう。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com