23 лучших компонентных фреймворков React для пользовательского интерфейса

Перевод статьи Джонатана Сэринга «23 Best React UI Component Frameworks».

Библиотека React

Согласно опроса на Stack Overflow популярность React выросла почти на 150% с 2017 до 2018 года. На самом деле ничего удивительного. Среди прочего, это стало возможным благодаря его растущей экосистеме, основанной на компонентах.

Кто-то предпочитает библиотеки, другие – разработку собственных компонентов. В любом случае, перед вами полный список лучших компонентных библиотек и фреймворков пользовательского интерфейса и дополнительный бонус в конце списка.

Совет: Вы можете воспользоваться Bit для отбора компонентов из любой библиотеки или приложения и сделать их доступными для использования и разработки в любом другом приложении.

Bit

1. Material-UI

Компоненты React, реализующие материальный дизайн Google. Это одна из самых популярных и широко используемых React UI библиотек на GitHub, набравшая 35 тыс. звезд (!).

Material-UI

2. React Bootstrap

Bootstrap 3 компоненты, построенные с помощью React. Имея 13 тыс. звезд, эта библиотека все еще популярна и полезна, даже несмотря на то, что мы по-прежнему ожидаем поддержку bootstrap 4.

React Bootstrap

3. Grommet

Прекрасные React-компоненты пользовательского интерфейса, сфокусированные на основном опыте. Набрав больше 3 тысяч звезд, эти компоненты могут по праву гордиться своим простым, но красивым дизайном.

Grommet

4. Ant Design React

Популярные React-компоненты, следующие руководствам и спецификациям Ant в отношении дизайна. Написаны на typescript и поддерживают интенсивный рабочий процесс.

Ant Design React

5. Blueprint

Основанный на React набор инструментов UI для веба. Этот проект набрал больше 9 тысяч звезд; его поддерживает 100 участников. Компоненты написаны на TS и стилизованы с помощью Sass для быстрой разработки.

Blueprint

6. Reactstrap

Эта библиотека предоставляет простые React bootstrap 4 компоненты. Она имеет больше 4 тыс. звезд и около 100 участников. Это весьма популярный вариант для поклонников bootstrap.

Reactstrap

7. React Toolbox

React Toolbox это набор компонентов React, реализующих материальный дизайн Google. Он построен на основе некоторых самых модных предложений, таких как модули CSS (написаны на SASS), Webpack и ES6. React Toolbox очень популярен: у него около 8 тысяч звезд.

React Toolbox

8. React Desktop

Библиотека UI-компонентов, нацеленная на перенос нативного десктопного опыта в веб. Ее отличает множество компонентов macOS Sierra и Windows 10.

React Desctop

9. Semantic UI React

Semantic UI React это официальная интеграция React для Semantic UI. Проект имеет 6,5 тыс. звезд и используется Netflix, Amazon и другими солидными организациями.

Semantic UI React

10. Onsen UI React

Больше 100 компонентов, специально созданных для материального и плоского дизайна, объединяют фреймворк Onsen UI и React для построения гибридных приложений.

Onsen UI React

11. Rebass

Библиотека и система проектирования React UI компонентов, построенная с помощью стилизованных компонентов и стилизованной системы. Она набрала почти 4 тысячи звезд и является отличным выбором для поклонников стилизованных компонентов.

Rebass

12. Elemental UI

Экспериментальный набор UI-инструментов для React.js сайтов и приложений. 4 тысячи звезд на GitHub. В настоящее время разрабатывается авторами Keystone.js в Thinkmill.

Elemental UI

13. Belle

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

Belle

14. Prime React

Хотя у этого проекта пока еще меньше 400 звезд, нам он нравится, поскольку предоставляет богатый и уникальный выбор из более 60 компонентов пользовательского интерфейса со множеством тем.

Prime React

15. Atlaskit

Официальный набор React UI от Atlasssian является технической реализацией руководства по дизайну Atlassian (Atlassian Design Guidelines – ADG). Каждый компонент находится в собственном пакете.

Atlaskit

16. Fabric

Набор React-компонентов, написанных на Typescript, для создания опыта Office и Office 365. Со своими 2,5 тыс. звезд он заслуживает вашего внимания (быстрый старт).

Fabric

17. Carbon Components

React-компоненты, соответствующие системе проектирования Carbon от IBM. Вы также можете попробовать их онлайн с помощью CodeSandBox.

Carbon Components

18. Khan React Components

React UI компоненты Khan academy, выпущенные для сообщества и набравшие почти тысячу звезд на GitHub.

Khan React Components

19. Gestalt by Pinterest

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

Gestalt by Pinterest

20. Material Components Web

Разработанная командой инженеров и дизайнеров Google, эта библиотека заменила react-mdl и уже набрала больше 8 тыс. звезд. Обратите на нее внимание.

Material Components Web

21. React MD

прекрасный и настоятельно рекомендуемый набор для создания веб-приложений с материальным дизайном Google и настраиваемыми темами и стилями (Sass).

React MD

22. React Foundation

Встраиваемые части проекта Foundation, активно разрабатываемые в виде React-компонентов. Отличаются простотой и большим охватом.

React Foundation

23. React Virtualized

Близкий к совершенству набор компонентов React для виртуализации объемных наборов данных. Проект набрал почти 10 тысяч звезд, что говорит о его популярности и полезности.

React Virtualized

+5 – в качестве бонуса

К сожалению, большинство из них не отличаются активной поддержкой. Но все равно стоит на них взглянуть.

* React UWP

UWP-дизайн от Microsoft с использованием React.

React UWP

* Amaze UI React

React-реализация популярного китайского кросс-платформенного фреймворка Amaze-UI.

Amaze UI React

* UXCore

React-компоненты для корпоративных серверных приложений данных.

UXCore

* Zent

Прекрасная незаметная китайская React UI библиотека.

Zent

* Halogen

Одни загрузчики и выпадающие списки.

Halogen

Не используете библиотеки?

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

Awesome

Надеемся, вам понравился наш список!


[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]

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

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

Прокрутить вверх