1. Qiita
  2. 投稿
  3. JavaScript

Babel に JSX は要らない

  • 25
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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 がパーサ持ってるんだろうか。

Comments Loading...