Edited at

続:ES5のReact.jsソースをES6ベースに書き換える

More than 1 year has passed since last update.

今回はReact15.5への対応について、元投稿の補足もしくは備忘として書きなぐりました。

ですので、詳細については他の方の投稿のほうが詳しいと思います。


概要

Reactのバージョン15.5でcreateClassやPropTypesがReactモジュールから切り離され(完全に分離するのは16とのこと)、これらを使っているとブラウザのコンソール上にWarningが出力されるようになりました。

相変わらずフロントエンド界隈は移り変わりが激しいですね。。

さて、

ES5のReact.jsソースをES6ベースに書き換える

では、React.Componentを使用するようにしましたので、

今回はreact-codemodを使用して、PropTypesを外部パッケージを使用するように対応し、さらに+αについて触れてみたいと思います。


react-codemodを使って書き換え作業をする

react-codemodはDeprecatedになったメソッドやクラスを使用して実装していたプログラムをReactが提示する代替案を使用した実装へ移行してくれるツールです。


セットアップ

https://github.com/reactjs/react-codemod

の、

setup & run

を参考にセットアップを行います。

jscodeshiftをグローバルインストールした後、react-codemodを適当なディレクトリに置きます。


PropTypesの移行

作業は結構簡単に完了できました。

PropTypesと言っているのは、下の部分です。

hoge.propTypes = {

num: React.PropTypes.number
~~~~~~~~~~~~~~~←ここ
}

本家サイトに案内が掲載されていました。

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes

該当のコマンドは、

React-PropTypes-to-prop-typesの項にあります。

// react-codemodディレクトリの一つ上で実行する場合

$ jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <置き換えたいソースのパス>
// 実行するときに「<」「>」は書かないよ!

インストールをお忘れなく。。

$ npm install prop-types --save-dev


サードパーティーのパッケージの対応


React-Bootstrap

業務上使用していたのですが、Warningが消えず厄介でした。

が、4月の終わり頃に対応版(0.31.0)をリリースしてくれたおかげで解消されました。

$ npm install react-bootstrap@0.31.0 --save


おまけ

React.createClassの代わりにReact.Componentを使用することを考えると、ES6(ES2015)ベースで実装することが必要になるようです。

React.Componentを使用しない場合は、create-react-classパッケージを使用する必要があります(こちらもインストールをお忘れなく)。

本家サイトでは、置き換えのための案内が掲載されていました。

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.createclass

$ jscodeshift -t react-codemod/transforms/class.js <置き換えたいソースのパス>