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的更多相关文章

随机推荐

edgedb 基本试用
环境准备使用docker-compose 运行 docker-compose 文件 version: "3" services: db: image: edgedb/edgedb ...
Computer Graphics Principles And Practice (James Foley / Andries Van Dam / Morgan McGuire / David Sklar / James D. Foley 著)
1 Introduction 2 Introduction to 2D Graphics Using WPF 3 An Ancient Renderer Made Modern 4 A 2D Grap ...
HISI VENC 实际输出帧率控制
https://blog.csdn.net/spy_007_/article/details/83688287 平台:HI3516EV100 SDK : Hi3516CV300_SDK_V1.0.2. ...
CRC16 的生成及校验原理
参考:https://blog.csdn.net/niepangu/article/details/45499383 计算CRC的过程,就是用一个特殊的“除法”,来得到余数,这个余数就是CRC. 它不 ...
自己DIY出来一个JSON结构化展示器
说来也巧,这个玩意,一直都想亲手写一个,因为一直用着各种网上提供的工具,觉得这个还是有些用途,毕竟,后面的实现思路和原理不是太复杂,就是对json的遍历,然后给予不同节点类型以不同的展现风格. 我这次 ...
[ZZ] Valse 2017 | 生成对抗网络（GAN）研究年度进展评述
Valse 2017 | 生成对抗网络(GAN)研究年度进展评述 https://www.leiphone.com/news/201704/fcG0rTSZWqgI31eY.html?viewType ...
【Leecode】两数之和
学习使用标准模板库(STL)中的map,hash_map.涉及数据结构知识:哈希表,红黑树. map的使用方法 https://www.cnblogs.com/fnlingnzb-learner/p/ ...
内存问题-JVM调优思路
通常,内存的问题就是 GC 的问题,因为 Java 的内存由 GC 管理.有2种情况,一种是内存溢出了,一种是内存没有溢出,但 GC 不健康. 内存溢出的情况可以通过加上 -XX:+HeapDumpO ...
JavaScript 函数调用和this指针
函数调用和this指针 1. 全局环境的this指针浏览器全局环境下this指向window对象 console.log(this); //Window {postMessage: ƒ, blur: ...
关于springboot2.x 的 RedisCacheManager变化
springboot配置缓存过期时间,大部分是使用ReidsCacheManager来进行自定义的配置以下是大部分网上的代码(这也是基于springboot1.x的版本可以使用的) @Beanpub ...

36_react_ui_antd

36_react_ui_antd的更多相关文章

随机推荐

热门专题