🍣

JSX

2024/03/06に公開

JSXとは

JSX(Javascript Syntax Extension)とはReactによるJavascriptの構文を拡張したもの
 JSXはJSのオブジェクトに変換される。

たとえば、次のようなJSXコードを書いて、単純な見出し要素を表示することができます。

const heading = <h1>Hello, World</h1>;

このコードはHTMLのように見えますが、JavaScriptです。constがheadingという新しい変数を作り、その変数の値がJSX式の結果となります。

JSXの仕組み

JSXは、ブラウザで実行される前に、通常のJavaScriptに変換されます。この変換は、トランスパイラと呼ばれるツールを使って行われます。
 JSXの最も一般的なトランスパイラはBabelです。Babelは、JSXのコードを一連の関数呼び出しに変換します。これらの関数呼び出しは、
 JSXで書かれたHTMLのようなコードと同等になります。そして、ブラウザは、結果として得られたJavaScriptコードを実行することができます。

例えば、次のようなJSXコードです。

const element = (
    <h1 className = "greeting">
    Hello World
    </h1>

これをbabelを使用すると以下のように変換される。

const element = React.createElement(
    'h1', 
    {className = "greeting}
    'Hello World',
);

Discussion