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