# React Todoアプリの作成２（学習日：10/28）
## css
* padding ボックス内の間隔。
* margin 周辺のボックスとの間隔。
* border 要素の境界線。
* display ボックス表示形式を指定する。
* block　ボックス生成する。（前後改行あり）
* inline　ボックス生成する。（前後改行無し）
* flex　フレックスコンテナを生成する。（前後改行あり）→子要素がフレックスアイテムとなり、いろいろなレイアウト設定ができる。
* none　ボックスを生成しない。
* position 座標指定の基準
* relative 相対座標で場所を表示する。
* absolute 絶対座標で場所を表示する。
* static 座標を無視して既存の位置にボックスを表示する。
* z-index 要素の重なりの優先順位を指定する。
* cursor カーソルの表示を指定する。
* rotate() 要素を平面上の特定の点を中心に、変形させずに回転させる。

## TSとTSXの違い
JavaScriptがJSX Harmonyモードにある時、最後に"x"をつける。
.tsは、JSX構文が持つtsタグと競合してしまう。そこで、JSXを利用する際は
原則として拡張子の末尾にxをつける。

## TaskItem.tsx
完了と削除のhandleDone, handleDeleteをPropsで受け取る。
return内はHTMLのリスト形式で記述する。
今回の場合、bindを利用する代わりに、アロー関数を用いている。

## TaskList.tsx
handleDone, handleDeleteをTaskItem.tsxに送れるよう定義する。
削除時tasks.lengthが0だと'登録されたTODOはありません'と表示される。

## TaskInput.tsx
新たにタスクを入力する入力フォームを作成する。
## App.tsx
これまで作成したコンポーネントを組み合わせていく。
Appは処理の大まかな流れのみの記述で、詳細な機能的な処理は各コンポーネントに任せている。

###### tags: `React`