React基本引入和JSX语法
1.1 React介绍
英文官网:https://reactjs.org/
用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源
声明式编码
组件化编码
React Native 编写原生应用
高效（优秀的Diffing算法）
使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。
1.2 React的基本使用
- react.js：React核心库。
- react-dom.js：提供操作DOM的react扩展库。
- babel.min.js：解析JSX语法代码转为JS代码的库。
引入时必须讲究顺序， react.js要在react-dom.js之前
1
2
3
4
5
或使用CDN引入
1
2
3
不使用脚手架直接html文件里引入
1
2
3
效果图如下，可以看到已经完成渲染
1.纯JS式（不推荐）
React提供了一些API来创建一种 “特别” 的一般js对象 ，下面创建的就是一个简单的虚拟DOM对象
const VDOM = React.createElement('标签',{属性名1：属性值1,属性名2：属性值2},'内容')
但是大多数时候创建元素时都会遇到多层元素嵌套，比如下面的代码，一个h1标签里面装着一个span标签，就需要2次调React.createElement()方法，如果层数更多将非常不方便，而且对于查看内部的元素结构也非常不方便
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
2.JSX方式
创建同样的结构，明显JSX更加清晰简单
1
因为这里是JSX语法，不是普通的JS语法，所以书写的时候有一些差异，比如html结构不加引号直接可以写在里面作为虚拟DOM。
JSX语法规则
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
以下是JSX语法操作样式和属性的例子，对于back这个类，直接在ul中使用字符串对className属性进行赋值。列表渲染，需要形成一个数组，所以使用大括号包裹数组的方式，{ arr }，数组的具体内容是多个
1
6
7
10
22