React Render HTML
Reactの目標は、さまざまな方法でWebページにHTMLをレンダリングすることです。
Reactは、と呼ばれる関数を使用してHTMLをWebページにレンダリングします
ReactDOM.render()。
レンダリング機能
このReactDOM.render()関数は、HTMLコードとHTML要素の2つの引数を取ります。
この関数の目的は、指定されたHTML要素内に指定されたHTMLコードを表示することです。
しかし、どこにレンダリングしますか？
Reactプロジェクトのルートディレクトリに「public」という名前の別のフォルダがあります。このフォルダにはindex.htmlファイルがあります。
<div>
このファイルの本文にシングルがあります。これは、Reactアプリケーションがレンダリングされる場所です。
例
IDが「root」の要素内に段落を表示します。
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));結果は<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>
);
ReactDOM.render(myelement, document.getElementById('root'));
ルートノード
ルートノードは、結果を表示するHTML要素です。
これは、Reactによって管理されるコンテンツのコンテナーのようなものです。
要素である必要はなく、 ：<div>を持つ必要もありません。id='root'
例
ルートノードは、好きなように呼び出すことができます。
<body>
<header id="sandy"></header>
</body>
<header id="sandy">要素に結果を表示します。
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));