Redux練習記録です。
前回は基本的なセットアップを行いました。
今回からは実際にReactを書いていきます。
Reactの基本となる、コンポーネントを作成します。
コンポーネントディレクトリ
Reduxを利用する場合のコンポーネントは2種類に別れます。1つがReduxとやり取りのあるコンテナコンポーネント、もう1つがやり取りのないプレゼンテーションコンポーネントです。
まずは、その分類に即してディレクトリを作成します。
公式チュートリアルに即して、ルートディレクトリ以下に、componentsとcontainersを作成しました。
(プレゼンテーションコンポーネントはなぜかpresentationではなくcomponents...)
Appコンポーネント
Reactで一番の親コンポーネントとなるAppコンポーネントを作成します。
別になくても動きますが、あった方がいいらしいです。慣習的なやつかな??
Appコンポーネントはプレゼンテーションコンポーネントの親であり、Reduxとやりとりするわけではないので、components/に作成します。
まだ子要素が無いので、ひとまずこんな感じですね。
必要なものをimportして、Appを定義して、外部にexportします。
Appのimport
さて、Appコンポーネントを作成したので、index.jsに追記します。
バンドルして確認
ちょっと進度がのんびりですが、ここで一度ブラウザ確認をします。
もちろん、ブラウザがReactを読めるように、index.jsをバンドルする必要があります。
webpackをwatch状態にしておくと便利です。ファイルを更新する度に差分をバンドルしてくれます。
Appを追加したので以下のようになりました。
divが1つ増えましたね。ああ、そうそう、Reactってこんな感じでしたね。
次回はAppにひもづく子要素を作成します。