Reactで ToDoアプリを作ってみる①
はじめに
今回はReactの基礎を定着させるために、CRUD機能を搭載した簡単なToDoアプリを作ってみます。
最後にFirebase Hostingを使ってwebに公開して完成です。
ToDoアプリの設計
機能
- タスクの登録
- タスクの編集
- タスクの削除
- 完了タスクの一括削除
- ステータスの変更（単体と一括）
- ステータスによるフィルタリング
技術
- React
- React Hooks
- Material-UI
- Firebase Hosting
具体的な作成手順
- コンポーネントを切り分ける
- 見た目を作る
- 操作部分を作る
- FirebaseにHostingする
手順①
Atomic Designを元にコンポーネントを切り分けていきます。
今回は以下のようにしました。
- Atom = ボタン、入力欄、セレクトボックス、チェックボックス
- Molecules = タスク作成ボックス、タスク一覧、タスク、タスク編集ボックス、タスク管理ボックス
- Organisms = ヘッダー、メインコンテンツ
- Page = App
ディレクトリ構成はこのようになりました。
AtomはUIKitにまとめます。
手順②
次に見た目を作っていきます。
今回はMaterial-UIを用いて作ります。
コンポーネントは使いまわせるようにしたいので、propsでスタイルを渡せるようにします。
スタイリング方法は様々ありますが、一番はじめに思いついたインラインスタイルで渡すのはどうやら非推奨とのこと。（hover時などのスタイルも定義できないですしね・・・）
いろいろ調べたところ、以下のMaterial-UIページの方法が良さそうだったので、今回はこの方法で行きます。
https://material-ui.com/styles/api/#makestyles-styles-options-hook
■Atom
- ボタン
- アイコンボタン
- 入力欄
- セレクトボックス
- チェックボックス
今回はここまで。
