基本使用

基础 js 库

react.js：React 核心库

react-dom.js：提供操作 DOM 的 react 扩展库

babel.js：提供 JSX 语法代码转化 JS 代码的库

虚拟 DOM 和真实 DOM

React 提供了一些 API 来创建一种特别的一般 js 对象

const VDOM = React.createElement("xx", { id: "xx" }, "文本text");

• 虚拟 DOM 对象最终都会被 React 转换为真实 DOM
• 我们只需要操作 React 的虚拟 DOM 相关数据，React 会转换为真实 DOM 变化更新界面

React JSX

• 全称：JavaScript XML

React 定义的一种类似于 XML 的 JS 扩展语法：JS + XML 本质是React.createElement(component, props, ..., children)方法的语法糖

• 作用：用来简化创建虚拟 DOM

写法

var ele = <h1>Hello JSX!</h1>

注意：

1. 它不是字符串，也不是 HTML/XML 标签，它最终产生的就是一个 JS 对象

2. 标签名任意：HTML 标签或其它标签

3. 标签属性任意：HTML 标签属性或其它

语法规则

1. 遇到<开头的代码，以标签的语法解析：HTML 同名标签转换为 HTML 同名元素，其它标签需要特别解析
2. 遇到以 { 开头的代码，以 JS 语法解析，标签中的 JS 表达式必须用{ }括起来
3. 定义虚拟 DOM 时，不要写引号
4. 标签中混入 JS 表达式时要用{ }
5. 样式的类名指定不要用 class，要用 className
6. 内联样式，要用style={ { key: value } }的形式去写
7. 只有一个根标签
8. 标签必须闭合
9. 标签首字母
   1. 若小写字母开头，则将标签转为 html 同名元素，若 html 中无该标签对应的同名元素，则报错
   2. 若大写字母开头，React 就去渲染对应的组件，若组件没有定义，则报错

区分代码与表达式

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

下面这些都是表达式：

(1) a; (2) a+b; (3) demo(1); (4) arr.map(); (5) function test() {}

2. 语句(代码)：

下面这些都是语句(代码)：

(1) if() {}; (2) for() {}; (3) switch()

babel 的作用

React 的基础库中包含 babel.js，其作用是：

1. 浏览器不能直接解析 JSX 代码，需要 babel 转译为纯 JS 的代码才能运行
2. 只要用了 JSX，<script></script>标签内都要加上type="text/babel"，声明需要 babel 来处理

渲染函数

• 语法

ReactDOM.render(virtualDOM, containerDOM);

• 作用：将虚拟 DOM 元素渲染到页面中的真实容器 DOM 中显示
• 参数说明：
  1. 参数一：纯 JS 或 JSX 创建的虚拟 DOM 对象
  2. 参数二：用来包含虚拟 DOM 元素的真实 DOM 元素对象（一般是一个 div）