ReactDOMを使ってHTMLにコンポーネントを表示する

前回のレッスンでは、React での基本的なコンポーネントの作り方について学びました。
でも、実はコンポーネントを作っただけではブラウザー上には表示されません。

ReactDOM とは

ReactDOM（リアクトドム） は、Reactで作ったコンポーネントをWebページ上で実際に表示するために必要なライブラリーです。

ReactDOM の主な3つの役割

1. Reactで作ったコンポーネントをWebページ上に表示する。
2. コンポーネントのデータが変わったときにそれをページにすぐに反映させる。
3. サーバー上でコンポーネントをHTMLに変換してブラウザーに送る。

「DOM」については『mosya』で解説してるよ！

実際のコードを使って、どうやって Web ページに表示されるのか見てみましょう！

import { createRoot } from "react-dom/client";
import React from "react";
import { App } from "./App.jsx";

createRoot(
  document.getElementById("root")
).render(<App />);

ReactDOM でレンダリング

React のインポート

import React from "react";

ReactDOM のインポート

import { createRoot } from "react-dom/client";

作成したコンポーネントを HTML に表示する

React で作ったコンポーネントを HTML に表示するためには、特定のHTML要素にそのコンポーネントを紐づける必要があります。

HTML の準備

まず、HTML ファイル内に、コンポーネントを表示するための場所を確保します。

<div id="root"></div>

createRoot を使ったレンダリング

React コンポーネントをレンダリングするには、createRoot関数とroot.render()というメソッドを使います。

import { createRoot } from "react-dom/client";

const root = createRoot(
  document.getElementById("root")
);
root.render(<App />); // 👈 ここで表示したいコンポーネントを指定

const root = createRoot(
  document.getElementById("root")
);

root.render(<App />);