JSX基本理解
圖片.png
圖片.png
代碼實戰(zhàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./build/react.js" charset="utf-8"></script>
<script src="./build/react-dom.js" charset="utf-8"></script>
<script src="./build/browser.min.js" charset="utf-8"></script>
</head>
<body>
<div id="hello">
</div>
<div id="hello2">
</div>
<div id="hello3">
</div>
</body>
<script type="text/babel">
ReactDOM.render(
<h1>你好</h1>,
document.getElementById("hello2")
);
//通過js的方式寫react
/*
React.createElement("h1",null,"大大好"),三個參數(shù):
參數(shù)一:創(chuàng)建的節(jié)點
參數(shù)二:dom節(jié)點的屬性
參數(shù)三:dom節(jié)點的子節(jié)點
*/
ReactDOM.render(
React.createElement("h1",null,"大大好"),
document.getElementById("hello")
);
//在JSX中運行js代碼用{}括起來
var text = "大家好才是真的好";
ReactDOM.render(
<h1><font color='red' >{text}</font></h1>,
document.getElementById("hello3")
);
</script>
</html>
