React 入门

一、官网地址

1. 英文官网: https://reactjs.org/
2. 中文官网: https://react.docschina.org/

二、React 特点

1. 声明式编码
2. 组件化编码
3. React Native 编写原生应用
4. 高效（优秀的 Diffing 算法）
5. 高效的原因：1.使用虚拟DOM，不总是直接操作页面真是DOM。2.DOM Diffing 算法，最小化页面重绘。

三、React 基本使用

3.1 效果图

3.2 引入相关 js 库

1.react.js :  React 核心库

2.react-dom.js : 提供操作DOM 的react 扩展库。

3.babel.min.js : 解析JSX 语法代码转为 JS 代码的库。

3.3 JSX(JavaScript XML)

语法：React.createElement(component,props,...children)

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

用法：var Jdom = <h1>Hello World!</h1>

标签名：HTML标签或其他标签

标签属性：HTML标签属性或其他

使用规则：

1. 遇到“<”开头的代码，以标签的语法解析：html同名标签转换为html同名元素，其他标签需要特别解析。
2. 遇到以“{”开头的代码，以JS语法解析：标签中的JS表达式必须用{ }包含。

3.4 babel.js

1. 浏览器不能直接解析 JSX 代码，需要babel 转译为纯 JS 的代码才能运行。
2. 只要用了 JSX，都要加上 type=“text/babel”，表示需要babel来处理。

3.5 渲染虚拟 DOM 

语法：ReactDOM.render(虚拟DOM，DOM容器)

作用：将虚拟 DOM 元素渲染到页面中的真实容器 DOM 中显示。

参数说明：

参数一：纯 js 或jsx 创建的虚拟dom对象

参数二：用来包含虚拟  DOM 元素的真实 dom 元素对象。

3.6 完整代码展示

3.7 练习（代码下一个文章揭秘）