一.了解jsx语法:
1.jsx代码演示
const element= <h1>hello world </h1>
2.jsx语法优点:
a.执行更快,因为它在编译为JavaScript代码后进行了优化;
b.编译中能及时发现错误;
c.使用jsx编写模板更加简单快捷;
3.一个简单的demo展示
image.png
4.render()方法第一个参数有两点需要注意:
image.png
1.要添加一个根目录;
2.里面的自定义属性不要使用js关键字,建议使用data-xx的方式写;
5.可以将jsx文件写在单独的一个js文件中,用script标签导入即可.
6.jsx中不能使用if-else语句,但是可以使用三元表达式.
7.样式设置
image.png
注意点:是样式是双括号
image.png
8.花括号里的注释
image.png
注释说明:
a、在标签内部的注释需要花括号
b、在标签外的的注释不能使用花括号
9.花括号里可以放数组,它会自动展开里面的数据
image.png
