<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<!-- 引入react 用来创建虚拟dom的 -->
<script src="./js/react.production.min.js"></script>
<!-- 引入react-dom 用来渲染虚拟dom的 -->
<script src="./js/react-dom.production.min.js"></script>
<!-- 引入一个js库babel 将jsx可以转换成js的-->
<script src="./js/babel.min.js"></script>
<script type="text/babel">
// 1、获取根节点
var root = document.getElementById('root')
// 2、创建虚拟DOM
var obj = (
<div>
<h2>jsx语法</h2>
<p>
这是一个段落<span>这个p里面的span</span>
</p>
{/*这是jsx中的注释*/}
<h3>随机数:{Math.random()*10}</h3>
<h3>当前的时间:{new Date().toLocaleTimeString()}</h3>
</div>
)
// 3、js没有办法解析jsx 因此我们需要在引入一个js库 babel.min.js 将jsx可以转换成js的
ReactDOM.render(obj,root)
/*
1、jsx如果只有一个标签,() 可以省略,如果有() 建议不要省略
2、非表单元素绑定数据使用 {}
3、属性绑定 {}
4、单标签要关闭 <img src='./1.jpg' />
5、() 按照html解析,{}里哪找json解析
6、html写类名 要用className
7、动态class className={变量}
8、{} 可以写三目运算符
9、动态行间样式 style={json}
10、注释 {/*这是jsx中的注释
11、随机数:{Math.random()*10}
*/
</script>
</body>
</html>
</html>
03 react体验jsx语法
最新推荐文章于 2024-05-30 17:45:31 发布