bikemanager

项目特色

前言的技术栈  健全的架构  丰富的UI组件  共享单车项目

掌握react全家桶

掌握地图和react集成技能

掌握前端图标开发技巧

掌握antd UI框架

前端后台架构设计，公共机制封装，后台管理系统开发经验

facebook开源的一个js库

react结合生态库构成一个MV*框架

react特点

　　声明式编码

组件化编码

高效的DOM Diff算法，最小页面重绘

单向数据流

MV* 框架代表只关注视图View层 + 数据层Model

Vue在表单里面数据流是双向的，但是在组件中是单向的

编程式实现： 不仅要关心如何实现，还要关心实现什么

声明式实现：只需要声明做什么，而无需关心如何实现，实现部分由框架实现

yarn新一代的包管理工具

速度快 ，安装版本统一(Lock文件)  更加简洁的输出    命令更好的语义化

yarn init / add / remove

yarn / yarn install 安装所有依赖

声明周期函数

getInitialState 初始化state 但是在ES6里面去掉了这个hook，只需要在构造函数中写state即可

getDefaultProps 函数只能用在 createClass中，不能用在ES6中

state = {} 和在构造器中使用是一样的

this.foreUpdate() 强制更新 ，触发componmentWillUpdate 这个生命周期函数

yarn add antd 安装antd组件库

yarn add less-loader  antd是基于antd开发的

怎么看react是否原生支持less? 新建一个less文件试试

虽然antd可以直接引入css文件，但是后期需要修改页面的整体主题就无法实现了

所以需要引入less支持，以便后期改变整体主题

yarn eject 暴露配置文件

yarn add less  安装less

loader的解析是从后往前解析

style-loader  行内样式     css-loader  Css文件    postcss-loader 表示浏览器内核前缀的添加

less-loader  less文件

import 'antd/dist/antd.css' 之所以能够使用，是因为已经编译打包成了css文件，实际源文件是less文件

yarn add babel-plugin-import   只会加载对应组件的css样式

上面的配置就相当于把 antd.less 文件引入到项目中了

在别的地方就不需要引入antd.css文件了    style: true 表示直接编译成行内样式插入到代码中去

添加less支持   直接复制 sassRegex 和 sassModuleRegex 的配置，然后修改loader名称即可

注意新版本的less使用会报错  修改 less-load/dist/index.js文件：加上options.javascriptEnabled = true 即可

修改antd的主题颜色

babel-plugin-import 插件

{ "libraryName": "antd"} 只会加载js文件

{"libraryName":"antd", style: "css"}  加载js和css文件  无法改变主题

{"libraryName":"antd" , style: true }   加载js和less文件  可以修改主题

calc 计算属性   可以让高度撑满div

less可以使用变量

@colorL:red;  冒号是必须的

SVG图片  放大和缩小都不会失真