jsx 语法
- List item
- jsx 就是一个语法糖，更加方便的书写代码
- React 提供了 JSX , JSX 全名是 javascript XML
因此，可以换成另一种方式进行书写 - 引入 babel.min.js 文件【babel.min.js 文件就是帮助浏览器解析 jsx 语法】
ReactDOM.render()第 1 个参数：标签
//标签就是 react 扩展的 jsx 语法- JSX 作用：就是在 JS 中写 html 标签
- JSX 注释：
{/* 注释内容 */}
注意：script 标签，需要添加 type=“text/babel” 属性
jsx 语法必须只有 1 个根元素
jsx 语法 标签必须闭合
jsx 语法，当遇到小写字母标签时，会作为普通标签。当遇到首字母大写的标签会认为是组件。当遇到{ }时，内部会作为逻辑去处理。
差值表达式可以书写 函数 和 表达式，不能书写 for 循环
jsx 语法标签内写 js 语句必须用 差值表达式包裹起来，即 { }
jsx的规则
- value：表单元素 value 属性改为 defaultValue
- checked：表单元素 checked 属性改为 defaultChecked
- onXxx：标签中事件类型首字母大写
- for：label 标签中的 for 属性改为 htmlFor
- style：写对象 style={ {color:‘red’}}
- class：标签中 class 属性改为 className
实例说明
<head>
<!-- 提供 React 对象 vue.min.js -->
<script src="lib/react.development.js"></script>
<!-- 提供了reactDOM 对象 将虚拟 dom 渲染成真实 dom-->
<script src="lib/react-dom.development.js"></script>
<!-- 帮助浏览器解析 jsx 语法，让浏览器支持JSX.转为JS,只可以解析type为text/babel -->
<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<div>我是JSX</div>, document.querySelector("#root"));
</script>
</body>