JSX

TL;DR

Meta が開発した JavaScript の構文拡張。HTML のようなマークアップを JavaScript の中に書ける。

なぜ必要か

UI の構造を、それを描画するロジックと同じ場所に、HTML に近い見た目で書ける。当初は React だけで使われていたが、今では他のフレームワークでも使われることが多い。

仕組み

JSX のコードは、ビルド時に素の JavaScript にコンパイルされる。このとき各 JSX タグは、どの種類の要素を作るかを React に伝える関数呼び出しに変換される。

例

次の JSX は、

const helloJSX = <h1 className="super-big">Hello, JSX!</h1>

次の JavaScript にコンパイルされる。

const helloJSX = React.createElement("h1", { className: "super-big" }, "Hello, JSX!")

関連

• TSX
• React

出典

• JSX でマークアップを記述する – React