Лучшие библиотеки приборных панелей React

Автор Дэвид Омотайо✏️

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

Существует множество вариантов для создания приложения приборной панели, и выбор фреймворка часто является наиболее важным фактором. На мой взгляд, с React ошибиться невозможно. Это самый популярный и универсальный фреймворк пользовательского интерфейса.

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

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

Давайте рассмотрим следующие библиотеки приборных панелей React:

  • React-admin
  • Ant Design Pro
  • React Dashboard
  • Material Dashboard React
  • Volt React Dashboard
  • Airframe React
  • Core UI React
  • Осколки React
  • React Reduction
  • Приборная панель Argon React
  • Mosaic Lite
  • Бумажная приборная панель React
  • Азия
  • Star Admin React

React-admin

Первым в списке идет React-admin, комплексная библиотека с открытым исходным кодом для создания управляемых данными панелей администратора.

React-admin основана на фреймворке React и использует популярные технологии пользовательского интерфейса, управления данными и маршрутизации, такие как Material UI, Redux, React Final Form и React Router. Эта библиотека использует провайдеры данных для легкой адаптации к нескольким архитектурам бэкендов, таким как GraphQL, REST и SOAP.

Свободно связанный дизайн React-admin позволяет легко заменить любую из его основных систем. Например, вы можете использовать Bootstrap вместо стандартного Material Designs. Эта библиотека может быть интегрирована в существующий проект или использоваться как отдельный проект с JavaScript или TypeScript.

Особенности:

  • Валидация данных
  • Интернационализация (i18n)
  • Теминг
  • Аутентификация (OAuth и многое другое)
  • WYSIWYG-редактор

Быстрый старт: Установите через npm:

npm install react-admin
Вход в полноэкранный режим Выход из полноэкранного режима

Установка через Yarn:

yarn add react-admin
Войти в полноэкранный режим Выйти из полноэкранного режима

Статистика:

  • Звезды GitHub: 18.9k+
  • Лицензия: MIT
  • npm weekly downloads: 47k+
  • Ссылки: Демо | GitHub репозиторий | страница npm

Ant Design Pro

Ant Design Pro — это бесплатная библиотека пользовательского интерфейса с открытым исходным кодом для создания готовых к производству административных интерфейсов для корпоративных приложений.

Библиотека основана на React Umi и Ant Design UI, поэтому она хорошо настраивается, хорошо документирована и проста в освоении.

Ant Design Pro поддерживается Ant Group и Alibaba, крупной корпорацией электронной коммерции. Библиотека регулярно обновляется и хорошо поддерживается. Ant Design Pro предоставляет разработчикам возможность выбора JavaScript или TypeScript для разработки.

Особенности:

  • Отзывчивость
  • Теминг
  • Интернационализация (i18n)
  • тестирование пользовательского интерфейса

Быстрый старт: Клонируйте репозиторий:

git clone https://github.com/ant-design/ant-design-pro.git --depth=1
Войдите в полноэкранный режим Выход из полноэкранного режима

Статистика:

  • Звезды GitHub: 31.3k+
  • Лицензия: MIT
  • Ссылки: Демо | GitHub repo | npm page

React Dashboard

React Dashboard — это библиотека администратора, созданная компанией Flatonic, которая предлагает бесплатные и премиум шаблоны для различных JavaScript фреймворков. React Dashboard — это бесплатная панель администратора, построенная с использованием React, Bootstrap, React Router, Redux и GraphQL.

Эта библиотека поставляется с рабочей интеграцией бэкенда Node.js, что позволяет легко визуализировать и аутентифицировать данные.

Особенности:

  • Аутентификация
  • Отзывчивость
  • Flatlogic CSS набор
  • CRUD-операции

Быстрый старт: Клонируйте репозиторий:

git clone -o react-dashboard -b master --single-branch  https://github.com/flatlogic/react-dashboard.git
Вход в полноэкранный режим Выход из полноэкранного режима

Статистика:

  • Звезды GitHub: 1.4k+
  • Лицензия: MIT
  • Ссылки: Демо | GitHub repo

Material Dashboard React

Material Design React — это удобная для разработчиков библиотека приборной панели администратора, основанная на Material Design (MUI) от Google и React.

Эта библиотека поставляется с предварительно построенными блоками дизайна, которые обеспечивают беспроблемный процесс разработки. Она также предлагает более 70 отдельных элементов фронтенда, таких как кнопки, входы и карточки, которые можно легко изменить с помощью API стилей MUI и sx prop (пользовательский стиль).

Быстрый старт: Установите через npm:

npm i material-dashboard-react
Войти в полноэкранный режим Выйти из полноэкранного режима

Клонируйте репозиторий:

git clone https://github.com/creativetimofficial/material-dashboard-react.git
Войти в полноэкранный режим Выйти из полноэкранного режима

Статистика:

  • Звезды GitHub: 2k+
  • Еженедельные загрузки NPM: 392+
  • Лицензия: MIT
  • Ссылки: Демо | GitHub repo | npm page

Volt React Dashboard

Volt React Dashboard — это бесплатная библиотека React dashboard с открытым исходным кодом, основанная на технологиях Bootstrap 5 и Sass frontend. Эта библиотека построена на основе компонентов React с использованием React Hooks и методологии, основанной на данных, что обеспечивает улучшенный опыт разработчика.

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

Быстрый старт: Установите через npm:

npm i @themesberg/volt-react-dashboard
Войти в полноэкранный режим Выйти из полноэкранного режима

Клонируйте репозиторий:

git clone https://github.com/themesberg/volt-react-dashboard.git
Войти в полноэкранный режим Выйти из полноэкранного режима

Статистика:

  • Звезды GitHub: 504+
  • Лицензия: MIT
  • Еженедельные загрузки Npm: 139+
  • Ссылки: Демо | GitHub repo | npm page

Airframe React

Airframe React — это библиотека админских панелей с минималистичным дизайном и инновационным легким пользовательским интерфейсом для создания масштабных приложений приборных панелей.

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

Airframe основана на React, Bootstrap, React Router и Reactstrap.

Быстрый старт: Установите через npm:

npm i react-airframe
Войти в полноэкранный режим Выйти из полноэкранного режима

Клонируйте репозиторий:

git clone https://github.com/0wczar/airframe-react.git
Войти в полноэкранный режим Выйти из полноэкранного режима

Статистика:

  • Звезды GitHub: 3.7k+
  • Лицензия: MIT
  • Еженедельные загрузки Npm: 139+
  • Ссылки: Демо | GitHub repo | npm page

N.B., Airframe React не обновлялся с 2020 года. Тем не менее, это все еще лучший вариант, чем создание приборных панелей с нуля.

Core UI React

Core UI React — это легкая библиотека дашбордов с открытым исходным кодом, лицензируемая MIT, построенная на Bootstrap 5 и React с TypeScript.

Core UI React состоит из стилизованных компонентов библиотеки core UI CSS, которая действует как расширение Bootstrap, добавляющее библиотеке дополнительные функции.

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

Быстрый старт: Установите через npm:

npm i @coreui/react
Войдите в полноэкранный режим Выйти из полноэкранного режима

Клонируйте репозиторий:

git clone https://github.com/coreui/coreui-free-react-admin-template.git
Войти в полноэкранный режим Выйти из полноэкранного режима

Статистика:

  • Звезды GitHub: 3.6k+
  • Лицензия: MIT
  • Еженедельные загрузки Npm: 16k+
  • Ссылки: Демо | GitHub repo | npm page

Shards React

Shards React — одна из лучших библиотек дашбордов для манипулирования кусками данных из блоговых платформ. Она имеет простой в использовании набор инструментов React UI, основанный на Material Design и Font Awesome.

Эта библиотека включает настраиваемые компоненты для управления и визуализации данных с любой блогерской платформы. Эти компоненты включают таблицы, формы, приборные панели блога, статистику записей блога и многое другое.

Быстрый старт: Установите через npm:

npm i shards-react
Войдите в полноэкранный режим Выйти из полноэкранного режима

Установить с помощью Yarn:

yarn add shards-react
Войти в полноэкранный режим Выйти из полноэкранного режима

Статистика:

  • Звезды GitHub: 700+
  • Лицензия: MIT
  • Еженедельные загрузки Npm: 2k+
  • Ссылки: Демо | GitHub repo | npm page

N.B., Shards React не обновлялся с 2020 года.

React Reduction

React Reduction — это библиотека, созданная на основе React и Bootstrap 4. Она предоставляет множество компонентов, карточек, диаграмм и виджетов для создания элегантных и профессиональных приборных панелей.

Быстрый старт: Клонируйте репозиторий:

git clone https://github.com/reduction-admin/react-reduction.git
Войдите в полноэкранный режим Выход из полноэкранного режима

Статистика:

  • Звезды GitHub: 1.3k+
  • Лицензия: MIT
  • Ссылки: Демо | GitHub repo

N.B., React Reduction не обновлялся с 2020 года.

Argon Dashboard React

Argon Dashboard React основана на Bootstrap 4 и Reactstrap. Это бесплатная библиотека с открытым исходным кодом, которая поставляется с полностью закодированными компонентами, предоставляя свободу выбора и комбинирования различных вариаций для создания удивительных веб-приложений.

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

Быстрый старт: Установите через npm:

npm i argon-dashboard-react
Войдите в полноэкранный режим Выйти из полноэкранного режима

Установите с помощью Bower:

bower install argon-dashboard-react.
Войти в полноэкранный режим Выйти из полноэкранного режима

Клонировать репозиторий:

git clone https://github.com/creativetimofficial/argon-dashboard-react.git.
Войти в полноэкранный режим Выйти из полноэкранного режима

Статистика:

  • Звезды GitHub: 342+
  • Лицензия: MIT
  • Ссылки: Демо | GitHub repo | npm page

Mosaic Lite

Mosaic Lite — это библиотека с открытым исходным кодом, созданная с помощью Tailwind CSS и React. Это отзывчивый шаблон приборной панели с предварительно закодированными диаграммами и виджетами для создания пользовательских интерфейсов для SaaS-продуктов и современных веб-приложений.

Быстрый старт: Клонируйте репозиторий:

git clone https://github.com/cruip/tailwind-dashboard-template.git
Войдите в полноэкранный режим Выйти из полноэкранного режима

Статистика:

  • Звезды GitHub: 930+
  • Лицензия: MIT
  • Ссылки: Демо | GitHub repo

Paper Dashboard React

Paper Dashboard React — это красочная библиотека приборных панелей, основанная на Bootstrap 4. Она поставляется с большим количеством компонентов, которые выглядят аккуратно и хорошо организованы.

Эта библиотека состоит из правильного количества зависимостей с достаточным количеством функций для простого использования.

Быстрый старт: Установите через npm:

npm i paper-dashboard-react
Войдите в полноэкранный режим Выйти из полноэкранного режима

Клонируйте репозиторий:

git clone https://github.com/creativetimofficial/paper-dashboard-react.git
Войти в полноэкранный режим Выйти из полноэкранного режима

Статистика:

  • Звезды GitHub: 160+
  • Лицензия: MIT
  • Ссылки: Демо | GitHub repo | npm page

Азия

Azia — это еще одна невероятная библиотека React dashboard, основанная на фреймворке Bootstrap. Библиотека содержит множество элементов пользовательского интерфейса, компонентов и готовых примеров страниц, которые позволят быстро запустить ваши проекты.

Быстрый старт: Клонируйте репозиторий:

git clone https://github.com/BootstrapDash/azia-admin-react.git
Войти в полноэкранный режим Выход из полноэкранного режима

Статистика:

  • Звезды GitHub: 160+
  • Лицензия: MIT
  • Ссылки: Демо | GitHub repo

Star Admin React

Star Admin React — это мощная библиотека приборных панелей с различными встроенными элементами пользовательского интерфейса.

Star Admin React основана на библиотеке Bootstrap UI и предлагает неограниченные возможности настройки для визуализации данных и создания уникальных веб-приложений.

Быстрый старт: Клонируйте репозиторий:

git clone https://github.com/BootstrapDash/StarAdmin-Free-React-Admin-Template.git
Войдите в полноэкранный режим Выход из полноэкранного режима

Статистика:

  • Звезды GitHub: 163+
  • Лицензия: MIT
  • Ссылки: Демо | страница GitHub

Заключение

В этой статье мы рассмотрели 14 лучших бесплатных решений для создания профессиональных дашбордов и веб-приложений с панелью администратора на React.

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


Полная видимость производственных приложений React

Отладка приложений React может быть сложной задачей, особенно когда пользователи сталкиваются с проблемами, которые трудно воспроизвести. Если вы заинтересованы в мониторинге и отслеживании состояния Redux, автоматическом выявлении ошибок JavaScript, отслеживании медленных сетевых запросов и времени загрузки компонентов, попробуйте LogRocket.

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

Пакет промежуточного ПО LogRocket Redux добавляет дополнительный уровень видимости пользовательских сессий. LogRocket регистрирует все действия и состояние ваших хранилищ Redux.

Модернизируйте отладку приложений React — начните мониторинг бесплатно.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *