Ant Design Introduction

Ant Design is a React UI library that contains easy-to-use components that are useful for building interactive user interfaces. It is very easy to use as well as integrate. Ant Design is one of the smart options to design web applications using react. It provides us with high-quality components which can be used with ease.

Features of Ant Design:

It is written in TypeScript with static types.
It has a complete package of development tools that are useful for building interactive user interfaces.
It has Internationalization support for a number of languages.
It contains high-quality React components.

Installing Ant Design: We can install it using npm. Make sure you have installed Node.js and npm.

Using npm:

npm install antd

Using yarn:

yarn install antd

Let’s understand the working of Ant design using an example.

Example: In this example, we will use the Form component of Ant Design.

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install antd

Project Structure: It will look like the following.

Project Structure

Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import "antd/dist/antd.css";
import { Form, Button, Input } from 'antd';
  
export default function App() {
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Ant-Design Form Component</h4>
            <Form
                name="basicform"
                onFinishFailed={() => alert('Failed to submit')}
                onFinish={() => alert('Form Submitted')}
                initialValues={{ remember: true }}
            >
                <Form.Item
                    label="Enter username"
                    name="Username"
                    rules={[{
                        required: true,
                        message: 'Please enter username'
                    }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item>
                    <Button type="success" htmlType="submit">
                        Submit Username
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}