<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</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>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
// 后續(xù)實例代碼大部分只需替換這個位置的script，即可在本地直接運行html文件查看效果
<script type="text/babel">
ReactDOM.render(
<h1>Hello, react!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
React 元素渲染
元素是構(gòu)成 React 應(yīng)用的最小單位，它用于描述屏幕上輸出的內(nèi)容，React 通過ReactDOM.render()對元素進(jìn)行渲染。
ReactDOM.render(element, destination)包含兩個參數(shù)，第一個參數(shù)是元素的內(nèi)容，第二個參數(shù)是DOM節(jié)點，即元素的輸出位置。
React的虛擬DOM是如何實現(xiàn)的
ReactDOM.render()的第一個參數(shù)通常是一個JSX對象
JSX 的基本語法規(guī)則：遇到 HTML 標(biāo)簽（以 < 開頭），就用 HTML 規(guī)則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析。
查詢源碼可以知道，當(dāng)遇到HTML標(biāo)簽時，JSX會將html標(biāo)簽轉(zhuǎn)化成createElement操作，動態(tài)創(chuàng)建出HTML元素。
最后ReactDOM.render()將動態(tài)創(chuàng)建的元素渲染到DOM節(jié)點上，這就是虛擬DOM了。
