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

コンパイラかく語りき

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

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

Redux React.js

前回までで、Reduxチュートリアルの写経が終わりました。

 

chuckwebtips.hatenablog.com

 

でも、やっぱりまだ分かってなくて、というか実はReactだってまだまだ書けなくて、まとめて理解を深めるために、なんか作ります。

得意のスライドでも作ります。

 

今回はその第一弾。エントリーファイルを作成して、ビルドするところまでをやります。

 

環境準備

もろもろのセットアップをします。

とは言え、package.jsonとwebpack.config.jsを転用すればカンタンですね。必要なパッケージとビルド環境はひとまず整います。(前記事参照)

 

HTML作成

なんてことは無いですが、最初に作ります。

gist7964eb92707e6edd4478

 

scriptタグで読み込んで言るbundle.jsは、Webpackによってバンドルされたエントリーファイルです。

Reactを採用しているので、今後このHTMLをいじることはないでしょう。

 

エントリーファイル作成

バンドルの起点となるJSファイルを作成します。

ひとまず以下のようになりました。

gista765c1235e7cab7f204b

 

必要なパッケージをimportして、storeを作成して、render関数を実行しています。

コンポーネントとreducerを作成していないので、まだ抜けがあります。

 

バンドル

この状態でwebpackコマンドを実行すると、現時点でのバンドルファイルが作成されます。

ただし、ブラウザで確認するとこのとおり。

f:id:chuck0523:20160321002542p:plain

まだ中身は空っぽです。

 

というわけで、下準備が整いました。

次回はReactを書いてコンポーネントを作成します。