React:JSX とは

React

概要

JSX は JavaScript の構文拡張で、React 要素を生成する：

const element = <h1>Hello, world!</h1>;

JSX のメリットは、マークアップとロジック両方をそのまま含んだように記述でき、コードが直感的に理解しやすくなる。上の例だと、HTML の h1 タグとして、Hellow world! を子要素として設定していることがすぐにわかる。

JSX は、式を埋め込むこともできる:

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

const user = {
  firstName: "goru",
  lastName: "chan",
};

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

属性の指定

文字列リテラルや中括弧を用いて属性を指定できる。タグが空の場合には \> でタグを閉じることや、子要素を持たせることもできる。

// 文字列リテラルで指定する
const element = <a href="https://www.reactjs.org"> link </a>;

// 中括弧で指定する
const element = <img src={user.avatarUrl}></img>;
const element = <img src={user.avatarUrl} />; // '/>' でタグを閉じる

// 子要素を持たせる
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

インジェクション攻撃を防ぐ

React DOM は JSX に埋め込まれた値をレンダー前にエスケープする。つまり、レンダーの前に全ての文字列が変換される。これにより、XSS(Cross-site scripting) 攻撃を防止できる：

// 悪意ある入力
const title = response.potentiallyMaliciousInput;

// React DOM にレンダーされる前にエスケープされるので安全
const element = <h1>{title}</h1>;

JSX はオブジェクト

JSX は Babel*1 を用いることで JavaScript へ変換できる：

// JSX 形式
const element = <h1 className="greeting">Hello, world!</h1>;

// 上記コードを Babel で変換後に生成されるコード
const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
);

上記のコードから下記のようなオブジェクトが生成される：

const element = {
  type: "h1",
  props: {
    className: "greeting",
    children: "Hello, world!",
  },
};

上記のオブジェクトを 『React 要素』と呼び、画面表示の説明書きと考えることができる。React ではこのオブジェクトを読み取り、DOM を構築する。

参考

*1:JavaScript へのコンパイラー