Ant Design of React

Antd is a React UI component library based on Ant Design system, which is mainly used to develop enterprise-level middle and back-end products.

Antd – with-TS – Demo

Ant Design

According to the author’s experience, the product Design concept, application mode, underlying technology and peripheral tools under Ant Design system are highly consistent. More tools are not better, but one that is easy to use is ok. There are thousands of UI frameworks, and you cannot learn them all. Ant Design can definitely reduce your learning costs.

design
- Design values
- Global style
- Design patterns
Component library
- Ant Design of React: The React UI component library is based on Ant Design. It is mainly used to develop enterprise middle and back end products.
- Ant Design Mobile of React: antd-mobileThe React implementation of Ant Design’s mobile specification serves Ant and wom wireless services.
- Ant Design Mobile RN of React: @ant-design/react-native 是 Ant DesignReact implementation of mobile specification, serving ant and word of mouth wireless business.
- Ant Design of Angular: This is the Angular implementation of Ant Design, which develops and serves enterprise backend products.
- Ant Design Mobile of Angular: This is the Angular implementation of the Ant Design Mobile specification for Alibaba Group data wireless services.
- Ant Design of Vue: Here is the Vue implementation of Ant Design, developing and serving enterprise-level backend products.
Icons: A set of high-quality Icons
AntV: AntV is a new generation of data visualization solutions of Ant Financial, committed to providing a set of simple, professional and reliable data visualization best practices with infinite possibilities.
Ant Design Pro: Out-of-the-box mid-platform front-end/design solution
- Dva: A lightweight data streaming solution based on Redux, derived from ELM, supporting Side Effects, hot replacement, dynamic loading, React-native, SSR, etc., has been widely used in production environments.
- Umi: a pluggable enterprise React application framework. Umi is route-based, supports next-js contract routing, and various advanced routing functions, which are extended to support route-level load on demand. Then with a perfect plug-in system, covering from source to build products of each life cycle, support a variety of functional expansion and business needs, while providing Umi UI through visual aided programming (VAP) to improve the development experience and research and development efficiency.

As can be seen from the above system, Ant Design of React is the core product of the entire Ant Design system. If you want to learn Ant Design Pro, you should first be familiar with Ant Design of React.

Popular trend

NPM downloads

If you compare ANTD with the older vue.js UI frameworks like Element-UI and iView, you’re way ahead.

If you compare ant-design-Vue with older Vue UI frameworks like Element-UI and iView, it is also very competitive:

GitHub Star

features

🌈 abstracting from enterprise-level backend products interactive language and visual style.
📦 High-quality React components out of the box.
🛡, developed in TypeScript, provides a complete type definition file.
⚙️ Full link development and design tool system.
🌍 dozens of international languages supported.
🎨 in-depth theme customization capabilities for every detail.

Supporting environment

Modern browsers and IE11 and above (polyfills required).
Support for server-side rendering.
- Next. Js: Next. Js is a lightweight React server rendering application framework.
Electron: Build cross-platform desktop applications using JavaScript, HTML, and CSS
- Electron – React – Boilerplate: The foundation for scalable cross-platform applications

The installation

$ yarn add antd
Copy the code

According to the need to load

Antd series OF UI component libraries need to introduce babel-plugin-import library to achieve lazy loading

// .babelrc or babel-loader option
{
  "plugins": [["import", {
      "libraryName": "antd"."libraryDirectory": "es"."style": "css" // 'style: true' will load less files}}]]Copy the code

You can then simply import modules from ANTD, without importing styles separately. Equivalent to the following manual introduction.

// babel-plugin-import will help you load JS and CSS
import { DatePicker } from 'antd'
Copy the code

Quick learning

Before getting started, it is recommended to learn React and ES2015 and have Node.js V8 installed and configured properly. The official guide assumes that you have an intermediate knowledge of HTML, CSS, and JavaScript, and that you have a complete understanding of the correct way to develop the React whole family. If you’re just learning about the front end or React, it’s probably not the best idea to start with a UI framework.

1. Create a Codesanbox

Visit the u.a nt. The design/codesandbox… Create an online example of codesandBox and don’t forget to save it to create a new instance.

2. Use components

Replace the contents of index.js directly with the following code, using the ANTD component directly in React mode.

import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider, DatePicker, message } from 'antd';
// Since the antD component's default text is In English, it needs to be changed to Chinese
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('The date you have chosen is:${date ? date.format('YYYY-MM-DD') : 'Not selected'}`);
    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}} >Current date: {date? Date. format('YYYY-MM-DD') : 'unselected '}</div>
        </div>
      </ConfigProvider>
    );
  }
}

ReactDOM.render(<App />.document.getElementById('root'));
Copy the code

3. Explore more component usage

You can view a list of components, such as the Alert component, in the menu on the left. The component documentation provides various demonstrations, and the component API documentation is at the bottom. Find the first example in the code demo section and click on the icon in the lower right corner to expand the code.

Then modify index.js in the previous codesandbox as the demo code is written, first introducing the Alert component in import:

- import { ConfigProvider, DatePicker, message } from 'antd';
+ import { ConfigProvider, DatePicker, message, Alert } from 'antd';
Copy the code

Then add the corresponding JSX code to Render:

  <DatePicker onChange={value => this.handleChange(value)} />
  <div style={{ marginTop: 20 }}>
- Current date: {date? Date. format('YYYY-MM-DD') : 'unselected '}
+ 
      
  </div>
Copy the code

Ok, now that you know how to use the basic ANTD component, you can continue to explore the use of other components in this example. It is also recommended to create a reproducible CodesandBox to report bugs if you encounter component bugs.

4. The next step#

In actual project development, you will need to build, debug, broker, package and deploy a series of engineering requirements. You can read the documentation below or use the following scaffolding and examples:

Ant Design Pro
antd-admin
d2-admin
For more scaffolding, check out the Scaffolding market

Replace Momentjs with Day.js to optimize package size

You can use the antD-dayjs-webpack-plugin to replace Momentjs with day.js to dramatically reduce the size of the pack. This requires updating the webpack configuration file as follows:

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

module.exports = {
  // ...
  plugins: [new AntdDayjsWebpackPlugin()],
};
Copy the code

Used in TypeScript

Create a TypeScript project step by step using create-react-app and introduce ANTD.

Install and initialize

Create a CRA-template-typescript project:

$ npx create-react-app my-app --template typescript
Copy the code

Then we go into the project and launch.

$ cd antd-demo-ts
$ yarn start
Copy the code

The browser will go to http://localhost:3000/ and see the Welcome to React screen.

The introduction of antd

$ yarn add antd
Copy the code

Customize create-react-app configuration

We need to customize the default configuration of create-react-app. Here we use react-app-rewired (a community solution for customizing-create-React-app).

Introduce react-app-rewired and modify the startup configuration in package.json. Thanks to the new [email protected] version, you’ll also need to install customize-cra.

$ yarn add react-app-rewired customize-cra -D
Copy the code

/* 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",
}
Copy the code

Create a config-overrides. Js file in the project root directory to modify the default configuration:

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};
Copy the code

Use the Babel – plugin – import

Babel-plugin-import is a Babel plug-in for loading component code and styles on demand. Now let’s try to install it and modify the config-overrides. Js file.

$ yarn add babel-plugin-import -D
Copy the code

Replace the contents of config-overrides. Js file with:

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd'.libraryDirectory: 'es'.style: 'css'.// 'style: true' will load less files}));Copy the code

Using 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;
Copy the code

Run YARN Start to access the page, antD component js and CSS code will be loaded on demand, you will not see such a warning message on the console. You can read here about the principles and other ways of loading on demand.

Custom themes

According to the requirements of configuring the topic, the less variable override function is required to customize the topic. We can introduce addLessLoader, the less related function provided in customize-cra, to help load less styles, and modify the config-overrides. Js file as follows.

$ yarn add less less-loader -D
Copy the code

- 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' },
+}).
);
Copy the code

ModifyVars of less-Loader is used for theme configuration. For variables and other configuration methods refer to the Configuration Theme documentation.

After the modification, restart YARN Start. If a green button is displayed, the configuration is successful.

Replace Momentjs with Day.js to optimize package size

+ 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()),
);

Copy the code

decorators

$ yarn add -D @babel/plugin-proposal-decorators
Copy the code

const { addDecoratorsLegacy } = require('customize-cra');
module.exports = override( ... addDecoratorsLegacy(), ... ) ;Copy the code

Configure the Babel plug-in

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

Allows configuration of Babel using the.babelrc.js file.

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

module.exports = override(
  ...
  // Allow Babel configuration using the.babelrc.js file.useBabelRc() ... ) ;Copy the code

$ yarn add @babel/preset-env -D
Copy the code

// .babelrc.js
module.exports = {
  presets: [["@babel/preset-env"./ / compatible with ie 9
      {
        targets: {
          ie: "9"}}]],plugins: ["@babel/plugin-proposal-decorators"] // Can be used to replace addDecoratorsLegacy
}
Copy the code

Ant Design

Popular trend

NPM downloads

GitHub Star

features

Supporting environment

The installation

According to the need to load

Quick learning

1. Create a Codesanbox

2. Use components

3. Explore more component usage

4. The next step#

Replace Momentjs with Day.js to optimize package size

Used in TypeScript

Install and initialize

The introduction of antd

Customize create-react-app configuration

Use the Babel – plugin – import

Using antd

Custom themes

Replace Momentjs with Day.js to optimize package size

decorators

Configure the Babel plug-in

Allows configuration of Babel using the.babelrc.js file.

Related Posts

[Luffy]_239. Maximum sliding window value

Analyzing promises from a design pattern perspective: It’s not hard to tear promises by hand

Interviewer: What are the metrics of performance optimization? What should I pay attention to?