JSX的介绍
JSX 是 React 的核心组成部分,它使用 XML 标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以粗暴的理解为在 JS 中编写与 XML 类似的语言,一种定义带属性树结构(DOM结构) 的语法,它的目的是通过编译器将这些标记编译为标准的JS语言。
JSX原理
React.createElement(tag,{attrs},content)
JSX语法
JSX就是一个语法糖,可以更加方便的书写代码。
JSX是JavaScript扩展的意思,JSX全名是JavaScript XML
jsx原理是 React.createElement(tag,{attrs},content)
JSX注意点
1.jsx语法必须闭合
2.对象不能直接渲染,数组是以字符串的形式进行渲染
3.绑定事件事,事件名首字母需要大写
4.jsx 语法,标签必须闭合
5.jsx 语法,当遇到小写字母开头标签时,会作为普通标签。当遇到大写字母开头的标签会认为是组件。当遇到首字母大写的标签会认为是组件。当遇到 { } 时,内部会作为逻辑去处理。
6.jsx语法标签内写 js 语句必须用 差值表达式包裹起来,即 { }
7.差值表达式可以书写函数和表达式,不能书写 for 循环
JSX的规则
value :表单元素的 value 属性改为 defaultValue
checked :表单元素 checked 属性改为 defaultChecked
onXxxx :事件名首字母大写
for :label 标签中的 for 属性噶为 htmlFor
style : 写对象的形式 style={ {color:‘red’ } }
class :标签中 class 属性改为className
JSX注释使用
在jsx中加注释需要写在表达式当中,且最好在表达式中使用多行注释的语法/* /, 单行注释可能会引发一些问题, 尽量避免使用。 如:
{ / 这是JSX的注释 */ }
JSX简单使用
<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>