【React】知识点归纳：react-ui

react-ui

最流行的开源 React UI 组件库

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

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

案例展示

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

最流行的开源 React UI 组件库

material-ui(国外)

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

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

ant-design(国内蚂蚁金服)

PC 官网: https://ant.design/index-cn

移动官网: https://mobile.ant.design/index-cn

Github: https://github.com/ant-design/ant-design/

Github: https://github.com/ant-design/ant-design-mobile/

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

按顺序在Terminal里输入一下命令

npm install create-react-app -g

create-react-app antm-demo

cd antm-demo

npm start

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

1.下载

npm install antd-mobile --save

案例展示

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

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'))

index.html

<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>
<script>
	if ('addEventListener' in document) {
		document.addEventListener('DOMContentLoaded', function() {
			FastClick.attach(document.body);
		}, false);
	}
	if(!window.Promise) {
		document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"
		'+'>'+'<'+'/'+'script>');
	}
</script>

运行效果：两秒后提示消失

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

下载依赖包

yarn add react-app-rewired --dev
yarn add babel-plugin-import --dev

修改默认配置:

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;

};

编码

// 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'