1: Raect: 语法
创建虚拟DOM:
JSX: 1.1: 全程叫做: javasScript:
1.2: React 定义一种类似于XML 的JS 扩展语法: JS + XML
1.3: 本质是: React.createElement(component, props, ...children) 方法的语法糖
1.4:作用简化创建虚拟DOM
1.4.1: 写法: var ele = <h1> hello JSX </h1>
b: 注意不是字符串, 也不是HTML/ XML 标签
c: 注意: 注意最终产生的就是一个JS 对象
1.5:标签名称任意: HTML 标签或者其他标签。
XML: 是一种早期存储数据,传输数据的一种格式。 用 Json 数据格式: json: 身上有两种方法: json.parse(); (json:对象) json.stringify() (json: 字符串)
const = VDOM (
<H2 id="shangxuetang">
<span>hello React</span>
</H2>
)
创建虚拟DOM 时候:
const = (
<h2 id="shangxuetang">
<span>hello React</span>
</h2>
)
渲染虚拟DOM 到页面。
渲染虚拟DOM 到页面
ReactDOM.render(VDOM, document.getElementById("test"))
JSX 语法: 规则
2: 定义虚拟DOM 时规则:
2.1: 定义虚拟 DOM 时, 不需要加引号。
2.2: 标签中混入JS 表达式时要用 {}。
2.3: 样式的类名指定不要用class, 要用className指定 (class 是es6 中定义的关键字。:)
2.4: 内联样式: 要用 style = { { key: value}} 形似去写。
2.5: 虚拟DOM 只有一个跟标签 (div 元素)
2.6: 跟标签里边的内容必须闭合。
raect : 三个核心库