React 16.2 to 16.7

ReactRouter 4.2 to 4.3
Redux 3.7 to 4.0
Material UI 0.20 to 3.9

Author: jkazama

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015-2018 jkazama
+Copyright (c) 2015-2019 jkazama
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -91,7 +91,7 @@ public                               … deploy resources (auto generate)
     - style.css                      … from source/css
   fonts                              … icon font
   js
-    - bundle.js                      … from source/js (by Webpack)
+    - main.bundle.js                 … from source/js (by Webpack)
     - vendor.bundle.js               … from vendor dist resource
   index.html                         … from source/html
 source
@@ -120,16 +120,11 @@ source
 
 | ライブラリ               | バージョン | 用途/追加理由 |
 | ----------------------- | -------- | ------------- |
-| `react`　　　　　　　　　  | 16.2.+    | アプリケーションの UI 機能を提供 |
-| `react-dom`　　　　　　　  | 16.2.+    | アプリケーションの UI 機能 ( DOM ) を提供 |
-| `react-router-dom`        | 4.2.+    | React.js の SPA ルーティングサポート |
-| `react-tap-event-plugin`  | 3.0.+    | タップ操作のサポート |
-| `redux`                   | 3.7.+     | Flux 風な状態/イベント概念をサポート |
-| `react-router-redux`      | 5.0.+     | Redux の状態モデルに対応した react-router |
-| `material-ui`             | 0.18.+    | マテリアルデザインな UI ライブラリ |
-| `lodash` 　　　　　　　　  | 4.17.+    | 汎用ユーティリティライブラリ |
-| `dateformat`　　　　　　   | 3.0.+    | 日時ライブラリ |
-| `superagent`              | 3.8.+    | HTTP 連携ライブラリ |
+| `react`　　　　　　　　　  | 16.7.+    | アプリケーションの UI 機能を提供 |
+| `redux`                   | 4.0.+     | Flux 風な状態/イベント概念をサポート |
+| `material-ui`             | 3.9.+    | マテリアルデザインな UI ライブラリ |
+
+※ 詳細は package.json を参照してください
 
 ### License
 

gulpfile.babel.js

@@ -31,22 +31,21 @@ const resource = {
     static: `${paths.src.static}/**/*`
   },
   vendor: {
-    js: ['lodash', 'dateformat', 'react', 'react-dom', 'react-redux', 'redux', 'react-router', 'react-router-redux', 'react-tap-event-plugin', 'material-ui']
+    js: ['lodash', 'dateformat', 'react', 'react-dom', 'react-redux', 'redux', 'react-router', '@material-ui/core']
   }
 }
 
 import gulp from 'gulp'
 import gulpLoaderPlugins from 'gulp-load-plugins'
 import del from 'del'
-import path from 'path'
 import webpack from 'webpack'
 import webpackStream from 'webpack-stream'
 import runSequence from 'run-sequence'
 import browserSyncTool from 'browser-sync'
 import RevAll from 'gulp-rev-all'
 
 const $ = gulpLoaderPlugins()
-const browserSync   = browserSyncTool.create()
+const browserSync = browserSyncTool.create()
 
 let production = false
 
@@ -55,7 +54,7 @@ gulp.task('default', ['build', 'server'])
 
 //## build for developer
 gulp.task('build', (callback) =>
-  runSequence('clean', ['build:pug', 'build:sass', 'build:webpack', 'build:static'], callback)
+  runSequence('clean', ['build:pug', 'build:sass', 'build:static', 'build:webpack'], callback)
 )
 
 //## build production
@@ -78,28 +77,30 @@ gulp.task('revision', (callback) =>
 
 // compile Webpack [ ES201x(Babel) / Vue -> SPA(main.js) ]
 gulp.task('build:webpack', () => {
-  process.env.NODE_ENV = (production == true) ? 'production' : 'development'
-  let plugins = [
-    new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "vendor.bundle.js"}),
-    new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)})
+  process.env.NODE_ENV = production ? 'production' : 'development'
+  const plugins = [
+    new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" }),
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }),
   ]
-  if (production) {
-    plugins.push(new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false 　} }))
-    plugins.push(new webpack.optimize.ModuleConcatenationPlugin())
-  }
   return gulp.src(resource.src.webpack.babel)
     .pipe($.plumber())
     .pipe(webpackStream({
-      devtool: '#source-map',
+      mode: process.env.NODE_ENV,
+      devtool: production ? false : '#source-map',
       entry: {
-        app: `${paths.src.js}/main.js`,
+        main: `${paths.src.js}/main.js`,
         vendor: resource.vendor.js
       },
-      output: {filename: 'bundle.js'},
+      output: { filename: '[name].bundle.js' },
+      optimization: {
+        splitChunks: { name: 'vendor', chunks: 'initial' },
+        noEmitOnErrors: true,
+      },
       watch: !production,
       module: {
         rules: [
-          { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ }
+          { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ },
         ]
       },
       resolve: {
@@ -120,8 +121,6 @@ gulp.task('build:pug', () => {
   return gulp.src(resource.src.pug)
     .pipe($.plumber())
     .pipe($.pug())
-    .pipe($.htmlhint())
-    .pipe($.htmlhint.reporter())
     .pipe(gulp.dest(paths.dist.root))
     .pipe(browserSync.stream())  
 })
@@ -130,9 +129,8 @@ gulp.task('build:pug', () => {
 gulp.task('build:sass', () => {
   return gulp.src(resource.src.sass)
     .pipe($.plumber())
-    .pipe($.sass())
     .pipe($.concat('style.css'))
-    .pipe($.pleeease())
+    .pipe($.sass({ outputStyle: 'compressed' }))
     .pipe(gulp.dest(paths.dist.css))
     .pipe(browserSync.stream())
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-react",
-  "version": "0.5.0",
+  "version": "16.7.0",
   "description": "React.js / Redux Boilerplate",
   "main": "source/js/main.js",
   "scripts": {
@@ -14,48 +14,46 @@
     "url": "https://github.com/jkazama/sample-ui-react.git"
   },
   "dependencies": {
+    "@material-ui/core": "~3.9.0",
+    "@material-ui/icons": "~3.0.0",
+    "connected-react-router": "~6.2.0",
     "dateformat": "~3.0.0",
     "lodash": "~4.17.0",
-    "material-ui": "~0.20.0",
     "prop-types": "~15.6.0",
-    "react": "~16.2.0",
-    "react-dom": "~16.2.0",
-    "react-redux": "~5.0.0",
-    "react-router-dom": "~4.2.0",
-    "react-router-redux": "~5.0.0-alpha.9",
-    "react-tap-event-plugin": "~3.0.0",
-    "redux": "~3.7.0",
+    "react": "~16.7.0",
+    "react-dom": "~16.7.0",
+    "react-redux": "~6.0.0",
+    "react-router-dom": "~4.3.0",
+    "redux": "~4.0.0",
     "superagent": "~3.8.0"
   },
   "devDependencies": {
-    "babel-core": "~6.24.0",
+    "babel-core": "~6.26.0",
     "babel-loader": "~7.1.0",
     "babel-plugin-transform-runtime": "~6.23.0",
-    "babel-preset-env": "~1.6.0",
+    "babel-preset-env": "~1.7.0",
     "babel-preset-react": "~6.24.0",
     "babel-preset-stage-0": "~6.24.0",
     "babel-runtime": "~6.26.0",
-    "browser-sync": "~2.23.0",
-    "css-loader": "~0.28.0",
+    "browser-sync": "~2.24.0",
+    "css-loader": "~1.0.0",
     "del": "~3.0.0",
     "gulp": "~3.9.0",
     "gulp-concat": "~2.6.0",
-    "gulp-htmlhint": "~0.3.0",
     "gulp-load-plugins": "~1.5.0",
-    "gulp-pleeease": "~2.0.0",
-    "gulp-plumber": "~1.1.0",
-    "gulp-pug": "~3.3.0",
-    "gulp-rev-all": "~0.9.0",
-    "gulp-sass": "~3.1.0",
+    "gulp-plumber": "~1.2.0",
+    "gulp-pug": "~4.0.0",
+    "gulp-rev-all": "~1.0.0",
+    "gulp-sass": "~4.0.0",
     "html-loader": "~0.5.0",
-    "node-sass": "~4.7.0",
-    "pug": "~2.0.0-rc.4",
-    "pug-loader": "~2.3.0",
-    "redux-devtools": "~3.4.0",
+    "node-sass": "~4.9.0",
+    "pug": "~2.0.0",
+    "pug-plain-loader": "~1.0.0",
+    "redux-devtools": "~3.5.0",
     "run-sequence": "~2.2.0",
-    "sass-loader": "~6.0.0",
-    "template-html-loader": "~1.0.0",
-    "webpack": "~3.11.0",
-    "webpack-stream": "~4.0.0"
+    "sass-loader": "~7.1.0",
+    "webpack": "~4.19.0",
+    "webpack-bundle-analyzer": "~3.0.0",
+    "webpack-stream": "~5.1.0"
   }
 }

source/css/plain.scss

@@ -8,5 +8,5 @@
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
 }

source/html/index.pug

@@ -2,10 +2,13 @@ doctype html
 html(lang="ja")
   head
     meta(charset="utf-8")
-    meta(content="IE=edge,chrome=1" http-equiv="X-UA-Compatible")
+    meta(content="IE=edge,chrome=1", http-equiv="X-UA-Compatible")
+    meta(name="viewport", content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no")
     title アプリケーション
-    link(rel="stylesheet" href="/css/style.css")
+    link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Roboto:300,400,500")
+    link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons")
+    link(rel="stylesheet", href="/css/style.css")
     script(src="/js/vendor.bundle.js")
   body
     #app
-    script(src="/js/bundle.js")
+    script(src="/js/main.bundle.js")

source/js/actions/asset.js

@@ -1,7 +1,6 @@
 import { Level } from "constants/plain"
 import { ActionsSupport } from "platform/redux-action-support"
 import api from "api/asset.js"
-import { handleFailure } from "actions/master.js"
 import types from "constants/asset"
 
 export default class AssetActions extends ActionsSupport {

source/js/container/app.js

@@ -1,17 +1,16 @@
 import React from "react"
-import { connect } from "react-redux"
 import { Component } from "platform/react-support"
 import Header from "container/header"
 
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
 import theme from 'theme'
 
 import Routes from "routes"
 
 class App extends Component {
   render() {
     return (
-      <MuiThemeProvider muiTheme={theme}>
+      <MuiThemeProvider theme={theme}>
         <div>
           <Header />
           {Routes}

source/js/container/asset.js

@@ -1,11 +1,12 @@
 import React from "react"
+import { withRouter } from "react-router"
 import { connect } from "react-redux"
 import { Component } from "platform/redux-support"
 import AssetActions from "actions/asset"
 import {
-  Paper, TextField, RaisedButton,
-  Table, TableHeader, TableBody, TableRow, TableHeaderColumn, TableRowColumn,
-} from "material-ui"
+  Paper, TextField, Button,
+  Table, TableHead, TableBody, TableRow, TableCell,
+} from "@material-ui/core"
 import { styleUi, styleUiAsset } from "theme"
 
 class Asset extends Component {
@@ -36,34 +37,38 @@ class Asset extends Component {
     }
   }
   render() {
+    const errAbsAmount = this.errorText("absAmount")
     return (
       <div>
-        <TextField floatingLabelText="出金金額"
-          value={this.state.absAmount || ""} errorText={this.errorText("absAmount")}
+        <TextField label="出金金額"
+          margin='dense'
+          value={this.state.absAmount || ""} error={errAbsAmount !== ""}
+          helperText={errAbsAmount}
           style={styleUiAsset.absAmountText}
           onChange={e => this.handleValue(e, 'absAmount') }
-          onKeyDown={this.handleEnterKey.bind(this)} />
-        <RaisedButton label="出金依頼をする"
-          primary={true} style={styleUiAsset.requestWithdrawButton}
-          onClick={this.requestWithdraw.bind(this)} />
-        <Paper style={styleUiAsset.main} zDepth={1}>
-          <Table selectable={false} height={styleUiAsset.table.height}>
-            <TableHeader displaySelectAll={false}>
+          onKeyDown={e => this.handleEnterKey(e)} />
+        <Button variant="contained" color="primary" style={styleUiAsset.requestWithdrawButton}
+          onClick={() => this.requestWithdraw()}>
+          出金依頼をする
+        </Button>
+        <Paper style={styleUiAsset.main}>
+          <Table>
+            <TableHead>
               <TableRow>
-                <TableHeaderColumn>依頼日</TableHeaderColumn>
-                <TableHeaderColumn>ステータス</TableHeaderColumn>
-                <TableHeaderColumn>通貨</TableHeaderColumn>
-                <TableHeaderColumn>金額</TableHeaderColumn>
+                <TableCell>依頼日</TableCell>
+                <TableCell>ステータス</TableCell>
+                <TableCell>通貨</TableCell>
+                <TableCell>金額</TableCell>
               </TableRow>
-            </TableHeader>
-            <TableBody displayRowCheckbox={false}>
+            </TableHead>
+            <TableBody>
               {this.state.withdrawalList.map((item, i) =>
-                <TableRow key={i}>
-                  <TableRowColumn style={styleUi.alignCenter}>{item.requestDay}</TableRowColumn>
-                  <TableRowColumn style={styleUi.alignCenter}>{item.statusType}</TableRowColumn>
-                  <TableRowColumn style={styleUi.alignCenter}>{item.currency}</TableRowColumn>
-                  <TableRowColumn style={styleUi.alignRight}>{item.absAmount}</TableRowColumn>
-                </TableRow>
+              <TableRow key={i}>
+                <TableCell style={styleUi.alignCenter}>{item.requestDay}</TableCell>
+                <TableCell style={styleUi.alignCenter}>{item.statusType}</TableCell>
+                <TableCell style={styleUi.alignCenter}>{item.currency}</TableCell>
+                <TableCell style={styleUi.alignRight}>{item.absAmount}</TableCell>
+              </TableRow>
               )}
             </TableBody>
           </Table>
@@ -72,11 +77,11 @@ class Asset extends Component {
     )
   }
 }
-export default connect(
+export default withRouter(connect(
   Asset.mapStateToProps(state => ({
-    asset: state.reducer.asset
+    asset: state.asset
   })),
   Asset.mapDispatchToProps(dispatch => ({
     actionsAsset: new AssetActions(dispatch)
   })),
-)(Asset)
+)(Asset))