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

コンパイラかく語りき

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

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

Redux React.js

Reduxのお勉強です。

前回はすべての親要素となるAppコンポーネントを作成しました。

 

chuckwebtips.hatenablog.com

 

今回は子要素を作成したいと思います。

 

今回作成するものはスライドです。スライドなので、各々のページと、それを格納するスライドの親子コンポーネントになると思います。

TodoListのListとTodoの関係ですね。

 

ページコンポーネント

まずは子要素であるページのコンポーネントを作成します。

中身はまだ無いので、こんな感じで仮作成しました。

giste52f6ed5601a656fb554

 

スライドコンポーネント

次にページを格納するコンポーネントを作成します。

先ほど作成したPageコンポーネントをimportして、Slideの中に含めます。

gist33dfb90893856986be60

 

ちなみに、PageとSlideはそれぞれcomponents/に作成しました。

f:id:chuck0523:20160321011156p:plain

どちらも状態を受け取って表示するだけなので。

 

Appに追記

Slideコンポーネントを用意したので、Appで読み込みます。

gistea6220a54770bb08c73d

 

HTMLは現時点では、以下のようになります。

f:id:chuck0523:20160321011519p:plain

SlideとPageを追加した分だけ、divが増えていますね。

 

次回は、テストデータを作成して、Pageが複数作成されるようにします。