ReactDOM.render()
ReactDOM.render()方法是将模板转化为HTML语言,并插入指定的DOM节点。例如:
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div> //指定的DOM节点
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
自己测试代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ReactDOM.render()方法</title>
<script src="reactPack/react.js"></script>
<script src="reactPack/react-dom.js"></script>
<script src="reactPack/browser.min.js"></script>
<style type="text/css">
#test1{
width:auto;
height:50px;
background-color:orange;
}
</style>
</head>
<body>
<div id="test1"></div>
<script type="text/babel"> //这个<scripe>标签里面的是type。。。。不要在写错了(src,o_o)
//在ReactDOM.render()这个方法里面每一句代码结束时用逗号,最后一句啥符号都不用,一定不能用分号
ReactDOM.render(
<p>试一试ReactDOM.render()方法,看看是怎样插入指定DOM节点的</p>,
document.getElementById("test1")//获取指定DOM,是在ReactDOM.render()方法里面的
);
</script>
</body>
</html>