React 渲染 HTML
React 的目標在很多方面都是在網頁上渲染 HTML。
React 透過使用一個名為 createRoot() 的函式及其 render() 方法來渲染 HTML 到網頁。
createRoot 函式
createRoot() 函式接受一個引數，即一個 HTML 元素。
該函式用於定義 React 元件應顯示在哪個 HTML 元素中。
render 方法
然後呼叫 render() 方法來定義應該渲染的 React 元件。
但渲染到哪裡？
在你的 React 專案的根目錄下還有另一個資料夾，名為 "public"。在此資料夾中，有一個 index.html 檔案。
你會注意到此檔案 body 中有一個單獨的 <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 不必稱為 "root"，但這是標準的約定。
HTML 程式碼
本教程中的 HTML 程式碼使用了 JSX，它允許你在 JavaScript 程式碼中編寫 HTML 標籤。
如果語法不熟悉，請不要擔心，你將在下一章瞭解更多關於 JSX 的知識。
示例
建立一個包含 HTML 程式碼的變數並將其顯示在 "root" 節點中
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>);
