はじめに

Reactを学習している中で、改めてJSXの仕組みについて少しまとめてみました。

JSXとは?

JSXはReactで使われる記法です。下記のコードを参照すると、<h1>Hello World!</h1>がGreet関数の中に指定されています。
このようにJavascriptの中にHTMLが書かれている記法です。
また、この書き方はあくまで書き方の一つの為、今今回は裏側の仕組みを簡単にみていきます。

sample.jsx

import React from 'react';

export default function Greet() {
  return <h1>Hello World!</h1>;
}

Reactの仕組み

React.createElementは、React要素を作成するための関数です。これは、JSXがコンパイルされるときに、JSX要素が変換される関数でもあります。

例えば、上記のGreet関数は、JSXがコンパイルされると以下のようになります。

sample.jsx

import React from 'react';

export default function Greet() {
  return React.createElement('h1', null, 'Hello World!');
}

React.createElement関数は3つの引数を取ります。

type: これは文字列（組み込みコンポーネントの場合）または関数（ユーザー定義コンポーネントの場合）です。上記の例では、'h1'がタイプです。
props: これはコンポーネントに渡すプロパティのオブジェクトです。上記の例では、nullがプロパティです。
children: これはコンポーネントの子要素です。上記の例では、'Hello World!'が子要素です。

したがって、JSXは実際にはReact.createElement呼び出しにシンタックスシュガー（糖衣構文）を提供しています。これにより、コードは読みやすく、理解しやすくなります。

レンダリングの仕組み

先ほど書いたコードでは、React要素は作成されますが、画面に描画されることまではされません。

sample.jsx

import React from 'react';

export default function Greet() {
  return React.createElement('h1', null, 'Hello World!');
}

描画されるには、React18以降では、ReactDOM.createRootを使って表示させることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="index.js"></script>
</body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';

export default function Greet() {
  return React.createElement('h1', null, 'Hello World!');
}

const container = document.getElementById('root');
ReactDOM.createRoot(container).render(<Greet />);

Next.jsでは、ReactDOM.renderという書き方は見られません。これはNext.jsは自動的にページをレンダリングできるようなファイルシステムベースのルーティングを提供しているためです。

したがって、Next.jsアプリケーションでは、ReactDOM.renderを直接呼び出す必要はありません。代わりに、各ページコンポーネントをexport defaultするだけで、Next.jsが適切にレンダリングを行います。

まとめ

JSXとは'React要素'を作成する記法(シンタックスシュガー)の一つである
JSXはあくまでReact要素を作成する為のものであり、画面に描画はされない
描画する為には、ReactDOM.createRootを用いる必要がある
Next.jsはその辺りをよしなにやってくれる