React介绍：
由facebook推出的数据驱动JS库
基于MVC灵感设计（vue是基于mvvm）
特性：数据驱动 最小粒度更新(diff/fiber) 组件化
React项目创建：
1. 下载安装脚手架
yarn global add create-react-app
2. 创建项目
create-react-app 项目名(项目名及路径不能有中文)
3. 启动项目(react服务器端口默认3000)
cd 项目名
yarn start || npm run start
JSX模板语法糖：
允许在JS中混写HTML标记，每一段在JS中的HTML标记，它就是一个小的JSX
（
es字符串模板语法 `
template模板语法
jsx模板语法
）
模板语法：可以在当前模板中，嵌入一些变量或者函数等动态数据..
JSX底层:
JSX是语法糖，所以写的每一个JSX标记（template中的节点），都会被转译为虚拟DOM节点
//当把JSX节点转译成虚拟DOM时，会把中间{}中的值替换为真正的值
JSX的特性：
1. JSX中采用的是{}进行占位，在{}中可以书写任意表达式
2. JSX不同于HTML，它的事件绑定采用的是驼峰
例：
3. 动态属性绑定，采用{}进行占位！！！（react所见即所得，哪里要动哪里就加占位符）
例：
4. class是js中的关键字，所以绑定class是采用className别名
5. style必须给一个对象，不支持字符串
例：
111
组件化开发：
React自定义组件创建：
1. 引入核心模块(React项目中，一个组件就是一个.js文件，
组件.js，组件文件首字母大写 )
import React from 'react'
2. 组件创建并定义视图
class 组件名(首字母大写) extends React.Component {
render(){
return
组件视图定义再此处 //类似template
}
}
3. 暴露
export default 组件名
React组件的使用：
1. 引入自定义组件
import 自定义组件名 from './组件文件路径'
2. 使用标签直接渲染
<自定义组件名/> //单双标签都支持
组件状态：
每个组件内部需要变化的动态数据，就叫组件状态
在react中，叫state （在vue中，叫data）
1. 状态定义
class 组件 extends xxx {
state = {
状态名: 状态值
}
render(){
...
}
}
2. 获取状态的值
JS中： this.state.状态名
JSX中： {this.state.状态名}
class 组件 extends xxx {
state = {
状态名: 状态值,
city: '贵阳市'
}
render(){
//进阶取值方式，解构
let { city } = this.state
return
我的家乡是: {this.state.city}
解构取值: {city}
}
}
3. 改变状态的值
//注意在自定义函数中，this指向问题！！！！！！
REACT是基于MVC写出来的，所以没有监听数据变化！！！必须使用setState改变状态，通知视图自动更新
this.setState({
状态名: 新的值
})
//每个组件身上都有setState函数，任何组件状态改变都要用此函数！！！
//setState做了2件事：1. 改变state数据 2. 通知视图最小粒度更新