ReactがES6クラスのサポートを導入

FacebookがReactのv0.13をリリースした。ES6クラスもサポートする。

Reactは，リアクティブなユーザインターフェース開発のための，FacebookによるJavaScriptライブラリである。Instagramアプリの開発に加えて，Facebook自体でも部分的に使用されている。

“React v0.13”という記事では，同社の開発者であるBen Alpert氏が，ES6クラスのサポートで，"さらに柔軟なコンポーネントの記述が"可能になること，最終的にReact.createClassをリプレースする予定であることなどを説明している。

ES6クラスに関してはSebastian Markbåge氏が，“React v0.13.0 Beta 1”という記事で，さらに詳しく説明している。

氏によれば，

JavaScriptにはもともと，クラスシステムは組み込まれていません。一般的なフレームワークはどれも，独自にそれを組み込んでいます。私たちも同じことをしました。これはつまり，フレームワーク毎にわずかに違うセマンティクスを学ばなければならない，ということになります。

私たちは，クラスシステムの設計作業をしたくないと考えました。クラスの生成に関しては，何であれ，JavaScriptの慣用的な手法を利用したかったのです。

React 0.13.0では，Reactコンポーネントの生成にReact,createClassを使う必要はなくなりました。トランスパイラがあれば，ES6のクラスも使えます。jsx --harmonyのようにharmonyオプションを使えば，react-toolsに同梱されたトランスパイラを利用できます。

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

React.render(<HelloMessage name="Sebastian" />, mountNode);

APIとしては，getinitialState以外，期待されそうなものはほとんど揃っています。クラスの状態を指定する慣用的な方法として，単純にインスタンスのプロパティを使用することにしたからです。同じように，getDefaultPropsやpropTypesも，実際にはコンストラクタのプロパティに過ぎません。

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

その他にも，React CoreやReact Tools，JSXなどに多数の変更点がある。

React Coreの新機能としては，React.findDOMNode(component)とReact.cloneElement(el, props)が，トップレベルAPIに追加されている。これまでのcomponent.getDOMNoce()ではなく，React.findDOMNode(component)を使う必要がある点に注意が必要だ。将来的にはさらに多くのパターンが使えるようになる。React.cloneElementは，React要素のコピーを生成するためのものだと説明されている。React.addons.cloneWithPropsに近いが，keyとrefを保持し，styleやclassNameの自動的なマージを行わない点が違う。

React Toolsでは，jsxコマンドで--targetオプションが新たに利用可能になった。Reactユーザはこれを使って，ECMAScriptバージョンをターゲットに指定することができる。

React 0.13ではJSXが大きく変更されている。要素内で>や/を使用した場合，これまでは文字列として扱われていたが，JSXのパース方法が変わったため，パースエラーとして扱われるようになった。これによる影響を受けた人に対してAlpert氏は，“npmのjsx_orphaned_brackets_transformerパッケージを使って，JSXコードの潜在的な問題の検出と修正が可能”だと述べている。

React 0.13は現在，ここからダウンロード可能だ。