はじめに
Reactを学習している中で、改めてJSXの仕組みについて少しまとめてみました。
JSXとは?
JSXはReactで使われる記法です。下記のコードを参照すると、<h1>Hello World!</h1>がGreet関数の中に指定されています。
このようにJavascriptの中にHTMLが書かれている記法です。
また、この書き方はあくまで書き方の一つの為、今今回は裏側の仕組みを簡単にみていきます。
import React from 'react';
export default function Greet() {
return <h1>Hello World!</h1>;
}
Reactの仕組み
React.createElementは、React要素を作成するための関数です。これは、JSXがコンパイルされるときに、JSX要素が変換される関数でもあります。
例えば、上記のGreet関数は、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要素は作成されますが、画面に描画されることまではされません。
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>
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はその辺りをよしなにやってくれる