1.創建html文件
文件名：index.html
文件內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById("root"));
</script>
</body>
</html>
文件內容截圖如下：
2.運行index.html文件，右擊index.html選擇瀏覽器打開
運行截圖：
查看運行結果代碼截圖：
3.代碼解析：
代碼片斷：<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
用途：React 的核心庫
代碼片斷：<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
用途：提供與 DOM 操作相關的功能庫
代碼片斷：<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
用途：Babel可以將ES6語法轉爲ES5語法，這樣我們就能在目前不支持ES6瀏覽器上執行React代碼。Babel內嵌了對JSX的支持
注意：開發環境可以使用，生產環境儘量不要使用
代碼片斷：
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById("root"));
</script>
說明：
<div id="root"></div>：html中的div標籤
<script type="text/babel">：告訴瀏覽器這是jsx的語法
<h1>Hello, world!</h1>這個是jsx的語法
將<h1>Hello, world!</h1>這個標題添加到id="root"的div節點中
document.getElementById("root")獲取的是div這個dom對象
