React + Redux + Firebase チュートリアル : タスク管理アプリを作る【目次】

React + Redux + Firebase + Material-UI で、タスク管理アプリを作ります。Reduxの公式ページに載っているサンプルを元に、react-reduxで作られたアプリにfirebaseとMaterial-UIを導入します。

f:id:yucatio:20181201144558p:plain

準備
STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る
STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する
STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する
STEP 4 : Material-UIの導入
ソースコード
環境
依存ライブラリ
参考

準備

React + Redux + Firebase でアプリを作るための前提知識と勉強の仕方

STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る

FirebaseをReact+ReduxのExampleアプリに統合します。まずはタスクデータをFirebase Realtime databaseに保存し、誰でも書き込めて読み込めるようにします。

STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する

Firabaseのauthenticationを導入して、ユーザごとにタスクを出し分けます。ユーザは自分のタスクだけが見れて、自分のタスクだけに書き込むことができます。

STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する

Cloud Functions for Firebaseを使用して、新着/更新があったタスクを表示します。タスクを選択すると、タスクを作成/更新したのユーザのタスク一覧が開きます。タスク一覧の画面は、react-routerを使ってユーザごとに一意のパスにします。

STEP 4 : Material-UIの導入

Material-UIを導入して、見た目を整えます。

ソースコード

ソースはgithubで公開しています(急いで作ったのでブランチが汚いです。。)。各STEPでの成果物のリンクを貼っておきます。

STEP	URL
STEP 1	https://github.com/yucatio/todo-sample/tree/3a1be7218d7b74184a046a436535f42b44d253ba
STEP 2	https://github.com/yucatio/todo-sample/tree/cfdc1e01fe0c29b72e55eda210b1c81083b1fb07
STEP 3	https://github.com/yucatio/todo-sample/tree/b99cb21972a9972b6d02e5c7110f846fb8e4c54e
STEP 4	https://github.com/yucatio/todo-sample/tree/79c4ee4aad447665600cce54186d9adfe0ec96d4

環境

OS : Mac Sierra 10.12.6
npm: 6.2.0
yarn: 1.9.4
create-react-app: 2.0.4
firebase-tools: 4.2.1

依存ライブラリ

package.jsonより抜粋

"@material-ui/core": "^3.4.0",
"@material-ui/icons": "^3.0.1",
"firebase": "^5.5.0",
"moment": "^2.22.2",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"react-redux": "^5.0.7",
"react-redux-firebase": "^2.1.8",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"