【学习笔记-JSX】

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的注意事项

1. jsx不是字符串，不要加引号
2. jsx中html标签小写，react组件应该大写
3. jsx有且只有一个跟标签
4. jsx标签必须正确结束
5. jsx中可以使用{}嵌入表达式（有值的语句就是表达式，比如字面量，有返回值的函数）
6. jsx表达式不展示空值，布尔值，undefined
7. jsx中，属性可以直接在标签中设置。注意：class要改成className，style中必须使用对象设置。（style={{}}，外层括号是嵌入表达式，内层括号是指对象）