Redux 対応及び Material-UI 切り替え fix #14

Author: jkazama

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015", "react"],
+  "presets": ["es2015", "stage-0", "react"],
   "plugins": [
     ["transform-runtime", {"polyfill": true, "regenerator": true}]
   ]

.gitignore

@@ -2,3 +2,4 @@ node_modules
 bower_components
 public
 npm-debug.log
+/.vscode

README.md

@@ -3,20 +3,26 @@ sample-ui-react
 
 ### はじめに
 
-[BootStrap](http://getbootstrap.com/) / [React.js](https://facebook.github.io/react/) を元にしたプロジェクト Web リソース ( HTML / CSS / JS ) です。 SPA ( Single Page Application ) モデルを前提としています。  
+[Material-UI](http://www.material-ui.com) / [React.js](https://facebook.github.io/react/) / [Redux](https://github.com/reactjs/redux) を元にしたプロジェクト Web リソース ( HTML / CSS / JS ) です。 SPA ( Single Page Application ) モデルを前提としています。  
 
 サンプル確認用の API サーバとして [sample-boot-hibernate](https://github.com/jkazama/sample-boot-hibernate) を期待します。
 
 `※ライブラリではなく上記ライブラリを用いた単純な実装サンプルです。`
 
+> Flux 風な Redux を利用していますが、純粋な Flux サンプルとは異なる点に注意してください
+
 #### ビルド/テスト稼働環境構築
 
-ビルドは [Node.js](http://nodejs.jp/) + [Webpack](https://webpack.github.io/) + [Gulp](http://gulpjs.com/) で行います。以下の手順でインストールしてください。
+ビルドは [Node.js](http://nodejs.jp/) + [Webpack](https://webpack.github.io/) + [Gulp](http://gulpjs.com/) + [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) で行います。以下の手順でインストールしてください。
 
 1. Node.js の[公式サイト](http://nodejs.jp/)からインストーラをダウンロードしてインストール。
 1. 「 `npm install -g gulp` 」 を実行して Gulp をインストール。
     - Mac ユーザは 「 `sudo npm install -g gulp` 」 で。
-1. コンソールで本ディレクトリ直下へ移動後、 「 `npm install` 」 を実行して Gulp ライブラリをインストール。
+1. 「 `npm install -g yarn` 」を実行して Yarn をインストール。
+    - Mac ユーザは 「 `sudo npm install -g yarn` 」 で。
+    - インストール作業を npm 経由で直接実行する場合は不要です
+1. コンソールで本ディレクトリ直下へ移動後、「 `yarn` 」を実行して `package.json` 内のライブラリをインストール
+    - Yarn を利用しない時は 「 `npm install` 」 を実行。
     - node-sass あたりでビルドに失敗した場合は、 「 `npm uninstall node-sass` 」 を実行してから再度試してみてください。
 
 ### 動作確認
@@ -31,7 +37,7 @@ sample-ui-react
 
 ### 開発の流れ
 
-基本的にテンプレート ( .pug / .scss / .js ( ES6 ) ) を Web リソース ( .html / .css / .js ) へ Gulp / Webpack でリアルタイム変換させながら開発をしていきます。  
+基本的にテンプレート ( .pug / .scss / .js ( Babel ) ) を Web リソース ( .html / .css / .js ) へ Gulp / Webpack でリアルタイム変換させながら開発をしていきます。  
 動作確認は Gulp で独自に Web サーバを立ち上げた後、ブラウザ上で行います。  
 
 #### 各種テンプレートファイルの解説
@@ -40,8 +46,8 @@ sample-ui-react
     - HTML を生成するテンプレートツール。公式サイト TOP にある簡素な記法が特徴。
 - [Sass (SCSS)](http://sass-lang.com/)
     - CSS 表記を拡張するツール。変数や mixin 、ネスト表記などが利用可能。
-- [ES6 with Babel](https://babeljs.io/)
-    - ES6 用の Polyfill 。 ES5 でも ES6 風に記述が可能。
+- [Babel](https://babeljs.io/)
+    - ES201x 用の Polyfill 。 ES5 でも ES201x 風に記述が可能。
 
 #### 各種テンプレートファイルの変更監視 / Web サーバ起動
 
@@ -59,15 +65,18 @@ sample-ui-react
 ### ポリシー
 
 - JS / CSS の外部ライブラリは npm で管理する
-    - jQuery や Bootstrap 等、グローバルスコープの汚染を許容するものはビルド済みリソースをそのまま流用する
+    - ビルド時は vendor.bundle.js へ分割
 - プロジェクト固有の JS は Webpack を利用して生成する
-    - グローバルスコープの汚染を許容せずにモジュールベースで開発する
-- React は Flux のアーキテクチャを参考に実装する
-    - ページ遷移周りは react-router を利用
-    - React コンポーネントは ES6 のクラスベースで実装 ( see /js/platform/react.js )
-    - Flux は Facebook のサンプルを参考にしつつ実装 ( see /js/platform/react-flux.js )
-    - いくつか代表的な UI パーツは準備 ( see /js/platform/react-ui.js )
-    - Flux の良い実装が出てきたら自作せずにそちらを利用する
+- React / Redux はとりあえず以下の方針で
+    - ページ遷移周りは react-router / react-router-redux を利用
+    - React / Redux の Component 向けにサポートクラスを用意 ( see /js/platform/redux-support.js )
+    - Redux Actions 概念をサポートクラスで簡易に ( see /js/platform/redux-action-support.js )
+    - グローバルなステートで管理するのは横断的に保持したいもののみに限定
+        - 入力や検索結果などの揮発性高いものはローカルなステートで
+    - ページルートは container 配下へ配置
+        - コンポーネントを進めていく時は component or container のサブディレクトリを掘る感じで
+    - スタイル指定は theme.js へ集約
+        - material-ui だとクラスベースの指定が負けそうなのでベタに指定
 
 #### ディレクトリ構成
 
@@ -76,6 +85,7 @@ sample-ui-react
 ```
 gulpfile.babel.js                    … gulp configuration
 package.json                         … npm dependency
+yarn.lock                            … yarn semantic versioning
 public                               … deploy resources (auto generate)
   css
     - style.css                      … from source/css
@@ -86,21 +96,21 @@ public                               … deploy resources (auto generate)
   index.html                         … from source/html
 source
   css                                … css template files  [SCSS]
-  html                               … html template files [Jade]
+  html                               … html template files [Pug]
   js
-    actions                          … flux actionCreators
-    components                       … react component
+    actions                          … redux actions
+    api                              … server acccess api
     constants
-    dispatcher                       … flux dispatcher
+    container                        … redux container component
     platform
       - plain.js                     … simple js library
-      - react-flux.js                … react flux implementation (simple)
-      - react-ui.js                  … react ui parts
-      - react.js                     … project react extension
-    stores                           … flux store
-    - app.js                         … root page
+      - react-support.js             … project react support
+      - redux-support.js             … project redux support
+      - redux-action-support.js      … project redux actions support
+    reducer                          … redux reducer
     - main.js                        … SPA entry
     - routes.js                      … SPA routing
+    - theme.js                       … material ui style
   static                             … static resources (.png/.ico/robots.txt etc)
 ```
 
@@ -110,18 +120,16 @@ source
 
 | ライブラリ               | バージョン | 用途/追加理由 |
 | ----------------------- | -------- | ------------- |
-| `superagent`             | 2.3.+    | HTTP 連携ライブラリ |
 | `react`　　　　　　　　　  | 15.4.+    | アプリケーションの UI 機能を提供 |
 | `react-dom`　　　　　　　  | 15.4.+    | アプリケーションの UI 機能 ( DOM ) を提供 |
 | `react-router`           | 3.0.+    | React.js の SPA ルーティングサポート |
-| `react-mixin`             | 3.0.+    | Reactクラス利用時のMixin拡張 |
-| `wolfy87-eventemitter`   | 5.1.+     | イベント連携ライブラリ |
-| `flux`                   | 3.1.+     | Facebook Flux ライブラリ |
+| `react-tap-event-plugin` | 2.0.+    | タップ操作のサポート |
+| `redux`                 | 3.6.+     | Flux 風な状態/イベント概念をサポート |
+| `react-router-redux`    | 4.0.+     | Redux の状態モデルに対応した react-router |
+| `material-ui`            | 0.17.+    | マテリアルデザインな UI ライブラリ |
 | `lodash` 　　　　　　　　  | 4.17.+    | 汎用ユーティリティライブラリ |
 | `dateformat`　　　　　　  | 2.0.+    | 日時ライブラリ |
-| `jquery`                 | 3.1.+     | DOM 操作サポート |
-| `bootstrap-sass`         | 3.3.+    | CSS フレームワーク |
-| `fontawesome`            | 4.6.+    | フォントアイコンライブラリ |
+| `superagent`             | 2.3.+    | HTTP 連携ライブラリ |
 
 ### License
 

gulpfile.babel.js

@@ -15,8 +15,7 @@ const paths = {
   dist: {
     root: `${root.dist}`,
     js:   `${root.dist}/js`,
-    css:  `${root.dist}/css`,
-    font: `${root.dist}/fonts`
+    css:  `${root.dist}/css`
   },
   node: {
     modules: `${__dirname}/node_modules`
@@ -32,8 +31,7 @@ const resource = {
     static: `${paths.src.static}/**/*`
   },
   vendor: {
-    js: ['jquery', 'lodash', 'dateformat', "wolfy87-eventemitter", 'react', 'react-dom', "react-router", 'bootstrap-sass'],
-    fontawesome: `${paths.node.modules}/font-awesome/fonts/**/*`
+    js: ['lodash', 'dateformat', 'react', 'react-dom', 'react-redux', 'redux', 'react-router', 'react-router-redux', 'react-tap-event-plugin', 'material-ui']
   }
 }
 
@@ -84,7 +82,6 @@ gulp.task('build:webpack', () => {
   let plugins = [
     new webpack.optimize.DedupePlugin(),
     new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
-    new webpack.ProvidePlugin({jQuery: "jquery", $: "jquery"})
   ]
   if (production) plugins.push(new webpack.optimize.UglifyJsPlugin({compress: { warnings: false　}, sourceMap: false }))
   return gulp.src(resource.src.webpack.babel)
@@ -99,7 +96,7 @@ gulp.task('build:webpack', () => {
       watch: !production,
       module: {
         loaders: [
-          {test: /\.(js|jsx)$/, loader: 'babel', exclude: /node_modules/}
+          { test: /\.(js|jsx)$/, loader: 'babel', exclude: /node_modules/ }
         ]
       },
       resolve: {
@@ -136,8 +133,6 @@ gulp.task('build:sass', () => {
 
 // copy Static Resource
 gulp.task('build:static', () => {
-  gulp.src(resource.vendor.fontawesome)
-    .pipe(gulp.dest(paths.dist.font))
   return gulp.src(resource.src.static)
     .pipe(gulp.dest(paths.dist.root))
 })
@@ -149,7 +144,7 @@ gulp.task('server', () => {
     notify: false
   })
   // watch for source
-  gulp.watch(resource.src.jade,   ['build:jade'])
+  gulp.watch(resource.src.pug,   ['build:pug'])
   gulp.watch(resource.src.sass,   ['build:sass'])
   gulp.watch(resource.src.static, ['build:static'])
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-react",
-  "version": "0.19.1",
+  "version": "0.3.1",
   "description": "React.js Boilerplate",
   "main": "source/js/main.js",
   "scripts": {
@@ -14,25 +14,27 @@
     "url": "https://github.com/jkazama/sample-ui-react.git"
   },
   "dependencies": {
-    "bootstrap-sass": "~3.3.0",
-    "co": "~4.6.0",
     "dateformat": "~2.0.0",
-    "font-awesome": "~4.6.0",
-    "jquery": "~3.1.0",
     "lodash": "~4.17.0",
     "react": "~15.4.0",
     "react-dom": "~15.4.0",
-    "react-redux": "^5.0.0",
-    "redux": "^3.6.0",
+    "react-redux": "~5.0.0",
+    "redux": "~3.6.0",
+    "react-router": "~3.0.0",
+    "react-router-redux": "~4.0.0",
+    "material-ui": "~0.17.0",
+    "react-tap-event-plugin": "~2.0.0",
     "superagent": "~2.3.0"
   },
   "devDependencies": {
-    "babel-core": "~6.18.0",
-    "babel-loader": "~6.2.0",
-    "babel-plugin-transform-runtime": "~6.15.0",
-    "babel-preset-es2015": "~6.14.0",
+    "babel-core": "~6.23.0",
+    "babel-loader": "~6.3.0",
+    "babel-plugin-transform-runtime": "~6.23.0",
+    "babel-preset-stage-0": "~6.22.0",
+    "babel-preset-es2015": "~6.22.0",
     "babel-preset-react ": "~6.23.0",
-    "babel-runtime": "~6.18.0",
+    "babel-register": "~6.23.0",
+    "babel-runtime": "~6.23.0",
     "browser-sync": "~2.17.0",
     "css-loader": "~0.25.0",
     "del": "~2.2.0",
@@ -55,6 +57,7 @@
     "node-sass": "~3.13.0",
     "pug": "~2.0.0-beta11",
     "pug-loader": "~2.3.0",
+    "redux-devtools": "~3.3.2",
     "run-sequence": "~1.2.0",
     "sass-loader": "~4.0.0",
     "style-loader": "~0.13.0",