Fork me on GitHub

React全家桶

React全家桶+Antd共享单车后台管理系统

react基础知识

Vue生态:Vue+Vue-Router+Vuex+Axios+Babel+Webpack
React生态:React+React-Router+Redux+Axios+Babel+Webpack

编程式实现:需要以具体代码表达在哪里做什么,如何实现
声明式实现:只需声明在哪里做什么,无需关心如何实现

https://react.docschina.org/
https://reactjs.org.cn/
http://facebook.github.io/react/

yarn: https://yarnpkg.com/zh-Hans/

  • yarn init
  • yarn add
  • yarn remove
  • yarn install

react生命周期

react-router /react-router-dom

按需加载:
Antd中less样式
yarn eject:暴露webpack配置,

less-loader安装
webpack.config.xxx.js

修改完之后,重启项目

https://ant.design/docs/react/use-with-create-react-app-cn

babel-plugin-import

css3 calc属性
height:calc(100vh)

jsonp:https://www.npmjs.com/package/jsonp

浏览器添加debugger

伪类方式

项目中前端路由用的是 React-Router V4。

官方文档:https://reacttraining.com/react-router/web/guides/quick-start

中文文档:http://reacttraining.cn/

React-Router 4.0
React-Router:基础包
React-Router-DOM:浏览器端实现

https://segmentfault.com/a/1190000011399153

箭头函数不加{}表示直接返回结果
this.props.match.params.XXX
处理404则不设置path,只设置component即可
路由外面添加Switch

详情页面、登录页面、主页面是同层级页面,还有其他自页面嵌套路由

App.js设置为{this.props.children}代表可以接受任何组件,APP组件作为HashRouter的根组件

子路由、子组件模式

传参数需要箭头函数

Modal.confirm() 等价于 Modal[‘confirm’]

{}里面必须是一个根对象

https://blog.csdn.net/little_blue_ljy/article/details/80281803
https://www.cnblogs.com/guolintao/p/9019504.html
https://www.cnblogs.com/xuyuntao/articles/6391728.html
https://github.com/fomenyesu/egg-restapi-module-tool/blob/master/README.cn.md

ES6模版语法:

本文标题:React全家桶

文章作者:行锋

发布时间:2018年10月15日 - 08:10

最后更新:2019年02月14日 - 17:02

原始链接:https://chetaofeng.github.io/2018/10/15/react-rn-2018-10-15-React全家桶/

许可协议: 署名-非商业性使用 转载请保留原文链接及作者

-------------本文结束感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!