はじめに

<Hello />のようなコンポーネントは最終的にどうやってブラウザに描画されるの？とふと思ったので、備忘録的にまとめていきます。
つまり、ReactとJSXがどのように連携して仮想DOMを構築し、最終的に実際のDOMを更新するかをまとめます。

コンポーネントの定義

Reactでは、コンポーネントは再利用可能なUIの一部を表現します。一般的には個々のファイルに定義され、必要に応じて他のファイルからインポートされます。

Hello.jsx

export function Hello() {
  return <h1>Hello, world!</h1>;
}

JSXとReact要素の作成

上記の書き方はJSXと呼ばれ、React.createElement()のシンタックスシュガー = 糖衣構文です。

React要素を作成するには、本来このようなAPIを呼ぶ必要があります。
それぞれtype,props,childrenという引数を取り、React要素を作成します。

const element = React.createElement(
  'h1', // type
  null, // props
  'Hello, world!' // children
);

一方で、JSXではより直感的にHTMLに近い書き方でReact要素を作成することができます。

export function Hello() {
  return <h1>Hello, world!</h1>;
}

シンタックスシュガーではありますが、JSXからReact要素を作成するには、Babelなどのトランスパイラを使用してJSXを通常のJavaScriptに変換する必要があります。これは、ブラウザやNode.jsはJSXを直接理解することができないからです。この変換過程で、JSX内のタグはReact.createElement()の呼び出しに変換されます。

<Hello />は、トランスパイラによって次のようにトランスパイルされます。

React.createElement(Hello)

これは、React.createElement関数が、指定された型（この場合はHello）とプロパティで新しいReact要素を作成することと同じ意味です。

仮想DOMへの追加と差分評価

このReact要素は、仮想DOMに追加され、最終的に実際のDOMにレンダリングされます。
仮想DOMに追加するには、ReactDOM.render関数を用いることができ、以下の様な引数を取ります。

ReactDOM.render(
  //1.React要素,
  //2.DOM要素
)

ReactDOM.render()が呼び出されると、Reactはメモリ内に仮想DOMツリーを作成し、各コンポーネントの状態を管理します。

Reactは実際のDOMとの結果の差異を計算することで、ブラウザに表示されていて「実際に表示変更が必要となるコンポーネントのみ」を効率的にレンダリングします。

Hello.jsx

export function Hello() {
  return <h1>Hello, world!</h1>;
}

App.jsx

import { Hello } from './Hello';

function App() {
  return <Hello />;
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

index.html

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

まとめ

JSXはReact.createElementのシンタックスシュガー
JSXはReact.createElementに変換するにはBabelなどのトランスパイラが必要
ReactDOM.renderが呼び出され、実際のブラウザとの差分をReactが評価することで、差分のコンポーネントのみレンダリングされる