36_react_ui

1：最流行的开源react ui组件库

　　1.1：material-ui(国外)

　　1.2：ant-design(推荐：国内蚂蚁金服)

2.如何使用

　　方式一（页面引入）：

　　　　在<head>标签内加入 <meta name = "viewport" content="width-device-width, initial-scale-1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>

　　　　<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"</script>(解决移动端点击监听300毫秒延迟问题)

　　方式二(推荐)：

　　　　npm install antd-mobile --save

3.强烈推荐按需打包

　　import {Button, Toast} from 'antd-mobile' 的方式打包的话会将所有的antd-mobile打包

　　babel-plugin import(推荐，只加载import需要的模块)

　　如何使用 babel-plugin import：

　　　　1）npm install react-app-rewired@1.4.0 babel-plugin-import@1.6.3 --save-dev

　　　　(因为是编译打包的工具包，而不是运行时的依赖，所以-dev)(不能超过2.0版本，超过2.0版本会报错！！！)

　　　　2）与package.json同级创建 config-overrides.js

const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config, evn) {
    config = injectBabelPluugin(['import', {libraryName: 'antd-mobile', style: 'css'}], cinfig);
    return config;
};

　　　　3）将原来的package.json中的scripts内容全部替换掉，放入下面的scripts

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

4.代码如下：

index.js

import React from 'react'
import {render} from 'react-dom'

import App from './components/app'
// import 'antd-mobile/dist/antd-mobile.css'/*将antd所有样式引入*/

render(<App/>, document.getElementById('root'));

app.jsx

import React, {Component} from 'react'
import {Button, Toast} from 'antd-mobile'

export default class App extends Component {
    handleClick = () => {
        Toast.info('提交成功');
    }

    render() {
        return (
            <div>
                <Button type='primary' onClick={this.handleClick}>提交</Button>
            </div>
        )
    }
}

package.json

{
  "name": "react_blank",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd-mobile": "^2.2.11",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.6.3",
    "react-app-rewired": "^1.4.0",
    "react-scripts": "^1.1.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  }
}

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;
};

36_react_ui_antd的更多相关文章

随机推荐

2019CVTE技术支持软件编程2
题目:有8位数密码,加密规则如下:第一步取最后一位数:第二部将倒数第二位数放到最前形成一个新数,再取新数最后一位,以此循环取完所有数为止:如98698426,密码为64982689,时间复杂度为O(N ...
JAVA基础搬运工
1Java线程的6种状态及切换 https://blog.csdn.net/pange1991/article/details/53860651/ 2进程和线程的区别 https://www.cnbl ...
layui基本使用
https://www.layui.com/doc/ 在线实例https://www.layui.com/demo/ 使用自己实际操作 <script> layui.use(['laye ...
左耳听风-ARTS-第3周（2019/4/7-2019/4/13）
Algorithm 本周的算法题是按顺序合并两个已排序的链表(https://leetcode.com/problems/merge-two-sorted-lists/).和归并排序的合并已排序数组的 ...
Java 序列化返序列化
原文: http://www.cnblogs.com/xdp-gacl/p/3777987.html 一.序列化和反序列化的概念把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象 ...
CUDA 编程
作者:MingChaoSun 原文:https://blog.csdn.net/sunmc1204953974/article/details/51000970 一.CPU和GPU 上图是CPU与GP ...
adb 常用命令-转载
转自:https://blog.csdn.net/suxing_ing/article/details/54907860 显示当前运行的全部模拟器:adb devices 获取序列号:adb get- ...
@Transactional的正确打开方式
经常用到事务管理,可还是不小心会写错,导致事务没有生效,这里总结下. 正确的代码例子如下所示,框架是使用spring+mybatis的,有些配置的就不贴出来了. TestController2: pa ...
利用MYSQL的函数实现用户登录功能，进出都是JSON(第二版)
利用MYSQL的函数实现用户登录功能,进出都是JSON(第二版) CREATE DEFINER=`root`@`%` FUNCTION `uc_session_login`( `reqjson` JS ...
Ollydbg中的内存断点和硬件断点的区别
转载自: https://www.zhihu.com/question/52625624 旅人的回复作者:旅人链接:https://www.zhihu.com/question/52625624/a ...

36_react_ui_antd

36_react_ui_antd的更多相关文章

随机推荐

热门专题