十三、React UI组件库

一、最流行的开源React UI组件库

1、 material-ui(国外)

1.          官网: http://www.material-ui.com/#/
2.          github: https://github.com/callemall/material-ui

2、ant-design(国内蚂蚁金服)

1.          PC官网: https://ant.design/index-cn
2. 移动官网: https://mobile.ant.design/index-cn
3.          Github: https://github.com/ant-design/ant-design/
4. Github: https://github.com/ant-design/ant-design-mobile/

 

二、基本使用

1、安装

npm install antd-mobile --save

2、解决移动端点击300毫秒的延迟

入口页面 index.html添加

3、移动端适配

入口页面 index.html添加

4、

index.js

import React from 'react';
import ReactDOM from 'react-dom'
import App from "./App"
// 引入整体css
// import 'antd-mobile/dist/antd-mobile.css'


ReactDOM.render(, document.getElementById('root'))

App.jsx

import React, {Component} from 'react'
// 分别引入需要使用的组件
// import Button from 'antd-mobile/lib/button'
// import Toast from 'antd-mobile/lib/toast'
import {Button, Toast} from 'antd-mobile'
export default class App extends Component {
  handleClick = () => {

    Toast.info('提交成功', 2)
  }

  render() {
    return (
      

        提交
      
    )
  }
}

 

https://mobile.ant.design/docs/react/introduce-cn

 

三、实现按需打包(组件js/css)

1、下载依赖包

yarn add react-app-rewired --dev

yarn add babel-plugin-import --dev

或

npm  react-app-rewired --save-dev

npm  babel-plugin-import --save-dev

2、修改默认配置: 

package.json

"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;
};

3、编码

// import 'antd-mobile/dist/antd-mobile.css'

// import Button from 'antd-mobile/lib/button'
// import Toast from 'antd-mobile/lib/toast'
import {Button, Toast} from 'antd-mobile'

https://mobile.ant.design/docs/react/use-with-create-react-app-cn