1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 移动端适配-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx语法规则.html</title>
<style>
.red{
background-color: orange;
width: 200px;
}
</style>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
const myId = 'aTguiGu'
const myClassName = 'red'
const myData = 'Hello,rEaCT'
//1.创建虚拟DOM
const vdom =(
<div>
<h1 id={myId.toLowerCase()} className="red">
<span style={{color:'white',fontSize:'20px'}}>{myData.toLowerCase()}</span>
</h1>
<h1 id={myId.toUpperCase()} className="red">
<span style={{color:'white',fontSize:'20px'}}>{myData.toLowerCase()}</span>
</h1>
<input type="text"/>
<good>123</good>
// <Good>123</Good>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(vdom,document.getElementById('root'))
/*
jsx语法规则:
1.定义虚拟DOM时,不要写引号,引号会报错
2.标签中混入JS表达式时要用{}
3.样式类名不要写引号,如果要写,要使用className
4.内嵌样式时,要用style={{key:value,key:value}}}的形式去写
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1)如果以小写字母开头,则将改标签转为html同名元素,若不存在,则报错
(2)如果以大写字母开头,则react会创建对应的组件,若不存在,则报错
*/
</script>
</body>
</html>
总结
jsx语法规则:
1.定义虚拟DOM时,不要写引号,引号会报错
2.标签中混入JS表达式时要用{}
3.样式类名不要写引号,如果要写,要使用className
4.内嵌样式时,要用style={{key:value,key:value}}}的形式去写
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1)如果以小写字母开头,则将改标签转为html同名元素,若不存在,则报错
(2)如果以大写字母开头,则react会创建对应的组件,若不存在,则报错