Ant Design

>

Modern web application frameworks have created communities around themselves, whose members are involved in the development of libraries for these frameworks, among other things. These libraries can be found in a wide range of projects. Web applications are not produced today, for example, in pure React, Angular, or Vue, without the usage of extra technologies, as a rule.

For React, we have a variety of Material Design implementations, many of which are excellent. However, the original version of Material Design is overly focused on mobile devices, and we frequently work with desktop web apps with complicated user interfaces. Ant Design is a better fit for this. Ant-design provides a comprehensive set of over 50 customisable components for building appealing applications.

What is Ant design?

Ant Design is a fantastic design tool. It has its own design principles, style guides, and component library. The library is developed in TypeScript and defines all of the types that are required. It's made for the front-end workflow provided by the NPM + WebPack + dva combination. Alibaba Group is in charge of this initiative. Ant is built on the popular React, Redux, and React-Router stack, which is widely utilised in Alibaba projects.

This explains the strong collaboration between the two projects, as well as the profusion of Chinese in the documentation and issues on Github. For designing and managing enterprise background applications, Ant Design delivers a set of high-quality pre-built user interface elements. AngularJS, React, and Vue.js are used to build the package.

Key Features:

• A user interface for online applications that is enterprise-class.
• Out of the box, a set of high-quality React components.
• The code is written in TypeScript and uses static types that are predictable.
• A comprehensive set of design and development materials.
• Hundreds of languages are supported by internationalisation.
• Every feature of the theme can be customised to your liking.

How to use Ant design?

I'll show you how to utilise Ant Design as a foundation for creating high-quality, useful web apps. We'll look at an example of how to make a to-do list app to demonstrate this. There are so many web development tools accessible these days that it might be overwhelming. What server should you go with? Which user interface will you select? Using the technologies you are most familiar with is generally advised.

Install Ant Design

Ant Design is a full-featured design system that comes with a full set of React components. Because React is a component-based framework, it's simple to use Ant Design's React components as building blocks to quickly construct a prototype.

Install antd to begin utilising the Ant Design React component system.

npm i --save antd

We now have everything we need to build our prototype. Let's leverage our surroundings to make a high-precision todo application prototype.

Let's start by clearing our sheet. Make the following changes to `App.js and App.css:

App.js

import React, { Component } from "react"; 

import "./App.css"; 

class App extends Component { 

  render() { 

    return ; 

  } 

} 

export default App;

App.cs

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

.App { 

  text-align: center; 

}

We may now start our development server after making these changes. We were able to swiftly construct a high-quality web app using React and Ant Design. These tools will assist you in quickly creating something functional and attractive to the eye. When you need to demonstrate the functionality of an application to someone without spending too much time constructing it, this can be very handy.

How to use Ant design components?

Ant-design provides a comprehensive set of over 50 customisable components for building appealing applications. The library's unique feature is that all of its components are based on the design language created by the library's designers.

Its set of components has over 6K weekly NPM downloads and has gotten 53K ratings on GitHub (this version may be out of date, so download directly from GitHub if possible). Using a professional UI component library allows you to design a project quickly while also making it easy to maintain later on, which is very useful in agile development projects.

Designers can obtain design files and use templates directly when creating design drawings, allowing them to make drawings rapidly and ensure front-end restoration. As a result, selecting a high-quality component library is critical.

Features

Ant Design is more than just a front-end UI framework; it also has a unique design value persistence. The explanations on the official page are very scholarly and difficult to follow. For your convenience, I've summarised my comprehension after reading it:

Naturally : The Internet goods we interact with on a daily basis are becoming increasingly sophisticated, and our awareness and attention spans are restricted.

Help people grasp the product through natural design, as if it were a natural skill;

Certainty : Consistency and certainty are two terms that can be used interchangeably. The enterprise designer should address the consistency of the final product presentation, limit everyone's subjective interference, and provide users with an easy-to-learn, predictable, and consistent experience.

Meaning : In addition to adhering to the design criteria, we must think about incorporating meaningful interactions into the product design. The purpose of an interaction, for example, is to solve a problem, therefore the goal and feedback must be obvious; the meaning of the interaction process is a sense of success and immersion, and these issues should be considered while creating the product;

Growth : Product functions and user needs are inseparable, and the two influence each other and develop together.

Ant Design is a component library that works on both desktop and mobile platforms. Most of the product interaction interfaces are covered by the components. It may be employed right away and can assist businesses in producing high-quality products in a short amount of time.