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

BattleProgrammerShibata

ある日は誰かと戦い、ある日は何かと戦い、そしてある日は自分と戦うのだろう、そういう生き物。

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

React Redux ES6 環境

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 設定ファイル