コンパイラかく語りき

import { Fun } from 'programming'

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

Reduxのお勉強の4日目です。と言っても、まだまだReactの復習でしかありませんが。

 

前回は、AppコンポーネントにひもづくSlideコンポーネントとPageコンポーネントを作成しました。

chuckwebtips.hatenablog.com

 

今回はスライドのデータを用意して、Pageが複数作成されるようにします。

 

スライドデータの作成

json形式で作成しました。

gist34078109364d5a8379d0

仮で3ページ作成しました。

このjsonデータをSlideに渡せば、Pageコンポーネントが3つ作られるはずです。

 

Slideでslide.jsonを利用

jsonの読み込みって、大変なイメージがあったのですが、Webpackのjson-loaderを使えばカンタンでした。

 

まずは、json-loaderのインストール。

$ npm install json-loader --save-dev

 

 

次に、webpack.config.jsに追記。

f:id:chuck0523:20160321014942p:plain

これで、jsonファイルをimportすることができます。

 

Slide.jsには以下のように追記しました。

gist61fbad6e1fcf2a995d71

jsonデータの件数だけ、mapでループさせているわけですね。

 

ブラウザ確認

現時点でのHTMLはこのような感じ。

f:id:chuck0523:20160321020218p:plain

最下層のコンポーネントであるPageが、きちんとループ作成されていますね。

 

Pageに追記

さて、親コンポーネントのSlideからデータが渡ってきたので、それを子コンポーネントのPageで利用します。

gistcc527500fe06a1511d8d

引数で情報を受け取り、それぞれtitle(題)とbody(本文)を表示するように変更しました。

 

ブラウザ確認

現状はこんな感じ。jsonで定義したデータがきちんと表示されていますね。

f:id:chuck0523:20160321020803p:plain

 

今回は、jsonでスライドの中身を定義して、それを利用してコンポーネントを作成するところまでいきました。

次回は、ちょっとだけスタイルをあてて、actionの作成をしたいと思います。