これまで何度かReactを触ってきましたが、 今回はこれまでの復習がてら、ありがちですがTODOアプリを作ってみます。

今回の完成形はこんな感じ↓

todo-app

1. 設計図を描く

最初にコンポーネントの構成を考えます。

今回はこんな感じでいってみます。

Components

TODOリスト全体の状態管理はAppコンポーネントでやって、 各TODOのそれはTodoコンポーネントでやることにします。

2. 実装

実装は次のようになります。

※これ以外にエントリーポイントのJSやCSSが必要になります。

3. おわりに

以上、簡単なTODOアプリを作ってみました。

今回、せっかく用意したTODOのdescriptionフィールドを使っていないのですが、 これは次回react-routerの練習を兼ねて使う予定です。