Pocket

入門 React.js その2 JSXについて

ReactではJSXというHTMLによく似たマークアップ言語がオプションで使用できます。
JSXを使用することで以下の利点があります。

• HTMLと同様の方法で要素のツリーをマークアップできる
• 意味のわかりやすいセマンティックな記述ができる
• アプリケーションの構造が可視化できる
• Reactの内部表現が抽象化される
• マークアップとそれを生成するコードが一箇所にまとまる
• 最後にJavaScriptに変換される

JSXとは？

JSXはJavaScript XMLの略であり、Reactのコンポーネント内でマークアップ言語を記述するためのXML風のシンタックスです。

React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')

JSXでは、これは次のようになります。↓

<a href="http://facebook.github.io/react/">Hello!</a>