#1 Reactの基本的なコードの枠組み

Reactの基本的なコードの枠組みを理解する

以下のコードを用いて、それぞれのコードがどのような役割をしているのか整理していこうと思います。

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

class Hogehoge extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ...INITIAL_STATE };
  }

  componentDidMount() {
    
  }

  render() {
    const { aaa } = this.state;

    return (
    );
  }
}

export default connect(
  (state) => state,
  (dispatch) => ({
    dispatch,
    ...bindActionCreators(
      {
        call
      },
      dispatch
    ),
  })
)(Hogehoge);

importエリア

必要なライブラリなどを用意するエリア。

import React from 'react';

Reactライブラリをインポートする。

import { connect } from 'react-redux';

ReduxとReactを接続するための関数をインポートする。

import { bindActionCreators } from 'redux';

アクションクリエイターをディスパッチにバインドするための関数をインポートする。

クラス定義エリア

class Hogehoge extends React.Component {

このコンポーネントはReactのComponentクラスを継承しているよっていうのを宣言しているだけ。

コンストラクタエリア

そもそもコンストラクタってなんですかと言うと、クラスのインスタンスが作成されたときに自動的に呼び出される特別なメソッドのこと。
①初期化: オブジェクトの初期状態の設定
②依存関係の注入: 必要な依存関係の提供
のために使用するよ。

  constructor(props) {

constructor: コンストラクタメソッドの定義。
props: 親コンポーネントから渡されたプロパティを受け取りますという記載。これにより、コンポーネントがそのプロパティを使って初期化されるようになるよ。

super(props);

親クラスのコンストラクタを呼び出すためのもの。つまり、React.Componentのコンストラクタを呼び出し、propsを親クラスに渡す。これによって、this.propsがコンポーネント内で正しく利用できるようになるのです。

this.state = { ...INITIAL_STATE };

this.stateっていうのはコンポーネントの状態（state）を表していて、スプレッド構文（...）を使用して、INITIAL_STATEのすべてのプロパティをthis.stateにコピーしているよ。

componentDidMountエリア

  componentDidMount() {
}

コンポーネントがDOMに追加されたとき（簡単にいうとブラウザに表示される時）に呼び出されるライフサイクルメソッドです。APIコールやデータのフェッチなどの副作用をここで行うことが一般的。
①データの取得: APIからデータを取得したり、サーバーにリクエストを送信します。
②サブスクリプションの設定: イベントリスナーやタイマーを設定します。
などの処理を行うよ。

renderエリア

Reactコンポーネントのライフサイクルメソッドの一つであり、UIを描画するためのもの。このメソッドは、Reactがコンポーネントを描画する際に呼び出されます。

   render() {
    const { aaa } = this.state;

render()メソッドの上部では、表示する内容を動的に決定するための変数やロジックを定義したり、条件レンダリングを記載したりします。

returnエリア

render()メソッド内のreturn文は、実際に描画されるJSX（JavaScript XML）を返します。return文の中で、コンポーネントのUIを定義するということだね。

    return (
      // JSXのレンダリング
    );

return文内で、コンポーネントが描画するJSXを返します。ここにはHTMLタグや他のReactコンポーネントを含むことができます。

Reduxとの接続エリア

connect: HogehogeコンポーネントをReduxストアに接続します。
(state) => state: Reduxストアの状態をコンポーネントのpropsとしてマッピングします。
(dispatch) => ({ ... }): Reduxのdispatchメソッドをコンポーネントのpropsとしてマッピングします。ここでは、dispatchとbindActionCreatorsを使って、アクションクリエイターcallをバインドしています。

export default connect(
  (state) => state,
  (dispatch) => ({
    dispatch,
    ...bindActionCreators(
      {
        call
      },
      dispatch
    ),
  })
)(Hogehoge);

アクションクリエイターのバインドエリア

bindActionCreators: アクションクリエイターをディスパッチにバインドします。これにより、コンポーネントからthis.props.callのようにしてアクションを呼び出すことができます。

...bindActionCreators(
  {
    call
  },
  dispatch
),