# Reactapp4

## 基本概要
* 動かすアプリケーション：Todoアプリ
* ソースコード元：[GitHub](https://github.com/alexdevero/react-hooks-todo-list-app-ts)

## ファイル構成
* srcフォルダ
* stylesフォルダ
* styles.css
* componentsフォルダ
* todo-form.tsx
* todo-list.tsx
* todo-item.tsx
* index.tsx
* interfaces.ts

## ファイル内容
### componentsフォルダ
#### todo-item.tsx
TodoItemコンポーネントでは、Todoの新規作成、変更、削除時の動作を記述している。
TodoListコンポーネントでは、TodoのHTMLリストの型を記述している。
TodoFormコンポーネントでは、入力フォーム及び、イベント発生時の各種受け渡し処理を記述している。

### stylesフォルダ
#### styles.css
全機能に対してcssは1フォルダにまとまっていた。

### interfaces.ts
このファイルに他のファイルで利用するものも含め、各変数の型がまとめられている。他ファイルはこのファイルをインポートして型情報を入手する。

### index.tsx
TodoListAppのコンポーネントに、用いる機能と処理が列挙されている。
処理項目は上から順に、作成、更新、削除、完了チェック、タイトルエラーチェックとなっている。
特徴として、タイトルエラーチェックを除いて、各処理のはじめにnewTodosStateにtodo情報を登録している点が挙げられる。
newTodosStateに登録した情報に対し、Todoへの追加、変更、削除、完了チェックを行い、Todoにsetしている。

## 動作させてみて
1つ目に作ったTodoappに比べて、色も無くシンプルな仕上がりである。
todoは入力項目の下に追加される。
左の丸い部分をクリックすると緑地の完了チェックが入る。
右側の×印を押すと削除できる。
但し、何も入力せずエンターキーを押した際にエラー文が表示されるはずが動かなかった。コードを見直す必要がある。

###### tags: `React`