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

随机推荐

  1. 汇编实验2（又是作业emm）

    实验任务:学会使用debug 1.使用Debug,将程序段写入内存: 首先对0021:0000~0021:000F的内存赋值 这里我赋的值是 11 12 13 14 15 16 17 18 输入mov ...

  2. visual studio 2017 中默认无法开发 Android 8.0 及以上系统的解决方案

    一般默认比较旧有两个原因,系统版本过旧,Visual Studio 版本过旧. 第一步,将windows 更新到最新版,必须是windows 10 并且更新到最新. 第二步,将visual studi ...

  3. MySQL Error--Got error 28 from storage engine

    问题描述执行查询或SHOW命令,返回错误信息:Got error 28 from storage engine 问题原因临时文件所在磁盘空间已满 解决办法1.使用df -lh查看磁盘空间使用情况;2. ...

  4. sql，求和小于一定值的数据行

    select count(id),sum(Price) from [T_AddPrice] as a --order by id

  5. 2019.1.17 homework

    1.求两个整型数较大值 #include<stdio.h>int compare_big(int var1,int var2);int main(void){    int big,x,y ...

  6. 【转载】 Java中String类型的两种创建方式

    本文转载自 https://www.cnblogs.com/fguozhu/articles/2661055.html Java中String是一个特殊的包装类数据有两种创建形式: String s ...

  7. ubuntu设置 SSH 通过密钥对登录

    1. 制作密钥对 首先在服务器上制作密钥对.登录到打算使用密钥登录的账户,然后执行以下命令: [root@host ~]$ ssh-keygen <== 建立密钥对 Generating pub ...

  8. Python3.4 枚举类型的使用

    From: https://majing.io/posts/10000005131196 枚举类型是在Python3.4新增到Python的标准库. 创建枚举 Python提供了两种方法来创建枚举: ...

  9. bzoj5110: [CodePlus2017]Yazid 的新生舞会

    Description Yazid有一个长度为n的序列A,下标从1至n.显然地,这个序列共有n(n+1)/2个子区间.对于任意一个子区间[l,r] ,如果该子区间内的众数在该子区间的出现次数严格大于( ...

  10. 傻瓜学编程之block_2

    block的实质 以一个简单的实现为列子: - (void)myBlcokTest{ void (^blk)()=^{ printf(@“beijinghuanyingni”); }; blk(); ...