Posted at

Babel に JSX は要らない

More than 3 years have passed since last update.

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

JSX と Babel を一緒に使う場合、どっちを先に処理にするのがいいのかなーと調べていたら、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 がパーサ持ってるんだろうか。