渲染 React 元素 (Rendering React Elements)

要怎麼把 React 元素顯示到畫面上 (DOM) 呢？

首先你的 HTML 需要有一個 root 標籤 (在 React 稱作 root DOM node)，然後用 ReactDOM 物件的 ReactDOM.render() 這個 function 來將 React 元素顯示到這個 root 元素上。

像是你的 HTML 長這樣子：

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

而你的 React 元素長這樣子：

const element = <h1>Hello, world</h1>;

將 element 顯示到頁面的 #root tag 中：

import ReactDOM from 'react-dom'

ReactDOM.render(element, document.getElementById('root'));

其中 ReactDOM.render() 的第一個參數是你要顯示的 React element，而第二個參數則是要顯示到哪個 HTML DOM element 上。

點我看這個例子的結果