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