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

随机推荐

streamreader 和 streamwriter 以及 string 与 memorystream 使用示例
经常用到,但老记不住,备忘一下 using (var ms = new MemoryStream()) { var sw = new StreamWriter(ms); sw.WriteLine(&q ...
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 ...
C# - 匿名对象属性的赋值与取值
在new出匿名对象的函数内可以直接调用该匿名对象的属性取值. 可是在其它函数就无法调用匿名对象的属性或方法. 这时,我们可以通过c#的反射机制取值: 文章出处:https://www.cnblogs. ...
VCenter6.0.0的安装过程
背景和实验环境介绍操作系统环境:windows 2008R2 中文企业版前期环境配置配置IP信息,把DNS改成自己的IP 修改主机名和后缀安装和配置DNS服务 Vcenter 添加dns角色 ...
学习Python3 天眼查爬虫
刚开始学习Python,不愿意看基础,记忆不好,那些语法记不住,直接上个项目,这样比较深刻刚好公司有个情况要查企业的信息,就想做个爬虫吧,有验证码的不愿意搞,那是个老大难问题,就选择了天眼查过程都 ...
orchestrator HTTP接口forget-cluster误下线集群问题
orchestrator 提供了"forget-cluster"HTTP接口用于下线集群.该接口可以根据提供的参数,推测可能的集群名cluster name,然后使用cluster ...
JavaBean找到项目下的文件这里是\WEB-INF\classes\下面的属性文件
String baseinfo="/com/Bean/DBhelp.properties"; filename=getClass().getClassLoader().getRes ...
通俗易懂理解Linux文件权限修改chmod命令
chmod g+w filename 给同组用户增加filename文件的写权限 chmod go+rw filename 给同组和组外用户增加写和读的权限 chmod g-w filename 给同 ...
常用内置函数_eval_exce
内置函数 abs 绝对值函数 res = abs(-19) print(res) round 四舍五入(n.5时, 奇数进偶数不进) sum 计算序列的和(元素是数字类型) listvar = (1, ...
winform里面的Form1.Designer.cs
Program.cs是程序入口,也就是Main函数.Form1.cs是实现功能的代码,包括你的自定义方法和事件.Form1.Designer.cs是你的画面的设计代码,一般由系统自动生成,也可以手动修 ...

36_react_ui_antd

36_react_ui_antd的更多相关文章

随机推荐

热门专题