Reactの基本（メモ用）

Reactチュートリアルを学習したので、備忘録として記事を作ります。
誤った解釈をしているかもしれません。その時は適宜修正していきます。

Reactとは？

React はユーザインターフェイスを構築するための、宣言型で効率的で柔軟な JavaScript ライブラリ。複雑なUIを「コンポーネント」と呼ばれる小さく独立した部品から組み立てることができる。

renderメソッド

画面上に表示したいものの説明書き

class ShoppingList extends React.Component {
  render() {
    return (
      <p>hoge</p>
    );
  }
}

props

親コンポーネントから子コンポーネントにpropを渡す。
子コンポーネントは、親コンポーネントの中身を

{this.props.hoge}

という形で呼び出すだけで良い。
この方法でアプリ内を情報が流れていく。

stateとsetState

再レンダーするために必要。

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null, //初期値を設定
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})} //再描写によりstateの値が変更
      >
        {this.state.value} //再描写後の値が表示（「X」が表示される）
      </button>
    );
  }
}

まだまだ未知なことが多いですが、これからもアウトプットを通して理解を深めていきます！