reactjs

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

More than 1 year has passed since last update.

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

はじめに

  • React 15.5.0 にて下記が deprecated になった
    • React.PropTypes
    • React.createClass
  • 今回のプロジェクトでは React.PropTypes を使用していたのでそのマイグレーションを含めた移行手順を記載

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

  • jscodeshift をグローバルにインストール
    • $ yarn global add jscodeshift
  • nodejs/bin のパスを通す
  • マイグレーションスクリプトの取得
$ git clone git@github.com: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 を使っている場合

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