読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

自分なりに順を追って、Reduxを理解する(2)

Redux React.js WebPack

Redux練習記録です。

前回は基本的なセットアップを行いました。

chuckwebtips.hatenablog.com

 

今回からは実際にReactを書いていきます。

Reactの基本となる、コンポーネントを作成します。

 

コンポーネントディレクトリ

Reduxを利用する場合のコンポーネントは2種類に別れます。1つがReduxとやり取りのあるコンテナコンポーネント、もう1つがやり取りのないプレゼンテーションコンポーネントです。

まずは、その分類に即してディレクトリを作成します。

 

f:id:chuck0523:20160321003735p:plain

公式チュートリアルに即して、ルートディレクトリ以下に、componentsとcontainersを作成しました。

(プレゼンテーションコンポーネントはなぜかpresentationではなくcomponents...)

 

Appコンポーネント

Reactで一番の親コンポーネントとなるAppコンポーネントを作成します。

別になくても動きますが、あった方がいいらしいです。慣習的なやつかな??

 

Appコンポーネントはプレゼンテーションコンポーネントの親であり、Reduxとやりとりするわけではないので、components/に作成します。

f:id:chuck0523:20160321004259p:plain

 

まだ子要素が無いので、ひとまずこんな感じですね。

gistece35b585f5b57afb33b

 

必要なものをimportして、Appを定義して、外部にexportします。

 

Appのimport

さて、Appコンポーネントを作成したので、index.jsに追記します。

gist6c1ec5bc0b31cad31c9f

 

バンドルして確認

ちょっと進度がのんびりですが、ここで一度ブラウザ確認をします。

もちろん、ブラウザがReactを読めるように、index.jsをバンドルする必要があります。

webpackをwatch状態にしておくと便利です。ファイルを更新する度に差分をバンドルしてくれます。

 

Appを追加したので以下のようになりました。

f:id:chuck0523:20160321005403p:plain

divが1つ増えましたね。ああ、そうそう、Reactってこんな感じでしたね。

 

次回はAppにひもづく子要素を作成します。