現場TypeScriptでReact開発「連載中④」

フロントエンド開発に必要な JavaScript と TypeScript の知識をひととおり得られたので、 次は JSX について勉強しましょう。

JSX

という名前は『JavaScript』と『XML』の組み合わせでできてる。JSX は XMLライクな記述ができるようにした ECMAScript 2015 に対する構文拡張です。
言語標準には含まれない特殊な用途のための便利な構文を、後付けで使えるようにしたものです。
実際には JSX は Babel や tsc によってコンパイルされることを前提としたシンタックスシュガーに なってる。
たとえばこのJSX コードは React をターゲットにしたコンパイルの結果、
次のように変 換される
変換前の JSX コード

<button type="submit"> 

Click Here

</button>

変換後の JavaScript コード

React.createElement( 
    'button',
    { type: 'submit'}, 
    'Click Here'
);