JSX基本理解
图片.png
图片.png
代码实战
<!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,"大大好"),三个参数:
参数一:创建的节点
参数二:dom节点的属性
参数三:dom节点的子节点
*/
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>
网友评论