Что такое Ant Design?

Ant Design - это библиотека пользовательского интерфейса React, созданная китайским конгломератом Alibaba. Он содержит простые в использовании компоненты, которые полезны для создания элегантных пользовательских интерфейсов, а также могут быть легко настроены. Он построен на i18n и локализован на десятки языков.

Дизайн Ant - это не просто библиотека React UI, это гораздо больше. Это набор взаимосвязанных библиотек с окружающей их серьезной экосистемой, а компоненты пользовательского интерфейса этой библиотеки сами по себе являются мини-проектами - см. Это репо для получения дополнительной информации.

Начало работы с Ant Design

Давайте поработаем руками в мире Ant Design. Чтобы узнать, как все работает с помощью Ant Design при разработке корпоративного приложения, нам нужно начать с основ.

Для начала давайте сначала создадим наше приложение для реагирования, используя следующую команду.

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

Затем настройте antd с помощью следующего кода:

npm i antd

После того, как antd будет успешно установлен в вашем приложении для реагирования, вы сможете увидеть его в своих зависимостях.

Теперь, как мы знаем, есть несколько компонентов, которые можно легко использовать с помощью antd. Итак, давайте попробуем разобраться в некоторых из этих компонентов и посмотреть, как они работают. Попробуем добавить в наше приложение сборщик данных. Для этого добавьте следующий код в свой src / App.js:

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

В приведенном выше коде мы импортировали компонент Data Picker из Ant Design Library, а также его CSS. После того, как мы добавили этот код, при запуске нашего приложения мы увидим средство выбора даты.

Мы также можем изменить его тему на темную, если мы предпочитаем темную тему обычной, и для этого просто добавьте этот CSS и удалите предыдущий CSS из кода.

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

После того, как мы успешно добавили CSS, мы добавим в наш сборщик данных темную тему.

Посмотрите, как легко мы добавили средство выбора данных в наше приложение и насколько чистым был наш код.

Как и в Data Picker, есть много других компонентов, таких как значки, кнопки, типографика, модальные окна, таблица, дерево и многие другие, которые мы кратко обсудим в другом блоге.

Заключение

Поскольку Ant Design - это код с открытым исходным кодом и его можно использовать бесплатно, поэтому он может многое предложить нам, и только в наших руках, как мы можем его использовать. Это также делает наш код намного чище и тоньше, поэтому я советую использовать его в своем приложении для реагирования, и вы почувствуете разницу.

Если у вас есть сомнения по этому поводу, вы можете оставить комментарий или связаться со мной в LinkedIn.