jsx语法规则
1，定义虚拟DOM时，不要用引号 ""。
2，标签中混入js表达式时，要用 {}。
3，样式的类名不能用class，要用 className。
4，内联样式要用 style={{key:value}} 的形式写。
5，虚拟DOM必须只有一个根标签。
6，标签必须闭合。
7，标签首字母：
* 若小写字母开头，则将该标签转为html中同名元素，若html中标签无，则报错。
* 若大写字母开头，react就去渲染对应的组件，若组件没有，则报错。
案例代码
PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
<body>
<!--准备好一个容器 -->
<div id="text"></div>
<!-- 加载 React。引入react核心库-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!--引入babel，用于jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel，不写默认js*/
const myId='xuSong'
const myDate='许嵩'
// 1,创建虚拟dom
const VDOM =(
<h1 className="title" id={myId.toLowerCase()}>
<span style={{fontSize:'2em'}}>{myDate}</span>
<Good>自定义标签（报错）</Good>
</h1>
)
//2，渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById('text'));
</script>
</body>