1.1.React简介
1.2.React的基本使用
1.3.React JSX
-
1.3.1.效果
![QQ截图20201229183512.png 输入图片说明]()
-
1.3.2.JSX
-
1.全称: JavaScript XML
-
2.react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
-
3.作用: 用来简化创建虚拟DOM
- 1)写法:var ele =
Hello JSX!
- 2)注意1:它不是字符串, 也不是HTML/XML标签
- 3)注意2:它最终产生的就是一个JS对象
- 1)写法:var ele =
-
-
4.标签名任意: HTML标签或其它标签
-
5.标签属性任意: HTML标签属性或其它
-
6.基本语法规则
* 1)遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析 * 2)遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含 -
7.babel.js的作用
* 1)浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行 * 2)只要用了JSX,都要加上type="text/babel", 声明需要babel来处理 -
1.3.3.渲染虚拟DOM(元素)
-
1.语法: ReactDOM.render(virtualDOM, containerDOM)
-
2.作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
-
3.参数说明
- 1)参数一: 纯js或jsx创建的虚拟dom对象
- 2)参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
-




浙公网安备 33010602011771号