React入門

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました
[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

##propsのチェック
Reactにはpropsの型チェック機能がある。
ますはインストール

```bash
$ npm install -save prop-types
```

ReactコンポーネントのptopTypesに型情報を記載していく。
##基本のproprTypes
javascriptの基本型に対応するPropType
PropTypesとpropTypesは別物

|名前|説明|
|---|---|
|PropTypes|インポートしたprop-typesモジュールが持つオブジェクトで型情報を持つ|
|propTypes|自作したReactコンポーネントが持つプロパティ。ここに各props野方情報を記述|

##配列やオブジェクトのpropTypes
なんの配列かどんなオブジェクトかを記述できる。
PropTypesは型情報作成する関数を持っている。

```javascript:どんな要素が入ったオブジェクトなのかを記述する
SomeComponent.propTypes = {
  //配列の中身を指定
  someArray: PropTypes.arrayOf(PropTypes.number),
  //オブジェクトの中身を指定
  someObject: PropTypes.object(PropTypes.number),
  //オブジェクトについては個別のプロパティについて指定できる
  //complexObjectは文字列のnameと数値のageを持つオブジェクトであると定義している。
  complecObject: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number
  }),

}
```
参考：[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)
#JSX独自のpropTypes
Reactコンポーネントは最後はHTMLになるJSXなどの表示要素をプロパティとして受け渡すときのために、elementやnodeというエイリアスがある。
#Todoアプリの作成
|名前|説明|
|---|---|
|state|何を入力するか、何を表示すべきかの状態を示す。|

必要なコンポーネントは以下

- アプリ全体表す
- 入力フォーム
- ひとつひとつのTodoを表す
- Todoの一覧を表す

##Appコンポーネント
各コンポーネントをまとめる
表示上の要件なし
データ管理を行う

##TodoInputコンポーネント
Todo入力のコンポーネント
##TodoListコンポ
propsを受け取ったtodoListを元に一つのTodoItemwo表示
##TodoItem
ひとうひとつのTodoを表すコンポ
##stateの初期値
初期値はconstructorで設定
this.stateプロパティにtasksとuniqueIdという値を含んだオブジェクトを設定している。
このstateという名前は何でもわけじゃなくてこの名前であるからこそ意味がある。

stateの値は直接変更しない.
直接弄っているのはocnstructorだけ

合わせてtodoListに渡す部分も変更

##stateの変更
次はユーザ入力でしんきTODOを追加できるようにする
tasksはTodoアプリに紐づく情報だからこのメソッドはAppポンコで作る

```App.js
    addTodo(title) {
        const {
            tasks,
            uniqueId,
        } = this.state;
        tasks.push({
            title, if: uniqueId,
        })
        this.setState({
            tasks,
            uniqueId: uniqueId + 1,
        })
    }
```
参考：[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)
引数にTodoのtitleを受け取る
stateに記録されたtasksにしんきTODOをpushしてせtStateでstateに保存している。
###stateを変更するにはsetStateを使う
setStateは今のを置き換えるんじゃなくて変更があった問だけstateを上書きする
uniqueIdがsetStateに渡されなくても値は保持される。

###なぜsetStateを使うのか
配列のpushメソッドはもとの変数に値を追加するメソッドのため、pushした時点でstateの状態が変化する。
直接stateを変更すると副作用がある。

作成したaddTodoメソッドをTodoInputコンポに渡す
最後にaddTodoメソッドで適切ににstateを変更するコードを追加

```javascript
this.addTodo=this.addTodo.bind(this);
```
bindはすべてのFunctionオブジェクトが持っているメソッド
これはaddTodoメソッドでAppコンポのstateを変更するために必要
javascriptでは関数を変数として渡せるが、thisは何を指すのかまでは渡されない。
addTodoメソッドの定義時はthisはAppじゃなくて他のコンポやDOM。
こうすることでaddTodoは常にAppkコンポのstateを参照する。

##bindを使わない方法
###アロー関数
定義したメソッドをpropsとして渡すんじゃなくて、アロー関数でメソッドを使う関数を定義して渡す。

```javascript
<TodoInput addTodo={(title)=>{this.addTodo}}/>
```
参考：[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

こう書けばconstructorにbindを書かなくても大丈夫
デメリットは同じメソッドを複数のコンポに渡すときには毎回これを書かないといけない
とりあえず当面はbindを使う方向で。

##イベントハンドリング
AppコンポのaddToDoをTodoInputで使ってみる
TodoInputコンポはpropsとしてaddTodoが渡されていた
これでクリックするたびにaddtodoが呼ばれる
###イベント引数
onClickなどのイベントは引数としてEventオブジェクトを受け取っている
これはブラウザでも同様に動く。ブラウザ本来のイベントと同じように使える
以下は`<a>`タグにイベントを追加した例
そのままでは`<a>`自身の機能でページ遷移がされるが、これを止める例

```javascript
const { render } = require("react-dom");

handleClick(e){
    e.preventDefault();//preventDefaultによりaタグのデフォルト機能のページ遷移を止めている。
    this.PaymentResponse.addTodo('新規TODO')
}
render(){
    return (
        <div>
            <input placeholder="新規TODO" />
            <a href="/register" onClick={this.handleClick}>登録</a>
        </div>
    )
}
```
参考：[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

##fromの操作
Reactではフォーム入力値もstateで扱う。

1. フォームの初期値をconstructorでstateに渡す
2. state保値をinput要素のvalueに設定する。
3. handleChangeメソッドを記述


#っていうかこのファイルをどこに置けば実行されるのか、私にはわからない。調べる必要がある。