Ant Design: The World’s 2nd Most Popular React UI Library

Image via Fiverr.com

What is Ant Design?

The Ant Design is a React, UI Library which was created by Chinese conglomerate Alibaba. It has easy-to-use components that are useful for building elegant user interfaces and can also be customized easily. It is built with i18n and has been localized for dozens of languages.

Ant design is not just a React UI library it is much more than that. It’s a collection of interconnected libraries with a serious ecosystem surrounding them and the UI components of this library are mini-projects in themselves — see this repo for more information.

Getting started with Ant Design

Let’s get our hands dirty in the world of Ant Design. To learn how things work with the help of Ant Design in developing the enterprise application we need to start from the basics.

To start with it let's first create our react application using the following command.

npx create-react-app my-app
cd my-app

Then set up the antd with the help of the following code:

npm i antd

After antd is successfully installed in your react application you can see it in your dependencies.

Now as we know there are several components which can be easily used with the help of antd. So let’s try to understand some of those components and see how they work. Let’s try to add a Data picker to our application. To do so add the following code to your src/App.js:

import { DatePicker } from 'antd';
import 'antd/dist/antd.css'; 
function App() 
{  
 return 
 (
  <DatePicker/>
 );
} 
export default App;

In the above code, we have imported the Data Picker component from Ant Design Library and its CSS also. After we have added this code when we run our application we will see the Date picker.

Image via author

We can also change its theme to dark if we prefer a dark theme over normal and to do so just add this CSS and remove the previous CSS from the code.

import 'antd/dist/antd.dark.css';

After we have successfully added the CSS we will our data picker with the dark theme.

Image via Author

See how effortlessly we have added the Data Picker to our application and how clean our code was.

Just like Data Picker, there are many other components such as Icons, Buttons, Typography, Modal, Table, Tree, and many more which we will discuss briefly in some other blog.

Conclusion

Since Ant Design is an open-source code and is free to use so it has a lot to offer us it’s just in our hands how we can make use of it. It also makes our code much cleaner and finer so my advice is to use it in your react application and you will feel the difference.

If you have any doubt(s) regarding this, you can leave a comment or contact me on LinkedIn.