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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

react-ui

    • 最流行的开源 React UI 组件库

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

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

    • 案例展示

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

最流行的开源 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>
		)
	}
}

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'

以上是 【React】知识点归纳：react-ui 的全部内容， 来源链接： utcz.com/z/384456.html

回到顶部