React Render HTML 入門教學 | w3schools 學習筆記
· 閱讀時間約 2 分鐘
前言
React 是一個專門用於構建使用者介面（UI）的 JavaScript 函式庫，其主要目標就是將 HTML 呈現在網頁中。透過 React 的核心函式 createRoot() 和方法 render()，開發者可以將 UI 元件渲染到指定的 HTML 元素中。本文將介紹 React 如何在網頁上渲染 HTML，包括核心函式與方法的用途、應用位置與語法示範，並介紹與 JSX 語法的結合使用方式。
重點摘要
- React 透過
createRoot()函式與render()方法將 HTML 渲染到網頁上。 createRoot()用於指定要渲染的目標 HTML 元素。render()用於將 React 元件實際渲染到指定元素中。- 標準的 React 專案會在
public/index.html中提供<div id="root">作為渲染容器。 - JSX 語法允許開發者在 JavaScript 中撰寫類似 HTML 的程式碼。
- 根節點不必一定是
<div>，也不一定要命名為root。
實際範例
- 渲染一段簡單的段落：
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);
上述程式碼會將 "Hello" 文字渲染到 HTML 文件中的：
<body>
<div id="root"></div>
</body>
- 使用 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);
此段程式會顯示一個包含名稱的簡單表格，渲染至 root 節點中。
- 更換根節點的標籤與 id：
不一定要使用
<div id="root">作為渲染節點，可以自行命名：
<body>
<header id="sandy"></header>
</body>
對應的 React 程式碼如下：
const container = document.getElementById('sandy');
const root = ReactDOM.createRoot(container);
root.render(<p>Hallo</p>);
此範例將段落渲染至 header 元素。
總結
React 的渲染邏輯核心在於兩個部分：定義渲染目標與執行渲染動作。透過 createRoot() 指定 HTML 元素、render() 注入 React 元件，開發者可以將 UI 動態顯示在任何節點上。搭配 JSX 語法，不僅可以撰寫更具可讀性的 UI 結構，也讓程式碼維護更為便利。