React管理系统搭建一

React核心思想：通过数据的改变来影响视图的渲染（数据驱动）

REACT是基于独有的JSX语法实现视图（数据和HTML）渲染的

JSX语法的渲染使用的是ReactDOM.render

ReactDOM.render([JSX元素],[指定的容器],[回调函数：当我们把JSX放到指定容器内，触发执行的函数]); 

JSX = JAVASCRIPT + XML（HTML）

不允许出现两个“根”元素，如果需要绑定复杂的结构，最外层嵌套一个容器做为根元素即可 

　　Fragment 根标签，不会被渲染

　　div 根标签，会被渲染

把数据嵌入到JSX中（不是嵌入到元素的属性中，而是正常的内容中）
=> 可以嵌入变量或者直接的数据值  
=> 不能嵌入对象（代指：{}、/^$/、日期对象、函数、或者数组中的某一项是前面的也不行 [一维简单的数据是可以的]） 
=> 可以嵌入基本类型值（null/undefined/布尔值都是空元素，也就是不显示任何的内容） 
=> 大括号中可以嵌入JS表达式（执行JS代码需要有返回结果的） ，循环创建的JSX元素需要设置标识KEY，并且在当前循环的时候，这个KEY需要唯一；使用MAP是因为它有返回值，返回的是替换后的数组； 

使用三元运算符解决判断操作，（IF和SWITCH都不可以） 

可以给JSX元素设置属性 =>属性值对应大括号中 对象、函数 都可以放（也可以放JS表达式） =>STYLE属性值必须是对象（不能是字符串） =>CLASS 用 CLASS-NAME 代替 =>... 

REACT是如何把JSX元素转换为真实的DOM元素并且添加到页面中？

1. 基于BABEL/BABEL-LOADER/BABEL-PRESET-REACT-APP：把JSX语法编译为REACT.CREATE-ELEMENT这种模式 =>CREATE-ELEMENT中至少两个参数，没有上限

第一个：目前是当前元素标签的标签名（字符串）

第二个：属性（没有给元素设置属性则为NULL）

其它的：当前元素的所有子元素内容（只要子元素是HTML，就会变为新的CREATE-ELEMENT）

2. 执行CREATE-ELEMENT，把传递进来的参数最后处理成为一个对象

3. 把生成的对象交给RENDER进行处理：把对象编程DOM元素，插入到指定的容器中 

 

 

 

git命令

create-react-app 创建React单页应用的方法 脚手架

react+js

react-router-dom 通过dom事件控制路由

switch 只显示匹配到的第一个路由

exact 路由精准匹配

路由的三种模式 

HashHistory

BrowserHistory

CreateMemoryHistory

Sass 全局样式配置

antd组件按需加载

 

函数定义方式：箭头函数() =>、构造器内声明、bind绑定

样式权重   ！important

props 参数

render 返回一个React元素

定义子类的构造函数时，都需要调用 super 方法。因此，在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头。

代表事件的监听 prop 命名为 on[Event]

处理事件的监听方法命名为 handle[Event]