Babel に JSX は要らない #JavaScript

6to5（現: Babel）で作っていたプロダクトにビューが必要になり、ここ最近日本語圏でも増えてきた React を調べてみたら、掲題の通りらしく、試してみたのでメモ。

JSX と Babel を一緒に使う場合、どっちを先に処理にするのがいいのかなーと調べていたら、Babel のブログにこんなことが書かれていた:

Babel <3 React · Babel

Babel が JSX を理解してくれるらしい。

試してみる。

端末

$ mkdir babel-jsx
$ cd babel-jsx
$ npm install babel

React のトップページのサンプルを ES6 っぽく書く:

index.js

const HelloMessage = React.createClass({
  render() {
    return <div>Hello {this.props.name}</div>;
  }
});

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

Babel に掛けてみる:

端末

$ ./node_modules/.bin/babel index.js

babelの出力

"use strict";

var HelloMessage = React.createClass({
  displayName: "HelloMessage",

  render: function render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
});

React.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

動いてる。

babel の依存関係見ても JSX パーサが見当たらないんだけど、babel がパーサ持ってるんだろうか。