# React　Todoアプリの作成1（学習日：10/27）
## App.js
* class クラス名　extends Component{}でコンポーネントクラスを継承する。
* コンストラクタ内のsuper()は、コンポーネントの継承を表す。
* render()の中に、HTMLに渡したい変数を設定し、return()の中に実際に返したいHTMLそのものを記述する。
* return()中に呼び出したいコンポーネントは<TodoList />等のように記述する。state中の要素todosを参照する場合：todos = {this.state.todos}

## TodoList.js
* 親コンポーネントから渡されたものは、this.propsをつけて受け取る。
* コンポーネント内の配列にはユニークなkeyを含める必要がある。
* {...todo}は、todoに入っている要素をすべて引き継ぐ。

## Todo.js
* const linkは三項演算子を使って定義する。this.props.done ?'元に戻す': '完了！'

## Form.js
* formタグを使って、通常のHTML同様にフォームを作成する。
* input type="text" → テキストボックス
* textarea → スクロール可能なテキストエリア
* button → ボタン
* placeholder → 入力ヒントメッセージ
* defaultValue → 初期値
* form onsubmit={this.props.handleSubmit}とし、propsとして受け取ったhandleSubmitをonSubmit時に行う。

## App.js（投稿機能）
* コンストラクタ内にthis.stateの内容を入れた。
* countTodoというTodoの数をカウントするstateを作る。idの代わりとして利用する。
* handleSubmit()を関数を作成する。このhandle…系関数の利用時は、.bindをつけた上で引数にthisを入れる。これでthisをコンポーネント上に束縛できる。
* e.preventDefaultで画面を更新させない。
* slice()でコピーされた新しい配列を作り、stateが直接変更されないようにする。
* todosに新しいTodoの中身をセットし、setState({})で更新する。変更前後でオブジェクト名が同名であれば省略可能。

## App.js（Todoの完了・未完了切替機能）
* setTodoStatus関数を定義する。
* todosはslice()したものを用いる。
* 配列のインデックス(0スタート)とid（1スタート）の数値を調整する。
* todo.doneをひっくり返す機能を持つ。
* render部分には、bind(this)設定を忘れない。
## Todolist.js, Todo.js（Todoの完了・未完了切替機能）
* Todolist.jsにsetTodoStatusの受け渡しを反映させる。
* Todo.jsに完了・未完了を三項演算子で記述する。
* Todo.jsのrenderにonclick時にsetTodoStatusイベントを発生させる記述を追加する。

###### tags: `React`