Redux Todoサンプルを npmとwebpackで最小の環境を作って動かす

Redux Todoサンプルを npmとwebpackで最小の環境を作って動かす

Redux Todoサンプルを npmとwebpackで最小の環境を作って動かす

Redux Todoサンプルを npmとwebpackで最小の環境を作って動かす へのコメントはまだありません

はじめに

Reactの勉強をはじめて、大雑把に理解したら、Reduxの勉強をしたくなりますよね。

しかしまぁ・・・Reduxムズイ!!

となるわけで、とにかくRedux本家にあるTodoのサンプルのソースを眺めるも・・
わかったようなわからないような状態になる。
兎にも角にも、実際に動かしてみなきゃ始まらない。そのための環境を作るのも
最初はちんぷんかんぷんだったりするのですよね・・・

なので、Redux本家にあるTodoサンプルをnpm と Webpackを使って最小環境を作って
動作させるところまでたどり着くのが今回の目標です。
Todoサンプルの内容には踏み込みません、あくまで動くところまで。

最終動作イメージはこんな感じ。

redux-2

作り上げるフォルダとファイルの構成はこんな感じ。
redux-1

npmでパッケージをインストールする

packege.jsonを調整

変更前

変更後(2行追記)

webpack.config.jsを作成

distフォルダ準備

Todoアプリのトップレベルのファイルを作成(index.js)

トップレベル(Entry Point)のファイルであるindex.jsを作成します。

ひたすら redux本家のTodoに記載されたファイルをコピーして作る

redux本家のこのページを見ながら
最終目標であるこのイメージに合うようにファイルを作って中身をコピーしてきます。

redux-1

全ファイルをマージしてコンパイル

これしなくても大丈夫です。コンパイル結果を知りたいときは、やってみてください。

起動確認

ブラウザーで

http://localhost:8080/webpack-dev-server/main.bundle

にアクセスして、下のような画面が出てきたらOK。

※追記
上記URLではうまく表示できなくなる場合があります。package.jsonで指定したcontent-baseが
効かないケースがあるみたい(原因不明)
その場合は、以下のURLにアクセス。
http://localhost:8080/webpack-dev-server/dist/main.bundle

wp-1

redux学習方法

とにかく目を皿のようにして、ひたすらサンプルソースを追いかける。

追いかける

追いかける

追いかける(笑)

このページの解説(reactとreduxを使ったExampleのソースコードリーディング:todos編) なかなか良く出来ているので参照したらいいです。

補足

ソースコードをいじったら、自動で更新されるようになります。便利。。。
webpack.config.js で指定した dist パスへコンパイル後のファイルが出来ませんが
メモリ上で展開されて動くらしいです。
どんなファイルが作られているか確認したい場合は、以下のコマンドで、dist/main.bundle.jsが出来ます。

実運用を想定してindex.htmlを作成

実運用ではエントリーポイントとなるHTMLが必要なので、distフォルダにindex.htmlを作成します。

これで、
http://localhost:8080
で実運用の動作イメージの出来上がり。

感想とうか雑感というか

Redux かなり難しいですよね。
Reactはほぼ分かったので、Reduxも楽勝だろうと思いきや・・・・
Redux本家のこのTodoサンプルを理解して、写経して、空で暗記してイチから作り上げれるようになるまで
3日ほど要しました。

Reduxおそるべし。

ってか、こんなの理解して、みんな開発してるのかな・・・
ReduxとReactの組み合わせ、かなり難しいような気がするなぁ・・・


About the author:

Tags:

Related Posts

Leave a comment

Back to Top