项目特色
前言的技术栈 健全的架构 丰富的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图片 放大和缩小都不会失真
原文:https://www.cnblogs.com/escapist/p/10692903.html