使用React渲染虛擬DOM到頁面上
第一步：導入包
React可以直接下載使用，這裏我們直接使用Staticfile CDN的React CDN庫，地址如下：
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
- react：專門用於創建組件和虛擬DOM的，同時組件的生命週期都在這個包中
- react-dom：專門進行DOM操作的，最主要的應用場景，就是ReactDOM.render()
第二步：創建虛擬DOM元素
// <h1 id="myh1" title="this is a h1">這是一個大大的H1</h1>
const myh1 = React.createElement('h1', {id: "myh1", title: "this is a h1"}, '這是一個大大的H1');
// 模擬DOM嵌套
const mydiv = React.createElement('div', null, '這是一個div元素', myh1);
createElement()參數：
- 參數1：創建的元素的類型，字符串，表示元素的名稱
- 參數2：是一個對象或null，表示當前這個DOM元素的屬性
- 參數3：子節點（包括其它虛擬DOM或文本子節點）
- 參數n：其它子節點
第三步：創建容器
<div id="app"></div>
將來渲染的虛擬DOM，會放到容器內顯示。
第四步：使用ReactDOM把虛擬DOM渲染到頁面上
ReactDOM.render(mydiv, document.getElementById('app'));
render()參數：
- 參數1：要渲染的那個虛擬DOM元素
- 參數2：指定頁面上一個容器
上代碼：
React02.html代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React02</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
</head>
<body>
<div id="app"></div>
<script src="../dist/js/React02.js"></script> // 注意該腳本必須要放到div後面，因爲其內部含有DOM操作
</body>
</html>
React02.js代碼如下：
// <h1 id="myh1" title="this is a h1">這是一個大大的H1</h1>
const myh1 = React.createElement('h1', {id: "myh1", title: "this is a h1"}, '這是一個大大的H1');
// 模擬DOM嵌套
const mydiv = React.createElement('div', null, '這是一個div元素', myh1);
ReactDOM.render(mydiv, document.getElementById('app'));
效果如下：
成功將通過React創建的虛擬DOM元素渲染到頁面上了😊