react UI库 ：antd、material-ui

最流行的开源React UI组件库

material-ui(国外)
   官网: http://www.material-ui.com/
   github: https://github.com/callemall/material-ui
ant-design(国内蚂蚁金服)
   官网: https://ant.design/
   github: https://github.com/ant-design/ant-design/

ant-design使用入门

1、使用create-react-app搭建react开发环境

npm install create-react-app -g

create-react-app antd-demo

cd antd-demo

npm start

2、搭建antd的基本开发环境

npm install antd --save

3.编写代码

import React from 'react';
import { Button } from 'antd';
import 'antd/dist/antd.css';

class App extends React.Component{
    render(){
        return(
            <div>
                <Button type="primary">Primary</Button>
                <Button>Default</Button>
                <Button type="dashed">Dashed</Button>
                <Button type="danger">Danger</Button>
                <Button type="link">Link</Button>
            </div>
        )
    }
}

export default App;

import 'antd/dist/antd.css'是引入antd的所有样式，显然不好不能按需加载。

按需加载

1.使用 eject 命令将所有内建的配置暴露出来

npm run eject

使用命令前项目的目录：

使用命令后项目的目录（暴露出了配置文件）：

2、下载babel-plugin-import(用于按需加载组件代码和样式的 babel 插件)

npm install babel-plugin-import --save-dev

3、修改配置: config/webpack.config.dev.js

 plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent:
                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                        },
                      },
                    },
                  ],
                   +  ["import", {
                   +  "libraryName": "antd",
                   +  "libraryDirectory": "es",
                   +  "style": "css" // `style: true` 会加载 less 文件
                   + }]
                ],

 

 

4、然后只需从 antd 引入模块即可，无需单独引入样式。

import {Button} from 'antd';