JSX介绍
jsx是js的语法扩展,jsx使得我们可以以类似html的形式去使用js。使用jsx将我们期望的网页结构编写出来,然后react再根据jsx自动生成js代码。我们编写的jsx代码,最终都会转换为以调用React.createElement()
创建元素的代码。
babel:要在react中使用jsx,必须引入babel,用与将jsx转换成js
<!--引入babel-->
<script src="babel.min.js"></script>
<!--设置js代码被babel处理-->
<script type="text/babel"></script>
JSX的注意事项
- jsx不是字符串,不要加引号
- jsx中html标签小写,react组件应该大写
- jsx有且只有一个跟标签
- jsx标签必须正确结束
- jsx中可以使用{}嵌入表达式(有值的语句就是表达式,比如字面量,有返回值的函数)
- jsx表达式不展示空值,布尔值,undefined
- jsx中,属性可以直接在标签中设置。注意:class要改成className,style中必须使用对象设置。(style={{}},外层括号是嵌入表达式,内层括号是指对象)