（虚）根级>标签级>内容级>样式级
01-完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSX规则</title>
<style>
.title{
background-color: aquamarine;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
const myId="aTUiGu"
const myData="Hello,ReAct"
//创建虚拟DOM
const VDom=(
<div>
<h1 className="title" id={myId}>
<span style={{color:'white',fontSize:'29px'}}>
{myData.toLocaleLowerCase()}
</span>
</h1>
<h1 className="title" id={myId}>
<span style={{color:'white',fontSize:'29px'}}>
{myData.toLocaleLowerCase()}
</span>
</h1>
<input type="text"/>
<good>1234</good>
</div>
)
//渲染页面
ReactDOM.render(VDom, document.getElementById('test'))
</script>
<!-- 详细规则：https://editor.csdn.net/md?not_checkout=1&articleId=120926797 -->
</body>
</html>
02-代码解释-7大规则：
公式说明：（虚）根级>标签级>内容级>样式级)
以上是本人自己整理，为了便于记忆所以起的规则等级。
- （虚）根级
每个html都有一个DOM作为根，可以依靠这个DOM遍历上面的标签，将前端渲染出来 - 标签级
从DOM中找到我们的标签 - 内容级
在不同标签中写入内容 - 样式级
我们正文结束后腰润色，所以定义为样式级
1，（虚）根级，创建虚假DOM不要使用单引号：‘ ’
2，标签级，虚拟DOM只能有一个根标签：
错误代码：
解决：
3，标签级，jSX中的标签必须闭合
错误：
解决：
4，标签级，标签首字母
（1）若首字母是小写，那么就会将标签转换成html同名的元素
报错：html没有同名标签，就会报错
示例代码：
输出结果：
结论：在写jsx的时候不要乱写html没有的标签
（2）若首字母是大写，那么React就回去渲染组件，如果没有组件那么就会报错。
错误-代码：
错误-输出结果：
详细报错：
5，内容级，引入变量（标签中混入js表达式使用"{}"）：
对应代码：
6，样式级，标签=>修改样式（类名样式不要用Class，用ClassName）
a,样式代码：
b,代码：
c,输出：
这里说明浏览器自动帮忙修正了
修正：
7，样式级，内容=>内联样式，要用style={{key:value}}
a,代码：
b,输出错误：
c，修正：
正确代码：
解释：为什么要写两个括号？
1，第一个括号：表示写JSX
2，第二个括号：表示写的是一个对象
输出控制：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
