初探 Ant Design of React

時間 2020-03-05

原文原文鏈接

antd 是基於 Ant Design 設計體系的 React UI 組件庫，主要用於研發企業級中後臺產品。javascript

文章可參考源碼：antd-with-ts-democss

Ant Design 設計體系

以筆者的經驗來看，Ant Design 設計體系下的產品設計理念、使用方式、底層技術、周邊工具都保持着高度一致，工具不是越多越好，有一套好用順手的就行，UI框架千千萬，你不可能都學一遍。Ant Design 無疑可以減小你的學習成本。html

設計前端
- 設計價值觀
- 全局樣式
- 設計模式
組件庫vue
- Ant Design of React: 基於 Ant Design 設計體系的 React UI 組件庫，主要用於研發企業級中後臺產品。
Ant Design Mobile of React: antd-mobile 是 Ant Design 的移動規範的 React 實現，服務於螞蟻及口碑無線業務。java
- Ant Design Mobile RN of React: @ant-design/react-native 是 Ant Design 的移動規範的 React 實現，服務於螞蟻及口碑無線業務。
Ant Design of Angular: 這裏是 Ant Design 的 Angular 實現，開發和服務於企業級後臺產品。node
- Ant Design Mobile of Angular: 這裏是 Ant Design 移動規範的 Angular 實現，服務於阿里巴巴集團數據無線業務。
- Ant Design of Vue: 這裏是 Ant Design 的 Vue 實現，開發和服務於企業級後臺產品。
Icons: 一整套優質的圖標集react
AntV: AntV 是螞蟻金服全新一代數據可視化解決方案，致力於提供一套簡單方便、專業可靠、無限可能的數據可視化最佳實踐。webpack
Ant Design Pro: 開箱即用的中臺前端/設計解決方案git
- dva: 一個基於 Redux 的輕量級數據流方案，概念來自 elm，支持 side effects、熱替換、動態加載、react-native、SSR 等，已在生產環境普遍應用。
- umi : 一個可插拔的企業級 react 應用框架。umi 以路由爲基礎的，支持類 next.js 的約定式路由，以及各類進階的路由功能，並以此進行功能擴展，好比支持路由級的按需加載。而後配以完善的插件體系，覆蓋從源碼到構建產物的每一個生命週期，支持各類功能擴展和業務需求，同時提供 Umi UI 經過可視化輔助編程（VAP）提升開發體驗和研發效率。

從上面的體系中能夠看出，Ant Design of React 能夠說是整個 Ant Design 設計體系的核心產品，想要學習 Ant Design Pro，首先就要先熟悉 Ant Design of React。

流行趨勢

npm 下載量

若是拿 antd 和 element-ui、iview 這些老牌 Vue.js UI 框架對比，遙遙領先啊有沒有：

若是拿 ant-design-vue 來和 element-ui、iview這些老牌 vue UI框架對比，也是頗有競爭力的：

GitHub Star

特性

🌈 提煉自企業級中後臺產品的交互語言和視覺風格。
📦 開箱即用的高質量 React 組件。
🛡 使用 TypeScript 開發，提供完整的類型定義文件。
⚙️ 全鏈路開發和設計工具體系。
🌍 數十個國際化語言支持。
🎨 深刻每一個細節的主題定製能力。

支持環境

現代瀏覽器和 IE11 及以上（須要 polyfills）。
支持服務端渲染。
- Next.js: Next.js 是一個輕量級的 React 服務端渲染應用框架。
Electron：使用 JavaScript，HTML 和 CSS 構建跨平臺的桌面應用程序
- electron-react-boilerplate: 可擴展的跨平臺應用程序的基礎

安裝

$ yarn add antd
複製代碼

按需加載

Antd 系列的 UI 組件庫都須要引入 babel-plugin-import 庫來實現懶加載

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 會加載 less 文件
    }]
  ]
}
複製代碼

而後只需從 antd 引入模塊便可，無需單獨引入樣式。等同於下面手動引入的方式。

// babel-plugin-import 會幫助你加載 JS 和 CSS
import { DatePicker } from 'antd'
複製代碼

快速上手

在開始以前，推薦先學習 React 和 ES2015，並正確安裝和配置了 Node.js v8 或以上。官方指南假設你已瞭解關於 HTML、CSS 和 JavaScript 的中級知識，而且已經徹底掌握了 React 全家桶的正確開發方式。若是你剛開始學習前端或者 React，將 UI 框架做爲你的第一步可能不是最好的主意。

1. 建立一個 codesanbox

訪問 u.ant.design/codesandbox… 建立一個 codesandbox 的在線示例，別忘了保存以建立一個新的實例。

2. 使用組件

直接用下面的代碼替換 index.js 的內容，用 React 的方式直接使用 antd 組件。

import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider, DatePicker, message } from 'antd';
// 因爲 antd 組件的默認文案是英文，因此須要修改成中文
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'antd/dist/antd.css';
import './index.css';

moment.locale('zh-cn');

class App extends React.Component {
  state = {
    date: null,
  };

  handleChange = date => {
    message.info(`您選擇的日期是: ${date ? date.format('YYYY-MM-DD') : '未選擇'}`);
    this.setState({ date });
  };
  render() {
    const { date } = this.state;
    return (
      <ConfigProvider locale={zhCN}>
        <div style={{ width: 400, margin: '100px auto' }}>
          <DatePicker onChange={this.handleChange} />
          <div style={{ marginTop: 20 }}>
            當前日期：{date ? date.format('YYYY-MM-DD') : '未選擇'}
          </div>
        </div>
      </ConfigProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
複製代碼

3. 探索更多組件用法

你能夠在左側菜單查看組件列表，好比 Alert 組件，組件文檔中提供了各種演示，最下方有組件 API 文檔能夠查閱。在代碼演示部分找到第一個例子，點擊右下角的圖標展開代碼。

而後依照演示代碼的寫法，在以前的 codesandbox 裏修改 index.js，首先在 import 內引入 Alert 組件：

- import { ConfigProvider, DatePicker, message } from 'antd';
+ import { ConfigProvider, DatePicker, message, Alert } from 'antd';
複製代碼

而後在 render 內添加相應的 jsx 代碼：

<DatePicker onChange={value => this.handleChange(value)} />
  <div style={{ marginTop: 20 }}>
- 當前日期：{date ? date.format('YYYY-MM-DD') : '未選擇'}
+ <Alert message={`當前日期：${date ? date.format('YYYY-MM-DD') : '未選擇'}`} type="success" />
  </div>
複製代碼

好的，如今你已經會使用基本的 antd 組件了，你能夠在這個例子中繼續探索其餘組件的用法。若是你遇到組件的 bug，也推薦建一個可重現的 codesandbox 來報告 bug。

4. 下一步#

實際項目開發中，你會須要構建、調試、代理、打包部署等一系列工程化的需求。您能夠閱讀後面的文檔或者使用如下腳手架和範例：

Ant Design Pro
antd-admin
d2-admin
更多腳手架能夠查看腳手架市場

使用 Day.js 替換 momentjs 優化打包大小

你可使用 antd-dayjs-webpack-plugin 插件用 Day.js 替換 momentjs 來大幅減少打包大小。這須要更新 webpack 的配置文件以下：

// webpack-config.js
import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';

module.exports = {
  // ...
  plugins: [new AntdDayjsWebpackPlugin()],
};
複製代碼

在 TypeScript 中使用

使用 create-react-app 一步步地建立一個 TypeScript 項目，並引入 antd。

安裝和初始化

建立 cra-template-typescript 項目：

$ npx create-react-app my-app --template typescript
複製代碼

而後咱們進入項目並啓動。

$ cd antd-demo-ts
$ yarn start
複製代碼

此時瀏覽器會訪問 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

引入 antd

$ yarn add antd
複製代碼

自定義 create-react-app 配置

咱們須要對 create-react-app 的默認配置進行自定義，這裏咱們使用 react-app-rewired （一個對 create-react-app 進行自定義配置的社區解決方案）。

引入 react-app-rewired 並修改 package.json 裏的啓動配置。因爲新的 react-app-rewired@2.x 版本的關係，你還須要安裝 customize-cra。

$ yarn add react-app-rewired customize-cra -D
複製代碼

/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
複製代碼

在項目根目錄建立一個 config-overrides.js 用於修改默認配置:

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};
複製代碼

使用 babel-plugin-import

babel-plugin-import 是一個用於按需加載組件代碼和樣式的 babel 插件（原理），如今咱們嘗試安裝它並修改 config-overrides.js 文件。

$ yarn add babel-plugin-import -D
複製代碼

替換 config-overrides.js 文件內容：

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css', // `style: true` 會加載 less 文件
  }),
);
複製代碼

使用 antd

// src/App.tsxe
import React from 'react';
import { Button } from 'antd';
import './App.css';

function App() {
  return (
    <div className="App">
      <Button type="primary">Button</Button>
    </div>
  );
}

export default App;
複製代碼

運行 yarn start 訪問頁面，antd 組件的 js 和 css 代碼都會按需加載，你在控制檯也不會看到這樣的警告信息。關於按需加載的原理和其餘方式能夠閱讀這裏。

自定義主題

按照配置主題的要求，自定義主題須要用到 less 變量覆蓋功能。咱們能夠引入 customize-cra 中提供的 less 相關的函數 addLessLoader 來幫助加載 less 樣式，同時修改 config-overrides.js 文件以下。

$ yarn add less less-loader -D
複製代碼

- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
- style: 'css',
+ style: true,
  }),
+ addLessLoader({
+ javascriptEnabled: true,
+ modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);
複製代碼

這裏利用了 less-loader 的 modifyVars 來進行主題配置，變量和其餘配置方式能夠參考配置主題文檔。

修改後重啓 yarn start，若是看到一個綠色的按鈕就說明配置成功了。

使用 Day.js 替換 momentjs 優化打包大小

+ const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
- const { override, fixBabelImports, addLessLoader } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader, addWebpackPlugin } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  }),
+ addWebpackPlugin(new AntdDayjsWebpackPlugin()),
);

複製代碼

decorators

$ yarn add -D @babel/plugin-proposal-decorators
複製代碼

const { addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
	...
  addDecoratorsLegacy(),
  ...
);
複製代碼

配置 Babel 插件

module.exports = override(
  ...,
  ...addBabelPresets(
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: ["> 1%", "last 2 versions"],
          ie: 9
        },
      }
    ]
  )
  ...
);
複製代碼

容許使用 .babelrc.js 文件進行Babel配置。

// config-overrides.js
const { useBabelRc } = require('customize-cra')

module.exports = override(
  ...
  // 容許使用 .babelrc.js 文件進行Babel配置。
  useBabelRc()
  ...
);

複製代碼

$ yarn add @babel/preset-env -D
複製代碼

// .babelrc.js
module.exports = {
  presets: [
    [
      "@babel/preset-env", //兼容ie9
      {
        targets: {
          ie: "9"
        }
      }
    ]
  ],
  plugins: ["@babel/plugin-proposal-decorators"] // 能夠用來替換 addDecoratorsLegacy
}
複製代碼