初识jsx

24 阅读1分钟

React使用在js基础上的语法规则jsx,x指xml

Jsx

一、语法规则

1、定义虚拟dom不要写引号

2、标签中混入js表达式用{}

3、标签中类名指定用className

image-20250513160737204.png

4、内联样式,用style={{key:value}}形式

image-20250513161508471.png

5、虚拟dom对象只能有一个根标签

6、标签以小写开头会匹配html标签,以大写开头会匹配自定义标签(图中Good就是自定义标签)

image-20250513162637026.png

7、虚拟dom的标签中要实现循环该如何写?

image-20250513170514163.png

二、js模块化与组件化

模块化指js的模块化,指将js文件分为多个js文件

组件化指将js,css,html等元素全部组件化

三、函数式组件

1、创建的函数式组件名首字母要大写

2、渲染时要写成闭合的标签形式

image-20250514213536320.png

四、原生按钮绑定事件的三种方式

1、dom+addEventListener;

2、dom+onclick;

3、标签+onclick;

image-20250516163055132.png