React 16

[kwelch]

This was the minimum I could do to update to React 16.

The other PR included all packages updated as well. Once this is merged I will proceed with a package update across the board.

[kwelch]

Should be able to remove this by updating to the latest version of jest. See jestjs/jest#4568

I am going to attempt it and if it is smooth I will remove this.

[kwelch]

This hasn't released yet. 😅 The upgrade to jest@21 was painless though.

[coveralls]

Coverage increased (+0.05%) to 94.643% when pulling fe1b17d on kwelch:react-16 into 3922d3d on coryhouse:master.

[coryhouse]

Looks great! 👍 Thanks Kyle!

[sag1v]

@coryhouse @kwelch Was about to ask if slingshot can be updated to react 16 and saw this 😄
So what is the status for now? is slingshot is fully supports react 16 and safe to use? Thanks!

[coryhouse]

Yep, 16 is in. :)

[wiadev]

Hi. I've started off the project with this template a year ago and it's very outdated.

We plan to upgrade but not sure where to start.

Could you let me know how to upgrade to the latest?

Here is my current package.json.

{
  "name": "react-slingshot",
  "version": "7.0.1",
  "description": "Starter kit for creating apps with React and Redux",
  "engines": {
    "node": "8",
    "npm": ">=3"
  },
  "scripts": {
    "preinstall": "node tools/nodeVersionCheck.js",
    "setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
    "remove-demo": "babel-node tools/removeDemo.js",
    "start-message": "babel-node tools/startMessage.js",
    "prestart": "npm run start-message",
    "start": "concurrently -k -r -s first \"npm run test:watch\" \"npm run open:src\" \"npm run lint:watch\"",
    "open:src": "babel-node tools/srcServer.js",
    "open:dist": "babel-node tools/distServer.js",
    "lint": "esw webpack.config.* src tools --color",
    "lint:watch": "npm run lint -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "remove-dist": "rimraf ./dist",
    "prebuild": "npm run lint && npm run test && npm run clean-dist",
    "build": "babel-node tools/build.js && npm run open:dist",
    "heroku-prebuild": "",
    "heroku-postbuild": "babel-node tools/build.js",
    "test": "jest",
    "test:CI": "babel-node tools/testCi.js",
    "test:cover": "npm run test -- --coverage ",
    "test:cover:CI": "npm run test:CI -- --coverage && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
    "test:watch": "jest --watch",
    "open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
    "analyze-bundle": "babel-node ./tools/analyzeBundle.js",
    "build-sitemap": "babel-node ./tools/build-sitemap.js"
  },
  "author": "Cory House",
  "license": "MIT",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.0-14",
    "@fortawesome/free-solid-svg-icons": "5.1.0-11",
    "@fortawesome/react-fontawesome": "0.1.0-11",
    "@material-ui/core": "3.8.2",
    "@material-ui/icons": "3.0.2",
    "@svgr/cli": "2.4.1",
    "auth0-js": "9.3.3",
    "auth0-lock": "11.2.2",
    "axios": "0.17.1",
    "buttercms": "1.1.4",
    "chart.js": "^1.1.1",
    "classnames": "2.2.5",
    "custom-event-polyfill": "0.3.0",
    "d3": "3.5.17",
    "ejs": "2.5.7",
    "express": "4.16.2",
    "fs": "0.0.1-security",
    "lodash": "4.17.11",
    "moment": "2.22.2",
    "object-assign": "4.1.0",
    "postcss-hexrgba": "1.0.1",
    "query-string": "6.1.0",
    "ramda": "0.25.0",
    "raw-loader": "0.5.1",
    "rc-form": "2.1.7",
    "react": "16.3.0",
    "react-ab-test": "2.0.1",
    "react-accessible-accordion": "2.4.5",
    "react-chartjs": "1.2.0",
    "react-copy-to-clipboard": "5.0.1",
    "react-dom": "16.3.0",
    "react-geocode": "0.1.2",
    "react-helmet": "5.2.0",
    "react-hint": "3.1.0",
    "react-in-viewport": "0.0.31",
    "react-input-range": "1.3.0",
    "react-load-script": "0.0.6",
    "react-radio-group": "3.0.2",
    "react-rangeslider": "2.2.0",
    "react-redux": "5.0.5",
    "react-responsive-embed": "2.1.0",
    "react-responsive-spritesheet": "2.3.9",
    "react-router-dom": "4.2.2",
    "react-router-redux": "5.0.0-alpha.6",
    "react-select": "2.0.0",
    "react-share": "2.1.1",
    "react-slick": "0.23.1",
    "react-stripe-elements": "2.0.3",
    "react-sweet-progress": "1.1.0",
    "recharts": "1.5.0",
    "redux": "3.6.0",
    "redux-form": "7.2.3",
    "redux-localstorage": "0.4.1",
    "redux-thunk": "2.1.0",
    "reselect": "3.0.1",
    "simple-line-icons": "2.4.1",
    "sitemap": "2.1.0",
    "slick-carousel": "1.8.1",
    "uuid": "3.2.1",
    "validator": "10.4.0"
  },
  "devDependencies": {
    "autoprefixer": "7.1.4",
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.1",
    "babel-plugin-module-resolver": "2.7.1",
    "babel-plugin-react-css-modules": "3.3.1",
    "babel-plugin-transform-react-constant-elements": "6.23.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.6",
    "babel-polyfill": "6.23.0",
    "babel-preset-env": "1.6.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.24.1",
    "browser-sync": "2.18.12",
    "chalk": "2.0.1",
    "compression-webpack-plugin": "1.1.12",
    "concurrently": "3.5.0",
    "connect-history-api-fallback": "1.3.0",
    "coveralls": "2.13.1",
    "css-loader": "0.28.7",
    "enzyme": "3.0.0",
    "enzyme-adapter-react-16": "1.0.0",
    "eslint": "4.2.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-react": "7.3.0",
    "eslint-watch": "3.1.2",
    "extract-text-webpack-plugin": "3.0.1",
    "file-loader": "0.11.2",
    "history": "4.6.0",
    "html-string-replace-webpack-plugin": "1.0.5",
    "html-webpack-plugin": "3.2.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "20.0.4",
    "jest-cli": "20.0.4",
    "json-loader": "0.5.4",
    "mockdate": "2.0.1",
    "node-sass": "^4.9.4",
    "opn-cli": "3.1.0",
    "postcss-at-rules-variables": "0.1.4",
    "postcss-cssnext": "3.0.2",
    "postcss-custom-properties": "6.2.0",
    "postcss-each": "0.10.0",
    "postcss-import": "11.0.0",
    "postcss-loader": "2.0.6",
    "postcss-mixins": "6.2.0",
    "postcss-nested": "2.1.2",
    "postcss-scss": "1.0.2",
    "postcss-url": "7.3.0",
    "prompt": "1.0.0",
    "prop-types": "15.5.10",
    "raf": "3.3.2",
    "react-hot-loader": "3.0.0-beta.6",
    "react-test-renderer": "16.0.0",
    "redux-immutable-state-invariant": "2.0.0",
    "redux-mock-store": "1.3.0",
    "replace": "0.3.0",
    "rimraf": "2.6.1",
    "sass-loader": "6.0.6",
    "style-loader": "0.19.0",
    "stylelint": "8.4.0",
    "url-loader": "0.5.9",
    "webpack": "3.1.0",
    "webpack-bundle-analyzer": "2.8.2",
    "webpack-dev-middleware": "1.11.0",
    "webpack-hot-middleware": "2.18.2",
    "webpack-md5-hash": "0.0.5"
  },
  "keywords": [
    "react",
    "reactjs",
    "react-router",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack",
    "redux",
    "flux",
    "boilerplate",
    "starter"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/coryhouse/react-slingshot"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tools/assetsTransformer.js",
      "\\.(css)$": "<rootDir>/tools/assetsTransformer.js"
    },
    "setupFiles": [
      "raf/polyfill",
      "./tools/enzymeTestAdapterSetup.js"
    ]
  },
  "babel": {
    "env": {
      "development": {
        "presets": [
          "env",
          "react",
          "react-hmre",
          "stage-1"
        ]
      },
      "production": {
        "presets": [
          [
            "env",
            {
              "es2015": {
                "modules": false
              },
              "targets": {
                "ie": 9,
                "uglify": true
              }
            }
          ],
          "react",
          "stage-1"
        ],
        "plugins": [
          "transform-react-constant-elements",
          "transform-react-remove-prop-types"
        ]
      },
      "test": {
        "presets": [
          "env",
          "react",
          "stage-1"
        ]
      }
    }
  },
  "eslintConfig": {
    "root": true,
    "extends": [
      "eslint:recommended",
      "plugin:import/errors",
      "plugin:import/warnings"
    ],
    "plugins": [
      "react"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true,
        "experimentalObjectRestSpread": true
      }
    },
    "env": {
      "es6": true,
      "browser": true,
      "node": true,
      "jquery": true,
      "jest": true
    },
    "rules": {
      "quotes": 0,
      "no-console": 1,
      "no-debugger": 1,
      "no-var": 1,
      "semi": [
        1,
        "always"
      ],
      "no-trailing-spaces": 0,
      "eol-last": 0,
      "no-underscore-dangle": 0,
      "no-alert": 0,
      "no-lone-blocks": 0,
      "jsx-quotes": 1,
      "react/display-name": [
        1,
        {
          "ignoreTranspilerName": false
        }
      ],
      "react/forbid-prop-types": [
        1,
        {
          "forbid": [
            "any"
          ]
        }
      ],
      "react/jsx-boolean-value": 0,
      "react/jsx-closing-bracket-location": 0,
      "react/jsx-curly-spacing": 1,
      "react/jsx-indent-props": 0,
      "react/jsx-key": 1,
      "react/jsx-max-props-per-line": 0,
      "react/jsx-no-bind": 0,
      "react/jsx-no-duplicate-props": 1,
      "react/jsx-no-literals": 0,
      "react/jsx-no-undef": 1,
      "react/jsx-pascal-case": 1,
      "react/jsx-sort-prop-types": 0,
      "react/jsx-sort-props": 0,
      "react/jsx-uses-react": 1,
      "react/jsx-uses-vars": 1,
      "react/jsx-wrap-multilines": 1,
      "react/no-danger": 1,
      "react/no-did-mount-set-state": 1,
      "react/no-did-update-set-state": 1,
      "react/no-direct-mutation-state": 1,
      "react/no-multi-comp": 1,
      "react/no-set-state": 0,
      "react/no-unknown-property": 1,
      "react/prefer-es6-class": 1,
      "react/prop-types": 1,
      "react/react-in-jsx-scope": 1,
      "import/extensions": 1,
      "react/self-closing-comp": 1,
      "react/sort-comp": 1
    },
    "globals": {}
  }
}

Do I just need to update the packages.json with your new packages.json?

[coryhouse]

The easiest way to assure you get all the updates is to paste your app code into a new copy of react-slingshot.