JSX基本理解
圖片.png
圖片.png
代碼實(shí)戰(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")
);
//通過(guò)js的方式寫react
/*
React.createElement("h1",null,"大大好"),三個(gè)參數(shù):
參數(shù)一:創(chuàng)建的節(jié)點(diǎn)
參數(shù)二:dom節(jié)點(diǎn)的屬性
參數(shù)三:dom節(jié)點(diǎn)的子節(jié)點(diǎn)
*/
ReactDOM.render(
React.createElement("h1",null,"大大好"),
document.getElementById("hello")
);
//在JSX中運(yùn)行js代碼用{}括起來(lái)
var text = "大家好才是真的好";
ReactDOM.render(
<h1><font color='red' >{text}</font></h1>,
document.getElementById("hello3")
);
</script>
</html>
