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. Fish 下报错 Unsupported use of '||'. In fish, please use 'COMMAND; or COMMAND'.

    在用fish激活virualenv虚拟环境时,使用命令: source ./venv/bin/activate 报错 ./venv/bin/activate (line 23): Unsupporte ...

  2. Matlab高级绘图

    http://blog.csdn.net/haizimin/article/details/50372630 图形是呈现数据的一种直观方式,在用Matlab进行数据处理和计算后,我们一般都会以图形的形 ...

  3. IntelliJ IDEA自动导入包去除星号（import xxx.*）

    打开设置>Editor>Code Style>Java>Scheme Default>Imports ① 将Class count to use import with ...

  4. VS快捷键大全（总结了一些记忆的口诀）（转载）

    相信.Net开发人员都想能够熟记各种VS快捷键以提高平时开发的效率,但苦于记忆能力太差而快捷键又特别多,特别烦,所以作罢! 下面我将简单介绍一下我记忆VS快捷键的一些方法,希望对大家有所帮助. 1.窗 ...

  5. 廖雪峰Git入门教程

    廖雪峰Git入门教程  2018-05-24 23:05:11     0     0     0 https://www.liaoxuefeng.com/wiki/00137395163059296 ...

  6. 同一台电脑配置多个JBoss

    在jboss中找到对应的文件,修改对应文件端口可解决两个以上jboss的端口冲突问题 不同的jboss修改的端口要区别开来,本例所用jboss版本为JBoss4.2.2.GA 文件端口: 8083,1 ...

  7. Thread.Abort 方法

    [SecurityPermissionAttribute(SecurityAction.Demand, ControlThread = true)] public void Abort() 在调用此方 ...

  8. 本文讲述下windows下使用rsync备份数据

    本文讲述下windows下使用rsync备份数据 需要使用的软件如下: 环境需求: 上海monitor上跑有定时任务计划备份线上数据库,现在需要把上海monitor上的备份数据拉回到179.12数据回 ...

  9. Python语法进阶

    1.变量进阶 2.局部变量.全局变量  3.函数进阶 4.函数进阶

  10. Sql case when 示例

    SELECT       单元编号,年,月,   项目编号='11111',   sum(case  when 项目编号= 'ZB010201' then [当月额] else 0 end ) 医疗收 ...