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
- ボタン
- アイコンボタン
- 入力欄
- セレクトボックス
- チェックボックス
今回はここまで。
はじめまして。
ご覧いただきありがとうございます。
この度、人生で初めてブログを開設してみました。
自己紹介
はじめまして。やまし〜と申します。
現在29歳です。Webエンジニアとして就職できるように日々勉強しています。
職歴としては、これまでの仕事はほとんどが飲食で、IT関係の仕事は、
会計ソフトのコールセンターでアルバイト経験があるくらいです。
現在はプログラミングの学習を始めて4ヶ月ほどです。
スクールには通わず独学で学んでいます。
ブログの目的
このブログは以下の2つを目的にはじめました。
- 学習内容のアウトプット
- 言語化能力の向上
学習内容をアウトプットすることで、エンジニアとして成長すること。
自分の考えをブログにすることで、言語化能力を向上させ、コミュニケーション能力を高めること
これらを達成できればと思います。