当前位置:   article > 正文

第七章:react-ui_react-ui r

react-ui r

第七章: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. 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
  • 1
  • 2
  • 3
  • 4

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

  1. 下载

npm install antd-mobile --save

  1. 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
  1. 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
  1. 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"></scrip
    t>
<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
  • 15
  • 16
  • 17

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
  • 1
  • 2
  • 3
  1. 修改默认配置:
  • package.json

    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test --env=jsdom"
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
  • config-overrides.js

    const { override, fixBabelImports } = require('customize-cra');
    
    module.exports = override(
        fixBabelImports('import', {
            libraryName: 'antd-mobile',
            style: 'css',
        }),
    );
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
  1. 编码
// 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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/808315
推荐阅读
相关标签
  

闽ICP备14008679号