React.jsのJSXを使ってみる

前回のHello React.jsでコード自体は紹介したのですが、今回はその辺りをもう少し詳しく見ていきたいと思います。

JSX

var Hello = React.createClass({
  render: function() {
    return (
      <div>Hello {this.props.name}</div>
    );
  }
})

こんな感じで一見HTMLに見える部分<div>...</div>がJSXのSyntaxです。

詳しくは↓に書いてある通りなのですが、XML likeにタグを書いていく感じです。覚えることはほとんどないです。

注意点としてはHTMLではないということで、例えばdivにcontainerというクラスを指定したい場合は、<div class="container">...</div>ではなくて、<div className="container">...</div>となります。(classはJavaScriptの予約語のため)

その他ではlabelのfor属性はhtmlforにする必要があったりもします。

HTMLはタグがちゃんと閉じてなくてもエラーなったりしないですが、JSXではタグが閉じられてない場合エラーになるので事前に気づけるというのもいい点ですね。

使い方

オンラインで変換する

• JSXTransformer( http://fb.me/JSXTransformer-0.12.1.js )を事前に読み込んでおくことで使うことが出来ます。
• ただ、オンライン変換なのでproduction環境で使うのはパフォーマンス的にも推奨されていません。

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script type="text/jsx;harmony=true">
...
</script>

precompileする

• npm i -g react-toolsしてreact-toolsをインストールすることでjsxコマンドを使用することが出来ます。

% jsx --harmony src/ build/

watchさせておくことも出来ます。

% jsx --harmony --watch src/ build/

browserifyやwebpackを使って変換する

• browserifyの場合は、reactifyを使うことで変換することが出来ます。

package.json

  "browserify": {
    "transform": [
      ["reactify", {"harmony": true} ]
    ]
  }

node-jsxを使う

• server-side-renderingをする時など、node.jsの中で変換したいような場合は、node-jsxを使うことで変換することが出来ます。
• requireしてinstallするだけなので簡単です。

require('node-jsx').install({harmony: true});

JSXを使う意味

• JSXを使うことでHTMLに近い感じで記述出来て非エンジニアにもわかりやすいメリットがあります。
  • 好みもあるかと思いますが、React.DOM.div(null, 'hello')よりは<div>hello</div>の方が...
• 裏でいい感じにやってくれる。
  • 例えばv0.11からv0.12でReact.createClassの挙動が変わったのですが(これは明日書きます...)、JSXを使っている場合はコードはそのままで問題なかったりとか。

まぁそんなものかなと思うので、JSで書きたい人は書いてもいいのかなとは思います。

JSX以外ではcoffee-scriptと組み合わせることを想定して作られるreact-kupなんてのもあったりします。

確認

ちょっと変換を確認したい場合は↓などを活用すると便利です。

• JSXの変換結果の確認
  • http://facebook.github.io/react/jsx-compiler.html
• HTMLをもとにどうJSXを書けばいいのかの確認
  • http://facebook.github.io/react/html-jsx.html

ES6,7

JSXの変換するときにharmonyoptionというものがあって、それを有効にするとClassやArrow Functionなど一部のES6,7のfeatureを使用することが出来ます。こんな感じで書けて気持ちいいので個人的には有効にして使ってます。

var Items = React.createClass({
  itemName(item) {
    return `${item.name}:${item.count}`;
  },
  render() {
    var items = this.props.items.map(item => <span>{this.itemName(item)}</span>);
    return (
      <div>{items}</div>
    );
  }
});

この辺りのfeatureを使用することが出来るようです。

• es6-arrow-functions
• es6-object-concise-method
• es6-object-short-notation
• es6-classes
• es6-rest-params
• es6-templates
• es6-destructuring
• es7-spread-property

というわけでReact.jsについて聞いたときにJSXという謎の言語を使う必要があって敬遠する人もいるかと思いますが、Componentの定義をわかりやすく書くためのものなので怖くないよという話でした。

明日はComponentについてもう少し書いてみたいと思います。