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

今回は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 <置き換えたいソースのパス>