【React】知识点归纳：react-ui_react ui, react app 区别

最流行的开源 React UI 组件库

• material-ui(国外)

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

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

使用 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>
		)
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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'))
1
2
3
4
5
6

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

• 下载依赖包

yarn add react-app-rewired --dev
yarn add babel-plugin-import --dev
1
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;
  };

• 编码

// 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'
1
2
3
4