Reduxのお勉強の４日目です。と言っても、まだまだReactの復習でしかありませんが。
前回は、AppコンポーネントにひもづくSlideコンポーネントとPageコンポーネントを作成しました。
今回はスライドのデータを用意して、Pageが複数作成されるようにします。
スライドデータの作成
json形式で作成しました。
仮で３ページ作成しました。
このjsonデータをSlideに渡せば、Pageコンポーネントが３つ作られるはずです。
Slideでslide.jsonを利用
jsonの読み込みって、大変なイメージがあったのですが、Webpackのjson-loaderを使えばカンタンでした。
まずは、json-loaderのインストール。
$ npm install json-loader --save-dev
次に、webpack.config.jsに追記。
これで、jsonファイルをimportすることができます。
Slide.jsには以下のように追記しました。
jsonデータの件数だけ、mapでループさせているわけですね。
ブラウザ確認
現時点でのHTMLはこのような感じ。
最下層のコンポーネントであるPageが、きちんとループ作成されていますね。
Pageに追記
さて、親コンポーネントのSlideからデータが渡ってきたので、それを子コンポーネントのPageで利用します。
引数で情報を受け取り、それぞれtitle（題）とbody（本文）を表示するように変更しました。
ブラウザ確認
現状はこんな感じ。jsonで定義したデータがきちんと表示されていますね。
今回は、jsonでスライドの中身を定義して、それを利用してコンポーネントを作成するところまでいきました。
次回は、ちょっとだけスタイルをあてて、actionの作成をしたいと思います。
