react-04

# 1. 最流行的開源React UI組件庫

## 1). material-ui(國外)

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

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

## 2). ant-design(國內螞蟻金服)

  官網: https://ant.design/

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

 

# 2. 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的基本開發環境

  1. 下載

  npm install antd@2.7.4 --save

  2. src/App.js

   import React, { Component } from 'react';

   import { Button } from 'antd';

   import './App.css';

  

   class App extends Component {

   render() {

   return (

   <div className="app">

   <Button type="primary">Button</Button>

   </div>

   );

   }

   }

  export default App;

  3. src/App.css

   @import '~antd/dist/antd.css';

  

   .app {

   text-align: center;

   }

 

## 3). 實現按需加載(組件js/組件css)

  1. 使用eject命令將全部內建的配置暴露出來

  npm run eject

  2. 下載babel-plugin-import(用於按需加載組件代碼和樣式的 babel 插件)

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

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

   // Process JS with Babel.

   {

   test: /\.(js|jsx)$/,

   include: paths.appSrc,

   loader: 'babel',

   options: {

+ plugins: [

+ ['import', { libraryName: 'antd', style: 'css' }],

+ ],

// This is a feature of `babel-loader` for webpack (not Babel itself).

// It enables caching results in ./node_modules/.cache/babel-loader/

// directory for faster rebuilds.

cacheDirectory: true

}

     },

  4. 去除引入全量樣式的語句: src/App.css

   @import '~antd/dist/antd.css'