JSXを使う理由

表示のためのロジックは、イベントへの応答や経時的な状態の変化、画面表示のためのデータを準備する方法といった、他の UI ロジックと本質的に結合したものであり、React はその事実を受け入れます。

マークアップとロジックを別々のファイルに書いて人為的に技術を分離するのではなく、React はマークアップとロジックを両方含む疎結合の「コンポーネント」という単位を用いて関心を分離します。後のセクションでコンポーネントについては改めて詳しく紹介しますが、現時点で JavaScript にマークアップを書くことが気にくわない場合、こちらの議論で考えが改まるかもしれません。

React で JSX を使うことは必須ではありませんが、ほとんどの人は JavaScript コード中で UI を扱う際に、JSX を見た目に有用なものだと感じています。また、JSX があるために React は有用なエラーや警告をより多く表示することができます。

JSX に式を埋め込む

以下の例では、name という変数を宣言して、それを中括弧に囲んで JSX 内で使用しています。

const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById('root') );

あらゆる有効な JavaScript の式を JSX 内で中括弧に囲んで使用できます。例えば、2 + 2 や user.firstName や formatName(user) はすべて有効な JavaScript の式です。

以下の例では、formatName(user) という JavaScript 関数の結果を <h1> 要素内に埋め込んでいます。

`function formatName(user) { return user.firstName + ' ' + user.lastName; }

const user = { firstName: 'Harper', lastName: 'Perez' };

const element = ( <h1> Hello, {formatName(user)}! </h1>);

ReactDOM.render( element, document.getElementById('root') );`

Try it on CodePen

読みやすさのため JSX を複数行に分けています。必須ではありませんが、複数行に分割する場合には、自動セミコロン挿入の落とし穴にはまらないように括弧で囲むことをおすすめします

JSX もまた式である

コンパイルの後、JSX の式は普通の JavaScript の関数呼び出しに変換され、JavaScript オブジェクトへと評価されます。

これは JSX を if 文や for ループの中で使用したり、変数に代入したり、引数として受け取ったり、関数から返したりすることができるということです。

function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>;}

JSX で属性を指定する

文字列リテラルを属性として指定するために引用符を使用できます。

const element = <div tabIndex="0"></div>;

属性に JavaScript 式を埋め込むために中括弧を使用することもできます。