Help us understand the problem. What is going on with this article?

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

More than 3 years have 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 <置き換えたいソースのパス>
kuniken
React,Nodejs,Salesforceをよく使ってます。 ーー エンジニア募集中です! https://paiza.jp/career/job_offers/5412 システムに関するご相談はこちらより承っております。 https://solutionware.jp/contact.html
https://solutionware.jp/blog/category/kunitak/
solutionware
WEBサービスの開発・運営を通じてお客様の生産性向上を実現します
https://solutionware.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away