React学习笔记（二）

1、常用组件

• axios(http请求模块，可用于前端任何场景，很强大)
• echarts-for-react(可视化图表，别人基于react对echarts的封装，足够用了)
• recharts(另一个基于react封装的图表)
• nprogress(顶部加载条，蛮好用)
• react-draft-wysiwyg(别人基于react的富文本封装，如果找到其他更好的可以替换)
• react-draggable(拖拽模块，找了个简单版的)
• screenfull(全屏插件)
• photoswipe(图片弹层查看插件，不依赖jQuery，还是蛮好用)
• animate.css(css动画库)
• redux Web 应用是一个状态机，视图与状态是一一对应的.所有的状态，保存在一个对象里面
• redux-logger 日志
• Reselect 记忆组件
• redux-thunk 为了解决异步action的问题
• redux-saga 为了解决异步action的问题
• react-router-redux 保持路由与应用状态(state)同步
• react-router-dom

2、react-devtools 调试工具

工具地址：github.com/facebook/re…

全局安装：

yarn global add react-devtools复制代码

配置：在package.json中配置上去：

"scripts": {
"devtools": "react-devtools"
}

然后就可以启动了：yarn run devtools

3.基于react的ui组件ant design的配置使用

使用教程

• 安装antd-mobile
  • npm install --save antd-mobile
• public文件下index.html页面引入以下

    //解决移动端适配问题
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    //解决移动端点击300ms延迟问题
    <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
    <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } if(!window.Promise) { document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>'); } </script>
  

• 实现组件的按需打包
  • 1、下载依赖
    • npm install --save-dev babel-plugin-import react-app-rewired
  • 2、定义加载配置的js模块 根目录下创建 config-overrides.js

    //复制一下代码至文件中
    const { injectBabelPlugin } = require('react-app-rewired');
    module.exports = function override(config, env) {
        config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
        return config;
    };
    

  • 3、修改package.json文件

    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test --env=jsdom",
    }