eslint 100%

Author: hyy1115

.eslintrc

@@ -81,7 +81,7 @@
         "react/jsx-no-literals": 0, //防止使用未包装的JSX字符串
         "react/jsx-no-undef": 1, //在JSX中禁止未声明的变量
         "react/jsx-pascal-case": 0, //为用户定义的JSX组件强制使用PascalCase
-        "react/jsx-sort-props": 1, //强化props按字母排序
+        "react/jsx-sort-props": 2, //强化props按字母排序
         "react/jsx-uses-react": 1, //防止反应被错误地标记为未使用
         "react/jsx-uses-vars": 2, //防止在JSX中使用的变量被错误地标记为未使用
         "react/no-danger": 0, //防止使用危险的JSX属性

package.json

@@ -10,6 +10,9 @@
     "build-win": "set NODE_ENV=production&& webpack --progress --hide-modules --config webpack.config.js",
     "test": "jest"
   },
+  "pre-commit": [
+    "lint"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/hyy1115/react-latest-framework.git"
@@ -47,6 +50,7 @@
     "less": "^2.7.1",
     "less-loader": "^2.2.2",
     "postcss-loader": "^0.7.0",
+    "pre-commit": "^1.2.2",
     "react-error-overlay": "^1.0.9",
     "react-test-renderer": "^15.4.2",
     "react-transition-group": "^1.1.1",
@@ -55,7 +59,7 @@
     "redux-thunk": "^2.2.0",
     "style-loader": "^0.13.2",
     "url-loader": "^0.5.6",
-    "webpack": "^3.8.1",
+    "webpack": "^3.10.0",
     "webpack-bundle-analyzer": "^2.9.1",
     "webpack-dev-server": "^2.9.4"
   },
@@ -70,8 +74,8 @@
     "preact": "^8.2.6",
     "preact-compat": "^3.17.0",
     "prop-types": "^15.6.0",
-    "react": "^16.1.1",
-    "react-dom": "^16.1.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-hot-loader": "^3.1.2",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",

src/App.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux';
+import { bindActionCreators } from 'redux'
 import { Route, Router } from 'react-router-dom'
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
 import createHistory from 'history/createHashHistory'
@@ -16,43 +16,55 @@ import asyncComponent from './AsyncComponent'
 
 import Home from 'containers/Home/Home'
 import ReactChildrenMap from './containers/Commons/ReactChildrenMap'
-const Search = asyncComponent(() => import(/* webpackChunkName: "search" */ "./containers/Search/Search"))
-const BookList = asyncComponent(() => import(/* webpackChunkName: "bookList" */ "./containers/BookList/BookList"))
+const Search = asyncComponent(() => import(/* webpackChunkName: "search" */ './containers/Search/Search'))
+const BookList = asyncComponent(() => import(/* webpackChunkName: "bookList" */ './containers/BookList/BookList'))
 
-@connect (
+@connect(
     state => {return {...state.global}},
     dispatch => bindActionCreators(global, dispatch)
 )
 export default class App extends React.Component {
-
     componentDidMount() {
         window.addEventListener('hashchange', () => {
-           this.props.currentAnimate('normal')
+            this.props.currentAnimate('normal')
         })
     }
-    
-  render() {
-      const { animateCls } = this.props
-      return (
-          <Router history={history}>
-              <Route render={({ location }) => {
-                  return(
-                      <CSSTransitionGroup
-                          transitionName={animateCls}
-                          transitionEnter={true}
-                          transitionLeave={true}
-                          transitionEnterTimeout={400}
-                          transitionLeaveTimeout={400}
-                      >
-                          <ReactChildrenMap key={location.pathname}>
-                              <Route location={location} exact path="/" component={Home} />
-                              <Route location={location} path="/search" component={Search} />
-                              <Route location={location} path="/bookList/:bookId" component={BookList} />
-                          </ReactChildrenMap>
-                      </CSSTransitionGroup>
-                  )
-              }}/>
-          </Router>
-    );
-  }
+    render() {
+        const { animateCls } = this.props
+        return (
+            <Router history={history}>
+                <Route render={({ location }) => {
+                    return(
+                        <CSSTransitionGroup
+                            transitionEnter
+                            transitionEnterTimeout={400}
+                            transitionLeave
+                            transitionLeaveTimeout={400}
+                            transitionName={animateCls}
+                        >
+                            <ReactChildrenMap key={location.pathname}>
+                                <Route
+                                    component={Home}
+                                    exact
+                                    location={location}
+                                    path="/"
+                                />
+                                <Route
+                                    component={Search}
+                                    location={location}
+                                    path="/search"
+                                />
+                                <Route
+                                    component={BookList}
+                                    location={location}
+                                    path="/bookList/:bookId"
+                                />
+                            </ReactChildrenMap>
+                        </CSSTransitionGroup>
+                    )
+                }}
+                />
+            </Router>
+        )
+    }
 }

src/actions/home.js

@@ -10,9 +10,9 @@ const receiveNav = (response) => ({
 })
 
 //获取服务器的参数，并且返回一个异步的dispatch，dispatch的对象是自己定义的action
-export const getNav = () => async (dispatch, getState) => {
+export const getNav = () => async (dispatch) => {
     try {
-        let response = await instance.get(`/book/navigation`)
+        let response = await instance.get('/book/navigation')
         await dispatch(receiveNav(response.data))
     } catch (error) {
         console.log('error: ', error)
@@ -26,9 +26,9 @@ const receiveBook = (response) => ({
     bookDetails: response.data
 })
 
-export const getBook = () => async (dispatch, getState) => {
+export const getBook = () => async (dispatch) => {
     try {
-        let response = await instance.get(`/book/list`)
+        let response = await instance.get('/book/list')
         await dispatch(receiveBook(response.data))
         return response
     } catch (error) {

src/containers/Commons/MyScroll.js

@@ -7,71 +7,44 @@
 * 该组件的作用和臭名昭著的IScroll插件相同，但是这个组件比IScroll封装的更好用，我已经在移动端项目全部页面使用了该组件。
 * 组件使用教程可以查看我写的一篇博客：https://segmentfault.com/a/1190000010042474
 * */
-exports.__esModule = true;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called'); } return call && (typeof call === 'object' || typeof call === 'function') ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var JRoll = require('jroll');
-
-var MyJRoll = function (_React$Component) {
-    _inherits(MyJRoll, _React$Component);
-
-    function MyJRoll(props) {
-        _classCallCheck(this, MyJRoll);
-
-        var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
-
-        _this.jroll = null;
-        return _this;
+import React from 'react'
+import JRoll from 'jroll'
+export default class MyJRoll extends React.Component {
+    constructor(props) {
+        super(props)
+        this.jroll = null
     }
-
-    MyJRoll.prototype.componentDidMount = function componentDidMount() {
-        var wrappers = this.props.ID || 'wrappers';
-        this.jroll = new JRoll('#' + wrappers);
-        this.jroll.refresh();
-    };
-
-    MyJRoll.prototype.componentDidUpdate = function componentDidUpdate() {
-        var _this2 = this;
-
-        setTimeout(function () {
-            return _this2.jroll.refresh();
-        }, 400);
-    };
-
-    MyJRoll.prototype.render = function render() {
-        var _props = this.props,
-            height = _props.height,
-            maxHeight = _props.maxHeight;
-
-        var _style = void 0;
+    componentDidMount() {
+        let wrappers = this.props.ID || 'wrappers'
+        this.jroll = new JRoll(`#${wrappers}`)
+        this.jroll.refresh()
+        this.jroll.on('scrollEnd', () => {
+            this.jroll.refresh()
+        })
+    }
+    componentDidUpdate() {
+        setTimeout(() =>  this.jroll.refresh(), 400)
+    }
+    render() {
+        const { height, maxHeight, bgColor } = this.props
+        let _style
         if (!maxHeight) {
-            _style = { height: height ? height : '100%' };
+            _style = {height: height ? height : '100%', background: bgColor ? bgColor : '#f6f6f6'}
         } else {
-            _style = { maxHeight: maxHeight };
+            _style = {maxHeight: maxHeight, background: bgColor ? bgColor : '#f6f6f6'}
         }
-        return _react2.default.createElement(
-            'div',
-            { id: this.props.ID ? this.props.ID : 'wrappers', style: _style },
-            _react2.default.createElement(
-                'ul',
-                { id: 'scroller', className: 'clearfix' },
-                this.props.children
-            )
-        );
-    };
-
-    return MyJRoll;
-}(_react2.default.Component);
-
-exports.default = MyJRoll;
+        return (
+            <div
+                id={this.props.ID ? this.props.ID : 'wrappers'}
+                style={_style}
+            >
+                <ul
+                    className="clearfix"
+                    id="scroller"
+                >
+                    {this.props.children}
+                </ul>
+            </div>
+        )
+    }
+}

src/containers/Commons/ReactChildrenMap.js

@@ -11,6 +11,13 @@ import warning from 'fbjs/lib/warning'
 *   <div>渲染内容</div>
 * </ReactChildrenMap>
 * */
+function warningFunc(children) {
+    if (typeof children !== 'object') {
+        warning(false, '你可能传入空元素，请传入react组件或者是DOM节点，children：%s')
+        return false
+    }
+    return true
+}
 export default class ReactChildrenMap extends React.PureComponent {
     render() {
         if (warningFunc(this.props.children)) {
@@ -20,11 +27,4 @@ export default class ReactChildrenMap extends React.PureComponent {
 }
 ReactChildrenMap.propTypes = {
     children: PropTypes.array
-}
-function warningFunc(children) {
-    if (typeof children !== 'object') {
-        warning(false, '你可能传入空元素，请传入react组件或者是DOM节点，children：%s')
-        return false
-    }
-    return true
 }

src/containers/Commons/SetDocumentTitle.js

@@ -17,56 +17,23 @@
      }
 *
 * */
-exports.__esModule = true;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called'); } return call && (typeof call === 'object' || typeof call === 'function') ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var SetDocumentTitle = function (_React$Component) {
-    _inherits(SetDocumentTitle, _React$Component);
-
-    function SetDocumentTitle() {
-        _classCallCheck(this, SetDocumentTitle);
-
-        return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+import React from 'react'
+import PropTypes from 'prop-types'
+export default class SetDocumentTitle extends React.PureComponent {
+    componentDidMount() {
+        this.setTitle()
     }
-
-    SetDocumentTitle.prototype.setTitle = function setTitle() {
-        var title = this.props.title;
-
-        document.title = title;
-    };
-
-    SetDocumentTitle.prototype.componentDidMount = function componentDidMount() {
-        this.setTitle();
-    };
-
-    SetDocumentTitle.prototype.componentDidUpdate = function componentDidUpdate() {
-        this.setTitle();
-    };
-
-    SetDocumentTitle.prototype.render = function render() {
-        return _react2.default.Children.only(this.props.children);
-    };
-
-    return SetDocumentTitle;
-}(_react2.default.Component);
-
-exports.default = SetDocumentTitle;
-
+    componentDidUpdate() {
+        this.setTitle()
+    }
+    setTitle() {
+        const { title } = this.props
+        document.title = title
+    }
+    render() {
+        return React.Children.only(this.props.children)
+    }
+}
 SetDocumentTitle.propTypes = {
-    title: _propTypes2.default.string.isRequired
-};
+    title: PropTypes.string
+}

src/containers/Commons/ShallowComponent.js

@@ -1,3 +1,4 @@
+/*eslint-disable*/
 import React from 'react'
 import isEqual from 'lodash/isEqual'
 const ShallowComponent = (component) => {