New React Env

.eslintrc.js

{
  "extends": ["airbnb", "prettier"],
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "globals": {
    "describe": false,
    "it": false,
    "before": false,
    "beforeEach": false
  },
  // config for multiple node_modules  
  // "settings": {
  //   "import/external-module-folders": ["node_modules", "client/node_modules"]
  // },
  "rules": {
    "import/prefer-default-export": 0,
    "jsx-a11y/anchor-is-valid": 0,
    "linebreak-style": 0
  }
}

create-project.sh

# Install create-react-app
npm i -g create-react-app

# Create Project
create-react-app project-name
cd project-name

# Add redux, prop-types and react-router
yarn add redux react-redux redux-thunk prop-types react-router-dom redux-logger

# Add eslint and eslint-config-airbnb
# Linux/OSX users can run
(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
# Windows users can either install all the peer dependencies manually, or use the install-peerdeps cli tool
npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb

# Add prettier, husky and lint-staged
yarn add husky lint-staged prettier eslint-config-prettier

modules-counter.js

/**
 * Actions
 */
const INCREMENT = "counter/INCREMENT";
const DECREMENT = "counter/DECREMENT";
const INCREMENTING = "counter/INCREMENTING";
const DECREMENTING = "counter/DECREMENTING";

const initialState = {
  incrementing: false,
  decrementing: false,
  count: 0
};

/**
 * Reducer
 */
export default (state = initialState, action) => {
  switch (action.type) {
    case INCREMENTING:
      return {
        ...state,
        incrementing: true
      };

    case INCREMENT:
      return {
        ...state,
        incrementing: false,
        count: action.result || state.count + 1
      };

    case DECREMENTING:
      return {
        ...state,
        decrementing: true
      };

    case DECREMENT:
      return {
        ...state,
        decrementing: false,
        count: action.result || state.count - 1
      };

    default:
      return state;
  }
};

/**
 * Action Creators
 */

const incrementing = () => ({
  type: INCREMENTING
});

const increment = count => ({
  type: INCREMENT,
  result: count
});

const decrementing = () => ({
  type: DECREMENTING
});

const decrement = count => ({
  type: DECREMENT,
  result: count
});

const incrementAsync = () => (dispatch, getState) =>
  new Promise(async resolve => {
    dispatch(incrementing());
    const { count } = getState().count;
    const { result } = await fetch(
      `https://newton.now.sh/simplify/${count}+1`
    ).then(res => res.json());
    dispatch(increment(result));
  });

const decrementAsync = () => (dispatch, getState) =>
  new Promise(async resolve => {
    dispatch(decrementing());
    const { count } = getState().count;
    const { result } = await fetch(
      `https://newton.now.sh/simplify/${count}-1`
    ).then(res => res.json());
    dispatch(decrement(result));
  });

modules-index.js

// modules/index.js

import { combineReducers } from 'redux';
import counter from './counter';

export default combineReducers({
  counter
});

package.json

{
  "scripts": {
     "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,json,css}": [
      "prettier --single-quote --write",
      "git add"
    ]
  }
}