みんな大好き create-react-app で 脱獄せずに stage-0 を使いたい

概要

みんな大好き create-react-app で、脱獄せずに stage-0 を使いたい

復習

create-react-app は以下のように使うのでした。

$ npm install -g create-react-app
$ create-react-app YOUR_APP
$ cd YOUR_APP
$ npm start

なんと!!たったこれだけで React アプリの原型が出来上がるとは！！ というのが、create-react-appです。

問題

create-react-app は 設定いらず がコンセプトなので、諸々の設定をカスタマイズすることができません。

どうしてもカスタマイズしたい場合は、以下の「禁断の脱獄コマンド」を打つ必要があり、もう二度と、この世界に戻ってくることは出来なくなるそうです。

$ npm run eject

さて、React を ES6(class)で書く時、 以下のように、いくつかの修正が必要でした。

• getInitialState() は constructor で
• getDefaultProps() は クラス変数 defaultProps で
• propTypes は クラス変数 propTypes で

ES6 で書いた例は、以下のようになります。

import React, {Component, PropTypes} from 'react';

class AnswerRadioInput extends Component {

  constructor(props) {
    super(props);
    this.state = {
      checked: !!this.props.checked,
      id: this.props.id || 'radio-',
    };
  }

  render() { ... }
}

AnswerRadioInput.propTypes = {
  id: PropTypes.string,
  name: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  checked: PropTypes.bool,
};

AnswerRadioInput.defaultProps = {
  id: null,
  checked: false,
};

export default AnswerRadioInput;

その際、クラス変数 は static で記述したいところですが、以下のように Bebel のプラグインを追加する必要がありました。

$ npm install --save-dev babel-preset-stage-0

.babelrc

{
  "presets": ["stage-0"]
}

嗚呼、state-0 は使いたいが、禁断の eject はしたくない。

回避策

react-scripts を、(強引に)書き換えます。

node-modules/react-scripts/config にある webpack.config.dev.js を、以下のように、stage-0 も使うように書き換えちゃいます。

リリースビルド用は、webpack.config.prod.jsです。

[修正前]

  presets: [require.resolve('babel-preset-react-app')],

[修正後]

  presets: [
    require.resolve('babel-preset-react-app'),
    require.resolve('babel-preset-stage-0'),
  ],

先ほどの例を、stage-0 で書き換えたら、以下のようになります。

import React, {Component, PropTypes} from 'react';

class AnswerRadioInput extends Component {

  static propTypes = {
    id: PropTypes.string,
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired,
    checked: PropTypes.bool,
  };

  static defaultProps = {
    id: null,
    checked: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      checked: !!this.props.checked,
      id: this.props.id || 'radio-',
    };
  }

  render() { ... }
}

export default AnswerRadioInput;

そうこれこれ。キレイになりました。

まとめ

• create-react-app から脱獄せずに、かつ、stage-0 を使うために react-scripts を書き換えました。

• それなら fork しろ、という話もありますが、そのリポジトリのメンテナンスはしたくないからです。

• きっとそのうち、create-react-app のデフォルトで取り込まれるだろうと思います。

追記

• fork しました。
  https://github.com/exabugs/create-react-app

$ git clone https://github.com/exabugs/create-react-app
$ cd create-react-app
$ npm install
$ tasks/cra.sh YOUR_APP
$ cd YOUR_APP
$ npm start

YOUR_APP は create-react-app/ 下に作成されるので、適当な場所に移動して下さい。