JSXの基本

はじめに

JSXとは、JavaScriptの拡張構文です。
実行時、内部的にはJavaScriptにトランスパイルされます。

具体的には、React.createElementメソッドに変換される

複数の要素を列挙することができない

複数の要素を列挙することができないため、以下のコードは不可です。

sample.js

React.DOM.render(
  <h1>Hello, World</h1>
  <p>こんにちは、世界</p>,
  document.getElementById('root')
);

複数の要素全体を<div>などの要素で括る

sample.js

React.DOM.render(
  <div>
    <h1>Hello, World</h1>
    <p>こんにちは、世界</p>,
  </div>
  document.getElementById('root')
);

または、<React.Fragment>で、複数の子要素をまとめる

sample.js

React.DOM.render(
  <React.Fragment>
    <h1>Hello, World</h1>
    <p>こんにちは、世界</p>,
  </React.Fragment>
  document.getElementById('root')
);

空要素は<~ />で終える

JSXでは、XMLと同じように、空要素は<~ />で終えなければなりません。

sample.js

//ダメなコード
const tag = <img src={logo}>;

//正しいコード
const tag = <img src={logo} />;

空要素とは

JavaScriptの予約語は使えない

JSXはあくまでもJavaScriptの拡張構文なので、JavaScriptの予約語であるclass, forなどの属性は使えない。

JavaScriptを使う場合は{}で埋め込む

JSX内でJavaScriptを使う場合は、{}で埋め込むことができる。

sample.js

const name = 'Tom';

ReactDOM.render(
  <p>Hello {name}.</p>,
docunent.getElementById('root')
);

#=> Hello Tom.