<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 其他局部使用的時候也需要引入 -->
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 各種數據的差值狀態
let str = "天氣還好" //字符串 原樣輸出
// let data = 1 //數字 原樣輸出
// let data = true/false //布爾 是否輸出
// let data = null //不輸出
// let data = undefined //不輸出
// let data = ["內容1","內容2"] //原樣輸出，去掉，號 []
let data = { //對象 點語法
name:"白休息",
age:18
}
ReactDOM.render(
<header>
<h1>nihao {str}{data.name}</h1>
<h1>大保健</h1>
</header>,
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
</script>
</body>
</html>
JSX及差值表達式單頁面應用
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章