React.jsのJSXの解説

Facebook にシェア
Pocket
LINEで送る
このエントリーを Google ブックマーク に追加

前回書いたReact.jsのコードを、JSXに置き換えてみる。と書いたものの、JSXの説明で今回は完結し、次回書き直してみる。

[amazonjs asin=”B01MUS2RP9″ locale=”JP” title=”JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書”]

JSXって

JSXというのは、直感的にいうと「Javascriptの中にHTML(のようなもの)をそのまま記述できるようにしてくれるもの」。ただ、Javascriptに慣れていると逆に直感的にもわかりづらい。が、便利なことには間違いない。

前回、DOMを操作するときに、あくまでもJavascriptの記述方法でh1タグを挿入したりdivを挿入したりした。

render: function(){
    return React.DOM.h1("タイトル");
}

これを次のように書きなおすことができる。

render: function(){
    return <h1>タイトル</h1>;
}