Использование библиотеки CoreUI в приложениях .NET+React.js | Статья в журнале «Молодой ученый»

Отправьте статью сегодня! Журнал выйдет 5 февраля, печатный экземпляр отправим 9 февраля.

Опубликовать статью в журнале

Автор:

Рубрика: Информационные технологии

Опубликовано в Молодой учёный №1 (396) январь 2022 г.

Дата публикации: 07.01.2022

Статья просмотрена: 15 раз

Библиографическое описание:

Кулиджанова, М. В. Использование библиотеки CoreUI в приложениях .NET+React.js / М. В. Кулиджанова. — Текст : непосредственный // Молодой ученый. — 2022. — № 1 (396). — С. 6-10. — URL: https://moluch.ru/archive/396/87659/ (дата обращения: 25.01.2022).



В данной научной работе рассматривается использование CoreUI -шаблона панели управления и библиотеки компонентов пользовательского интерфейса, в приложении .NET Core c React.js. Приводится сравнительная характеристика способов подключения библиотеки в проект с использованием npm-пакетов и деархивации исходного кода шаблона.

Ключевые слова: компонент, проект, библиотека, react.js, coreui, шаблон, пользовательский интерфейс.

Библиотеки компонентов — очень полезный инструмент в разработке веб-приложений, так как позволяют сэкономить время на написание с нуля компонентов интерфейса и повторно их использовать.

CoreUI — это набор Bootstrap-шаблонов для создания дашбордов (приборных панелей) и библиотека UI-компонентов (компонентов пользовательского интерфейса) с открытым исходным кодом, размещенным на GitHub.

CoreUI можно настроить и использовать с популярными веб-фреймворками, такими как Bootstrap, React.js, Vue.js и др. Инструкции по установке и примеры использования доступны в официальной документации библиотеки [1].

Интерфейс панели администратора для фреймворка React.js

Рис. 1. Интерфейс панели администратора для фреймворка React.js

CoreUI предоставляет такие компоненты, как кнопки, иконки, карточки, диаграммы и множество других. При этом у программистов есть возможность управлять ими и изменять эти компоненты под свои нужды. Набор всех компонентов можно посмотреть на демо-сайте [2].

Все компоненты — это функциональные react-компоненты.

Перейдем к разработке. Добавить CoreUI в проект можно двумя способами: распаковав архив демо-сайта в наш проект, либо установив нужные npm-пакеты.

Рассмотрим сначала первый вариант с готовым сайтом. Для начала создадим приложение ASP.NET Core c React.js [3]. Для выполнения данной работы использовалась среда программирования Visual Studio 2019 Community Edition.

ASP.NET Core with React.js

Рис. 2. ASP.NET Core with React.js

Скачаем нужную версию архива сайта и распакуем его. Заменим им файлы в папке ClientApp нашего приложения. В результате мы получим проект со следующим содержимым:

CoreUI.React

Рис. 3. CoreUI.React

Второй способ подразумевает скачивание необходимых Node.js-пакетов. Так раздел зависимостей в файле package.json может выглядеть следующим образом:

Далее, чтобы использовать компоненты в проекте, нужно импортировать css и js файлы в App.js, например:

Пример с использованием CoreUI-компонента — кнопки.

Импорт самого компонента:

Его использование:

Пример замены кнопки компонентом CoreUI в проекте по умолчанию ASP.NET Core+React.js

Рис. 4. Пример замены кнопки компонентом CoreUI в проекте по умолчанию ASP.NET Core+React.js

При установке из архива мы получаем помимо UI-компонентов, еще и готовую боковую панель меню, страницы авторизации и регистрации, ошибок 404 и 500, можем наглядно увидеть варианты использования компонентов CoreUI. А также мы получаем настроенный Redux — JS-библиотеку для управления состоянием приложения.

При установке же CoreUI из npm-пакетов, вышеперечисленные возможности будут отсутствовать, но возможно произвести нужные настройки вручную.

Выводы

CoreUI — простая и удобная библиотека для создания дизайна веб-приложений. Его удобно добавить в проект и настроить для работы с большим числом фреймворков. В данной работе было показано его использование с фреймворком .NET Core и React.js.

Литература:

  1. React Admin & Dashboard Template CoreUI for React.js— Текст: электронный. — URL: https://coreui.io/react/. (дата обращения: 06.01.2022).
  2. CoreUI Pro React.js Admin Template — Текст: электронный. — URL: https://coreui.io/react/demo/3.1.0/#/dashboard (дата обращения: 06.01.2022).
  3. Использование шаблона проекта React с ASP.NET Core | Microsoft Docs — Текст: электронный. — URL: https://docs.microsoft.com/ru-ru/aspnet/core/client-side/spa/react?view=aspnetcore-6.0&tabs=visual-studio (дата обращения: 06.01.2022)
Основные термины (генерируются автоматически): компонент, пользовательский интерфейс, проект, библиотека компонентов.


Задать вопрос