jsx语法规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx语法规则</title>
<style>
.title{
background-color: aqua;
width: 200px;
}
</style>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
const myId = 'aTgUiGu'
const myData = 'hello,rEaCt hhq'
// 1。创建虚拟DOM
const VDOM = (
<div>
<h2 className="title" id={myId.toLowerCase()}>
<span style={{color:'white',fontSize:'30px'}}>{myData.toLowerCase()}</span>
</h2>
<input type="text" />
</div>
)
//2。渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"))
/*
jsx语法规则
1.定义虚拟DOM时，不要写引号
2.标签中混入js表达式时要用{}
3.样式的类名指定不要用class，要用className
4.内联样式，要用style={{key:value}}的形式去写
5.虚拟DOM只有一个根标签
6.标签必须闭合
7.标签首字母
（1）。若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
（2）。若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
*/
</script>
</body>
</html>
1071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
