React Tutorial memo

# はじめに
PortfolioサイトをReactを使って作成するために、Reactを勉強する。
React Tutorialでのmemoを書き記す
[チュートリアル：React の導入](https://ja.reactjs.org/tutorial/tutorial.html)

# 環境構築
```
// create app
$> npx create-react-app my-app

// run react app
$> npm start 
```

# データの受け渡し方 prop

親コンポーネント
valueを渡す

```react

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
}
```

子コンポーネント
this.props.value で親コンポーネントからの情報を受け取る

```react

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}
```

# インタラクティブなコンポーネントを作る
## コンストラクタで初期化

```react
class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}
```
子コンポーネントがコンストラクタを使用し`this.`を使う際は`super`を呼び出す必要がある。

[理由]
子コンポーネントがコンストラクタを使用しthisを使うとき、うまく親コンストラクタを作動させるために親コンストラクタの実行を強制させる
[なぜsuper(props) を書くの? - React界のカリスマ「Dan Abramov」のブログ](https://qiita.com/hand-dot/items/61a4b808f110b12e4281)


## stateの変更
```react

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}
```

`this.setState({value: 'X'}) `でstateの値を変更

# ゲームの完成
```react
class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
             //Array(9).fill(null) -> [9]配列を全てnullに初期化
      squares: Array(9).fill(null),
    };
  }

  renderSquare(i) {
    return <Square value={i} />;
  }
```

## prop渡された関数を実行
Square class(子)

```react
class Square extends React.Component {
  render() {
    return (
      <button
        className="square"
        onClick={() => this.props.onClick()}
      >
        {this.props.value}
      </button>
    );
  }
}
```


Board class(親)

```react

    renderSquare(i) {
        return <Square value={this.state.squares[i]}
            onClick={() => this.handleClick(i)}
        />;
    }
```

## イミュータビリティの重要性

```react
handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = 'X';
    this.setState({squares: squares});
  }
```
slice()はシャローコピーをするメソッド。

## イミュータビリティの重要性
(i)直接データを書き換える(ミューテートを伴う変更)

```react
var player = {score: 1, name: 'Jeff'};
player.score = 2;
// Now player is {score: 2, name: 'Jeff'}
```

(ii)古いデータをコピーし、コピーしたデータを代入する(ミューテートを伴わない変更)

```react
var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});
// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}

// Or if you are using object spread syntax proposal, you can write:
// var newPlayer = {...player, score: 2};
```

<strong>直接データを書き換えない利点</strong>

- 複雑な変更が可能
以前に使用していたオブジェクトを再利用できる

- 変更の検出
以前のオブジェクトと比較すれば変更が検出できる
- Reactの再レンダータイミングの決定
変更が検出できるため再レンダーするタイミングを決めやすい


### コピーで使われるメソッド
- slice()
- Object.assign()
- Array.concat([value1[, value2[, ...[, valueN]]]])


## 関数コンポーネント

```react

function Square(props) {
    return (
        <button className="square" onClick={props.onClick}>
            {props.value}
        </button>
    )
}
```

## 省略した真理値判定

```react
squares[i] = this.state.xIsNext ? 'X' : 'O';
```
これは下と同じ意味

```react
if （xIsNext ）{   //これはif（xIsNext === true）の短縮形
  squares [ i ]  =  'X' ; 
}  else  { 
    squares [ i ]  =  'O' ; 
}
```

## 動的にリストを作成する

```react
<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>
```
キーの分だけリストが作成される。
動的なリストを構築する場合は正しい key を割り当てることが強く推奨されている。

# まとめ
Reactの設計についての理解がまだできていない。
Vueのコンポーネントのように部品として扱っていく感じの理解でいいのかな、、、
状態の管理についてはわかった。

設計する際にどのような考えをしたらいいか調べていこう