柴田さんちの React with Redux アプリ ディレクトリ構造

TODO チュートリアルを改造しながら、React with Redux アプリ開発を学んでいます。
エングリッシュに苦しんでますが3年前に勉学無しでいきなり Backbone.js を触ることになったときの苦しみよりはマシです。

昨今のフロントエンド開発というものはいろいろなものを組み合わせて開発するプラクティスの流れでして…。
私も例に漏れずいろいろなものを組み合わせたので、ディレクトリ構造がどんな風になったかまとめてみました。

環境

役割 ツール バージョン
View フレームワーク React 0.14.7
Flux フレームワーク Redux 3.3.1
CSS プリプロセッサ Stylus 1.3.6
JS Linter ESLint 2.3.0
トランスコンパイラ Babel 6.5.2
ビルドツール webpack 1.12.14
スクランナー gulp 3.9.1

ディレクトリ構造

ReduxPractice\
├─actions\           Redux Action ディレクトリ
├─bundle\            webpack で生成された成果物のディレクトリ
├─components\        React Component ディレクトリ
├─containers\        React Component ディレクトリ、components 下の React Component を内包する
├─node_modules\      依存するライブラリなどのディレクトリ、npm i コマンドによって自動生成される
├─reducers\          Redux Reducer ディレクトリ
├─styl\              Stylus ディレクトリ
│
├──.babelrc          Babel 設定ファイル
├──.eslintrc         ESLint 設定ファイル
├──.stylintrc        Stylint 設定ファイル
├──gulpfile.babel.js Gulp 設定ファイル
├──index.html        html ファイル、WEB ブラウザでのエントリポイント
├──index.js          JS ファイル、webpack によるビルドのエントリポイント
├──package.json      パッケージ情報、パッケージが依存するライブラリなどの情報
└──webpack.config.js webpack 設定ファイル