Wp-calypso: React 15.6 migration

[jsnmoon]

Context

React 15.6 has several deprecations that would impact us, so I thought others might find these findings useful.

Status

See this project for our current progress.

Summary of Deprecations (that affect Calypso)

React.PropTypes

• Recommended drop-in replacement: prop-types package
• npm run codemod react-proptypes ./client/your-directory

React.createClass

• Recommended replacement: React.Component (or React.PureComponent if react-addons-pure-render-mixin was used).
• npm run codemod react-create-class ./client/your-directory

react-addons-*

• The following have no drop-in replacements and will require manual intervention.
  
  
  
  • react-addons-create-fragment
  
  
  • react-addons-linked-state-mixin
  
  
• The following have drop-in replacements:
  
  
  
  • react-addons-css-transition-group with react-transition-group/CSSTransitionGroup
  
  
  • react-addons-update with immutability-helper
  
  

Custom Calypso mixins will need to be migrated manually.

1) i8n mixin auto-injection (many files)
2) lib/mixins/emitter (72 files)
3) lib/mixins/data-observe (43 files)
4) lib/mixins/analytics (28 files)
5) me/event-recorder (20 files)

[ockham]

Due to our use of the auto-injected i18n mixin, it might be worth looking into that before running the createClass -> (ES6 class) Component codemod, since that would need to ignore basically anything that calls this.translate.

[ockham]

Hopefully, we can write a codemod that uses that one util from react codemods to locate createClass instances, check if they contain this.translate, and if they do, change that to this.props.translate, and wrap the component in localize().

[spen]

https://github.com/Automattic/wp-calypso/pull/10268 is closed but I'm aiming to reopen and polish it a little bit soon. The original mixin is only used in a couple of places but, still, we'll need to squish it :)
(Incase you wanted to add that to the list)

[ockham]

Hopefully, we can write a codemod that uses that one util from react codemods to locate createClass instances, check if they contain this.translate, and if they do, change that to this.props.translate, and wrap the component in localize().

13759

[jsnajdr]

Codemod to remove react-addons-linked-state-mixin is in progress here: #13925