Angular 入門

ホーム > React の基礎 > React の JSX とは?

React の JSX とは?

React では通常、 JSX という JavaScript の拡張版が使われます。

JSX という名前でいろんなところから、いろんなモノが出てます。名前はあまり気にしない方がいいかもしれません。

JSX は React を使うのに必須、というわけではないのですが、非常に便利なのでよほどの理由がない限り使いましょう。

それでは、JSX とは何でしょうか?

JSX を使うと React 要素を簡便な形式で作成できます。

次の例をみてください。

import React from 'react';
import ReactDOM from 'react-dom';

var greeting = React.createElement('h1', null, 'Hi!');

ReactDOM.render(
  greeting,
  document.getElementById('root')
);

ここで React.createElement メソッドで React 要素を作成し、 ReactDOM.render メソッドで、それを出力しています。

実行すると次のようになります。

単純に h1 タグが作成されます。

これを試すには「React 版の Hello, world!」で作成された、 index.js を書き換えてください。

同等のことは JSX を使うと次のように記述できます。

import React from 'react';
import ReactDOM from 'react-dom';

var greeting = <h1>Hi!</h1>;

ReactDOM.render(
  greeting,
  document.getElementById('root')
);

変数に対して、いきなりタグをセットするような書き方になっていますが、これが JSX です。

次のように複数個の要素を作成することもできます。

var greeting =
  <div>
    <h1>Hi!</h1>
    <h2>Bye!</h2>
  </div>;

ただし、ここで全体を div で囲っているように、全体を包む要素は必要です。

はじめは奇妙な書き方に見えますが、{} で式を評価したり、プロパティをセットする等できて大変便利です。

ホーム > React の基礎 > React の JSX とは?