はむはむエンジニアぶろぐ

365日エンジニアリング

【React】コンポーネント作成時にWarningが出ている

React.createClassを使用して、コンポーネントを作成するとWarningログが出てしまう。

import React from 'react';
import ReactDOM from 'react-dom';

var HelloWorld = React.createClass({
    render: function() {
        return <div>Hello, World</div>;
    },
});

var helloWorldElement = <HelloWorld/>;
ReactDOM.render(helloWorldElement, content);
compiled_index.js:20944 Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class

どうやら、v16でReact.createClassは廃止するからJavaScriptのクラスか create-react-class を使えって話らしい。

createClassを使う

結構、破壊的な変更ですね〜。
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.createclass

createReactClassを使って、コードを記述するとWarningのログが消えた。

import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';

var HelloWorld = createReactClass({
    render: function() {
        return <div>Hello, World</div>;
    },
});

var helloWorldElement = <HelloWorld/>;
ReactDOM.render(helloWorldElement, content);

しかし、既存のコードをv16に上げるためには全て手動で書き換えないといけないのは辛い。
そこで、移行ツールが提供されているので利用する。

移行ツールを使用する

$ npm install --save jscodeshift

jscodeshiftをインストールします。
何の変換なのか、教えてあげる必要があるので変換に使用するファイルを取得する必要がある。

$ git clone https://github.com/reactjs/react-codemod.git
$ ./node_modules/jscodeshift/bin/jscodeshift.sh -t react-codemod/transforms/class.js {変換したいjsファイル}


そうすると、React.createClassを使用していたコードがJavaScriptのクラス構文に変換される。

import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorld extends React.Component {
    render() {
        return <div>Hello, World</div>;
    }
}

var helloWorldElement = <HelloWorld/>;
ReactDOM.render(helloWorldElement, content);