Browse By

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

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>


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>