reactなどのライブラリがブラウザに表示されるまで

今回はまだ解像度が高くないので、ざっくりと調べたままの概要を書き残します。

reactはJSXを使ってHTMLを表現する。

• JSXとは、JavaScriptファイル内でHTMLのようなマークアップをかけるようにするもの。

①JavaScriptへのトランスパイル
Reactのコード（JSX, Typescript)はそのままではブラウザで動かせないため、BabelやTypescriptコンパイラによってJavaScriptにトランスパイル（変換）される。

• JSX: (<div>Hello</div>) → React.createElement("div", null, "Hello")
• TypeScript: (const message: string = "Hello";) → var message = "Hello";

②Reactは複数のコンポーネントで構成されているため、それらをWebpackやViteなどで１つのファイル（または複数のチャンク）にまとめる。

③ 最適化（圧縮、ツリーシェイキング）
本番環境向けには、コードの最適化が行われる

• Minify(圧縮): 不要なスペースやコメントを削除
• Tree Shaking: 使われていないコードを削除