JSX メモ

次の2つは等価

code: jsx

const element = (

<h1 className="greeting">

Hello, world!

</h1>

);

const element = React.createElement(

'h1',

{className: 'greeting'},

'Hello, world!'

);

code: JSX で子要素を指定する

// タグが空の場合、XML のように />でタグを閉じる事ができます

const element = <img src={user.avatarUrl} />;

// JSX のタグは子要素を持つことができます

const element = (

<div>

<h1>Hello!</h1>

<h2>Good to see you here.</h2>

</div>

);

code: JSX はインジェクション攻撃を防ぐ

const title = response.potentiallyMaliciousInput;

// This is safe:

const element = <h1>{title}</h1>;

デフォルトでは、React DOM は JSX に埋め込まれた値をレンダリングされる前にエスケープします。

このため、自分のアプリケーションで明示的に書かれたものではないあらゆるコードは、

注入できないことが保証されます。レンダーの前に全てが文字列に変換されます。

これは XSS (cross-site-scripting) 攻撃の防止に役立ちます。