第七章：react-ui

7.1. 最流行的开源 React UI 组件库

7.1.1. material-ui( 国外)

1. 官网: http://www.material-ui.com/#/

2. github: https://github.com/callemall/material-ui

7.1.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. react工作流ui，Github: https://github.com/ant-design/ant-design-mobile/

7.2. ant-design-mobile 使用入门

7.2.1. 效果

7.2.2. 使用 create-react-app 创建 react 应用

npm install create-react-app -g
create-react-app antm-demo
cd antm-demo
npm start

7.2.3. 搭建 antd-mobile 的基本开发环境

1. 下载

npm install antd-mobile --save

2. src/App.jsx

import React, {Component} from 'react'
// 分别引入需要使用的组件
import Button from 'antd-mobile/lib/button'
import Toast from 'antd-mobile/lib/toast'
export default class App extends Component {handleClick = () => {Toast.info(' 提交成功', 2)}render() {return (<div><Button type="primary" onClick={this.handleClick}>提交</Button></div>)}
}

3. src/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(<App />, document.getElementById('root'))

4. index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
<scriptsrc="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}if(!window.Promise) {document.writeln('<scriptsrc="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');}
</script>

7.2.4. 实现按需打包( 组件 js/css)

1. 下载依赖包

yarn add react-app-rewired --dev
yarn add babel-plugin-import --dev
npm install react-app-rewired customize-cra --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 { override, fixBabelImports } = require('customize-cra');module.exports = override(fixBabelImports('import', {libraryName: 'antd-mobile',style: 'css',}),
  );
  

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'