React レンダリング
Reactの目標は、さまざまな方法でWebページにHTMLをレンダリングすることです。
Reactは、createRoot()という関数とそのメソッドrender()を使用して、HTMLをWebページにレンダリングします。
createRoot関数
createRoot()関数は1つの引数、つまりHTML要素を受け取ります。
この関数の目的は、Reactコンポーネントを表示するHTML要素を定義することです。
レンダリングメソッド
次に、render()メソッドを呼び出して、レンダリングするReactコンポーネントを定義します。
しかし、どこでレンダリングするのでしょうか？
Reactプロジェクトのルートディレクトリには、「public」という名前の別のフォルダーがあります。このフォルダ内にindex.htmlファイルがあります。
このファイルの本文に1つの<div>があることがわかります。ここでReactアプリケーションがレンダリングされます。
例
ID が「root」の要素内の段落を表示します。
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);
結果は次のように表示されます。<div id="root">要素：
<body>
<div id="root"></div>
</body>
要素IDを「ルート」と呼ぶ必要はありませんが、これは標準的な規則です。
HTMLコード
このチュートリアルのHTMLコードはJSXを使用しているため、JavaScriptコード内にHTMLタグを記述できます。
構文に慣れていなくても心配しないでください。JSXについては次の章で詳しく説明します。
例
HTMLコードを含む変数を作成し、「ルート」ノードに表示します。
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(myelement);
ルートノード
ルートノードは、結果を表示するHTML要素です。
Reactによって管理されるコンテンツの*コンテナ*のようなものです。
<div>要素である必要はなく、id='root'を持つ必要もありません。
例
ルートノードは、好きなように呼び出すことができます。<body>
<header id="sandy"></header>
</body>
結果を<header id="sandy">要素：
const container = document.getElementById('sandy');
const root = ReactDOM.createRoot(container);
root.render(<p>Hallo</p>);
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。