Skip to content

Instantly share code, notes, and snippets.

@didi0613
Last active May 30, 2017 19:32
Show Gist options
  • Save didi0613/ca9bc20db789ab240410b1f2130b1f06 to your computer and use it in GitHub Desktop.
Save didi0613/ca9bc20db789ab240410b1f2130b1f06 to your computer and use it in GitHub Desktop.
Update component to react 15.5

Update your component to react 15.5

Here is the instructions how you can update your componnet to react 15.5.

Update your dependencies

Go into your package.json and upate the followng dependencies:

"@walmart/electrode-archetype-react-component": "^13.5.3",
"@walmart/electrode-archetype-react-component-dev": "^13.5.3”,

"react": "^15.5.3",
"react-dom": "^15.5.3",
"react-addons-perf": "^15.4.2",
"react-addons-test-utils": “^15.5.1",
"react-addons-pure-render-mixin": “^15.5.2",
"react-redux": "^5.0.5”,
"recompose": "^0.23.4”,
"prop-types": "^15.5.10”

Replace the following in your application/components:

import ReactDOM into your code
React.render is now ReactDOM.render

Install your dependencies and check react version

$ npm install
$ npm ls react

You are suppose to see only one version of react, below is what i get from cart component:

@walmart/wmredux-cart@15.1.0 /Users/s0d00px/cart
├─┬ @walmart/electrode-archetype-react-component-dev@13.5.3
│ ├─┬ @walmart/react-perf-utils@0.0.3
│ │ └─┬ react-perf-utils@0.0.4
│ │   └── react@0.14.9
│ └─┬ @walmart/wmreact-test-helpers@0.2.0
│   └── react@0.14.9
├─┬ @walmart/wmreact-cc-banner@3.5.1
│ └── react@0.14.9
├─┬ @walmart/wmredux-club-locator-container@3.3.1
│ └── react@0.14.9
└── react@15.5.4

From above you will see that there are 4 dependencies need to update to support react 15.5

  1. @walmart/react-perf-utils
@walmart/react-perf-utils@0.0.3
│ │ └─┬ react-perf-utils@0.0.4

│ │   └── react@0.14.9

This is a dependency that needs updates from external react-perf-utils

  1. @walmart/wmreact-test-helpers
@walmart/wmreact-test-helpers@0.2.0
│   └── react@0.14.9

Test helpers has already being deprecated and should no longer being used here https://gecgithub01.walmart.com/react/react-test-helpers. It is also a dependency in electrode component archetype, PR is here: https://gecgithub01.walmart.com/electrode/electrode-archetype-react-component/pull/226

  1. @walmart/wmreact-cc-banner
@walmart/wmreact-cc-banner@3.5.1
│ └── react@0.14.9

Need update for component @walmart/wmreact-cc-banner to support react 15.5

  1. @walmart/wmredux-club-locator-container
@walmart/wmredux-club-locator-container@3.3.1
│ └── react@0.14.9

Need update for component @walmart/wmredux-club-locator-container to support react 15.5

Please fix the above component and the keep going the next step.

Run your app

$ builder run demo

If you see any warings that warning.js:36 Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.. Please go to your jsx file, replace import { PropTypes } from "react”; to import PropTypes from "prop-types”;.

Run your test

$ builder run test

Go ahead fix any eslint issues if you have any.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment