Язык дизайна пользовательского интерфейса корпоративного класса и библиотека React UI

antd предоставляет множество компонентов пользовательского интерфейса для обогащения ваших веб-приложений. Библиотека Antd с каждым днем ​​расширяется за счет улучшенных и новых функций. Я использую antd последние 7 месяцев, и мне очень нравятся компоненты, предоставляемые antd. Используя множество встроенных компонентов, очень легко визуализировать и создавать пользовательский интерфейс. Библиотеку ANTD можно также использовать с js react, angular и Vue. Благодаря широкой поддержке и сообществу, его легко использовать и доверять для большого проекта / приложения.

В этой статье я в основном говорю о antd + react. Итак, позвольте мне рассказать вам об особенностях antd (источник).

Функции

  • 🌈 Пользовательский интерфейс корпоративного класса, разработанный для веб-приложений.
  • 📦 Набор качественных компонентов React из коробки.
  • 🛡 Написано на TypeScript с предсказуемыми статическими типами.
  • ⚙️ Целый пакет дизайнерских ресурсов и средств разработки.
  • 🌍 Поддержка интернационализации для десятков языков.
  • 🎨 Мощная настройка темы до мельчайших деталей.

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

Установка

Использование нпм или пряжи

Как и другие команды установки пакета, просто запустите любую из следующих команд

$ npm install antd
$ yarn add antd

использование

Для указания любого компонента вам необходимо указать имя компонента, например DatePicker, и ввести, например,

import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);

И импортируйте таблицы стилей вручную:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

Используйте модульный antd

antd по умолчанию поддерживает встряхивание дерева модулей ES для JS-части.

Машинопись

antd содержит встроенное определение ts, не устанавливайте @types/antd

Вот список компонентов, предоставляемых antd,

Как реализовать в React Project?

Просто измените содержимое index.js с помощью данного кода. Компоненты React и antd одинаковы.

import React, { useState } from 'react';
import { render } from 'react-dom';
import { DatePicker, message } from 'antd';
import 'antd/dist/antd.css';
import './index.css';
const App = () => {
  const [date, setDate] = useState(null);
  const handleChange = value => {
    message.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
    setDate(value);
  };
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
      <DatePicker onChange={handleChange} />
      <div style={{ marginTop: 16 }}>
        Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
      </div>
    </div>
  );
};
render(<App />, document.getElementById('root'));

Вывод

Во-первых, им легко пользоваться, а если вы хотите создать большое приложение с пользовательским интерфейсом, это может снизить нагрузку на ваши плечи. Вам не нужно создавать небольшой компонент пользовательского интерфейса с нуля, потому что вы можете легко использовать существующие компоненты. Одним из основных недостатков этой библиотеки является очень большой размер пакета. Так что вам нужно позаботиться об этом при сборке для производства.

Если вам нравится эта статья, помогите мне купить кофе: https://www.buymeacoffee.com/harry1408

Суровый Патель | Full-Stack Developer | Http://imharshpatel.com