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.
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> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
