React のバージョンを 15.5 系にあげたときにやったこと

React のバージョンを 15.4.2 から 15.5.4 に上げたのでそのメモ

はじめに

• React 15.5.0 にて下記が deprecated になった
  • React.PropTypes
  • React.createClass
• 今回のプロジェクトでは React.PropTypes を使用していたのでそのマイグレーションを含めた移行手順を記載
  • 基本的にはドキュメントどおり : https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

マイグレーションスクリプトの実行

• jscodeshift をグローバルにインストール
  • $ yarn global add jscodeshift
• nodejs/bin のパスを通す
• マイグレーションスクリプトの取得
  • react-codemod を clone してスクリプトを取得

$ git clone [e-mail]:reactjs/react-codemod.git

• スクリプトの実行

$ jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js path/to/

Processing 459 files...
Spawning 7 workers...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 9 files to free worker...
All done.
Results:
0 errors
0 unmodified
292 skipped
167 ok
Time elapsed: 8.836seconds

react, react-dom のバージョンアップと prop-types のインストール

• react, react-dom バージョンアップ

$ yarn upgrade react@^15.5.0 react-dom@^15.5.0

• prop-types パッケージの追加

$ yarn add prop-types

移行が推奨されている React Addons の中で使っていたもの

• discontinuing-support-for-react-addons に記載の通り React Addons も必要に応じて対応する必要がある
• 今回使用していたのは react-addons-css-transition-group と react-addons-test-utils
• react-addons-css-transition-group の対応
  • 代わりに react-transition-group/CSSTransitionGroup を使用する

$ yarn remove react-addons-css-transition-group
$ yarn add react-transition-group
// import の置換
$ grep -lr 'react-addons-css-transition-group' path/to/* | xargs sed -i -e 's/react-addons-css-transition-group/react-transition-group\/CSSTransitionGroup/g'
$ git clean -f

• react-addons-test-utils の対応
  • 代わりに react-dom/test-utils を使用する

$ yarn remove react-addons-test-utils
$ grep -lr 'react-addons-test-utils' path/to/* | xargs sed -i -e 's/react-addons-test-utils/react-dom\/test-utils/g'
$ git clean -f

enzyme を使っている場合

• React を 15.5.x にあげると enzyme のバージョンアップも必要になる
• また、非推奨になった react-addons-test-utils の代わりに react-test-renderer が必要になる
  • ref. https://github.com/airbnb/enzyme/blob/edeb99c21cbcbc86e70a4d627192dc975d955544/README.md#installation

$ yarn upgrade enzyme
$ yarn add -D react-test-renderer