React JSX と React.createElement

「React の JSX とは？」では JSX で書いた形式と、React.createElement() 関数を呼び出した場合と、 同じ結果になりました。

これはどちらの呼び出しでも、同じオブジェクトが生成されるからです。

例を挙げます。

const hello = <h1 className="display-1">Hello!</h1>;

と

const hello = React.createElement(
  'h1', 
  { className: 'display-1' },
  'Hello!');

と記述した場合は同じ結果になります。

hello は、どちらの場合も次のようなオブジェクトになるからです。

{
    type: "h1",
    props: {
        children: "Hello!",
        className: "display-1"
    }
}

複数の要素がある場合、例えば次のような場合はどうなるでしょうか。

const hello = (
  <>
    <h1 className="display-1">Hello!</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </>
);

この場合は、props の children プロパティが配列になり、子要素を含みます。

{
    type: Symbol(react.fragment),
    props: {
        children: [
            {
                type: "h1",
                props: {
                    children: "Hello!",
                    className: "display-1"
                }
            },
            {
                type: "p",
                props: {
                    children: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
                }
            }
        ]
    }
}

以上、ここでは簡単な実験で JSX と React.createElement() の対応付けを確認しました。