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. sqlserver 表操作 SQL篇

    数据库知识点 1.数据库操作: 增:insert into 表名 values(值1,值2,值3) 删:delete 列名 from 表名 where 条件 改:update 表名 set =值 wh ...

  2. 创建一个dynamics 365 CRM online plugin (四) - PreValidation

    开始之前,我们要确认一下 Plugin 的 pipeline. PreValidation -> PreOperation -> Server Side System Main Event ...

  3. chrome添加离线插件

    1.首先用户点击谷歌浏览器右上角的自定义及控制按钮,在下拉框中选择工具选项,然后点击扩展程序来启动Chrome浏览器的扩展管理器页面. 2.在打开的谷歌浏览器的扩展管理器中用户可以看到一些已经安装程序 ...

  4. Java...点点点语法

    https://blog.csdn.net/IT_faquir/article/details/49131173

  5. HTTP Server to Client Communication

    1. Client browser short polling The most simple solution, client use Ajax to sends a request to the ...

  6. 【转】使用Eclipse，将鼠标放在相应方法或字段等元素上时，无法显示提示

    使用Eclipse编写java代码时,将鼠标放在相应方法或字段等元素上时,会有对应的说明或提示. 不过,常出现下面的问题: Note:An exception occurred while getti ...

  7. HDFS简述

    管理网络中跨多台计算机存储的文件系统称为分布式文件系统,Hadoop自带HDFS(Hadoop Distributed Filesystem)分布式文件系统. 一.HDFS设计 HDFS以流式数据访问 ...

  8. note 6 函数

    函数 完成特定功能的一个语句组,这组语句可以作为一个单位使用,并且给它取一个名字 通过函数名执行 数学 function(x) = x^2 - 2x + 1 abs(x) #求x的绝对值 定义函数 定 ...

  9. winform里面的Form1.Designer.cs

    Program.cs是程序入口,也就是Main函数.Form1.cs是实现功能的代码,包括你的自定义方法和事件.Form1.Designer.cs是你的画面的设计代码,一般由系统自动生成,也可以手动修 ...

  10. Windows 10（UWP）开发技巧 - PageUserControl

    [本系列需要具有一定开发基础] 我们在开发中经常遇到这样的场景: 1.呈现详细信息,且包含一些操作.如:查看原图,支持放大,缩小,多图. 2.执行特定的行为,且要有回执结果.如:选择联系人,选中某图, ...