UI-компоненты для React: топ-10 библиотек и фреймворков
Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Пользовательский интерфейс — это «вау!»-фактор любого приложения. Что касается React-приложений, UI может быть довольно сложным. В этой статье мы собрали лучшие библиотеки и фреймворки, содержащие компоненты UI для React-приложений. Они точно пригодятся вам при создании пользовательских интерфейсов.
1. Ant Design
Ant Design — это язык дизайна и UI-библиотека React. Собственно, если ориентироваться на звезды на GitHub, это самая популярная библиотека такого рода. В ней вы найдете более ста разнообразных компонентов, от типографики до таблиц.
Ant-компоненты позволяют разработчикам экономить время. Например, благодаря готовым компонентам форм, разработчику не придется возиться с их созданием форм и валидацией.
Также Ant Design экономит время дизайнеров. Ко всем компонентам приложены файлы Sketch и Figma.
Компоненты Ant Design поддерживают и JSX, и TypeScript. Есть поддержка хуков. Документация Ant Design ясная и понятная, в ней много хороших примеров.
Звезд на GitHub — 73,8 тысячи.
2. Material-UI
Material-UI — тоже одна из самых популярных библиотек React. Это собрание простых и настраиваемых компонентов, благодаря которому ваши React-приложения станут быстрее, красивее и доступнее.
В Material-UI вы найдете больше ста компонентов. Кроме того, там есть больше тысячи иконок.
Библиотека предоставляет файлы Sketch, Figma иAdobe Xd для дизайнеров (правда, на платной основе).
Документация у библиотеки хорошая, содержит примеры кода.
Material UI используется в таких компаниях, как Spotify, NASA, Netflix и Amazon.
Звезд на GitHub — 70,3 тысячи.
3. Chakra UI
Chakra UI предоставляет набор React-компонентов, которые отличаются доступностью и пригодностью для компоновки и многократного использования. Создавать сайты и приложения с их помощью можно очень быстро.
Компоненты Chakra UI соответствуют спецификациям WAI-ARIA и имеют aria-* атрибуты.
От редакции Techrocks. WAI-ARIA — технологический стандарт, разрабатываемый Консорциумом Всемирной паутины для предоставления возможности полноценного использования Интернета людьми с физическими ограничениями. Больше на тему обеспечения доступности в вебе можно почитать в статье «Что такое веб-доступность и как научиться делать доступные сайты и приложения».
Эта библиотека отличается хорошей производительностью, а кроме того с ней приятно работать. Благодаря этому сообщество Chakra UI быстро растет.
Библиотека имеет хорошую документацию с примерами кода.
Звезд на GitHub — 20 тысяч.
4. React Bootstrap
React Bootstrap делает возможным использование Bootstrap JS для React-компонентов.
В этом пакете вы найдете все компоненты Bootstrap, которые мы используем с JavaScript. Они созданы с нуля на React и не содержат jQuery.
React Bootstrap имеет тщательно продуманную документацию с примерами кода.
Звезд на GitHub — 19,8 тысячи.
5. Semantic UI React
Semantic — это фреймворк UI-компонентов, основанный на принципах естественного языка.
А Semantic UI React — официальная React-интеграция для Semantic-UI. Содержит больше 50 компонентов. В них не используется jQuery: вся функциональность была заново реализована на React.
Если для вашего React-приложения нужен Semantic UI, обратите внимание на эту интеграцию.
Звезд на GitHub — 12,4 тысячи.
6. Fluent UI
Fluent — кроссплатформенная система дизайна с открытым исходным кодом. Она помогает дизайнерам и разработчикам создавать привлекательные продукты — доступные, интернационализированные, с хорошей производительностью.
Fluent UI разработана Microsoft. Дизайн Fluent используется для устройств и инструментов Windows 10 и Windows 11.
Платформа имеет коллекцию утилит, React- и веб-компонентов для создания веб-приложений. Документация хорошая.
Звезд на GitHub — 12 тысяч.
7. Evergreen
Evergreen — UI-фреймворк для создания веб-продуктов. Компоненты Evergreen построены на основе React UI Primitive с расчетом на пригодность для компоновки. Разработчики компонентов — команда Segment и внешние контрибьюторы.
Evergreen содержит больше 30 компонентов. Документация тоже производит хорошее впечатление.
Звезд на GitHub — 11 тысяч.
8. Reactstrap
Reactstrap — библиотека, содержащая React-компоненты для Bootstrap 4. Она проста в настройке и использовании, имеет хорошую документацию.
Звезд на GitHub — 10,1 тысячи.
9. Grommet
Grommet — фреймворк на базе React. Это доступность, модульность, адаптивность и красивые темы в одном аккуратном пакете.
В Grommet вы найдете больше 60 компонентов. Он также предоставляет Sketch, Figma, AdobeXd файлы и больше 600 иконок.
Этот фреймворк используется Netflix, Samsung, Uber, Boeing, IBM и другими компаниями.
Звезд на GitHub — 7,4 тысячи.
10. Reakit
Reakit — библиотека низкоуровневых компонентов для создания доступных высокоуровневых UI-библиотек, систем дизайна и приложений на React. Отличается маленьким размером и высокой скоростью.
Звезд на GitHub — 5 тысяч.
11. Mantine
Mantine — библиотека компонентов и хуков React с нативной поддержкой темной темы. В фокусе этой библиотеки удобство использования, доступность и удобство для разработчика.
Mantine содержит больше ста настраиваемых компонентов и хуков.
Звезд на GitHub — 1,8 тысячи.
Заключение
Использование UI-библиотек позволяет экономить время и снижает необходимость в большем количестве зависимостей. Конечно, таких библиотек значительно больше, чем представлено в этом списке. Мы собрали лишь самые широко используемые. Надеемся, вам они пригодятся.
От редакции Techrocks. Возможно, вас также заинтересуют другие статьи о React:
7 лучших библиотек для создания молниеносно быстрых приложений ReactJS
Некоторые необходимые инструменты для rock-star разработчика
Привет, Хабр. В рамках набора на курс «React.js Developer» подготовили перевод материала.
Всех желающих приглашаем на открытый демо-урок «Webpack и babel». На занятии рассмотрим современные и мощные фишки JavaScript — Webpack и Babel. Пошагово покажем, как с нуля создать проект на React, используя Webpack. Присоединяйтесь!
ReactJS по умолчанию обладает высокой производительностью. Но время от времени у вас появляется шанс сделать его еще лучше. И замечательное сообщество React придумало для этого несколько фантастических библиотек.
Сегодня мы поговорим о семи таких библиотеках, которые могут улучшить качество вашего кода и при этом повысить производительность.
1. React Query
Известно, что React Query, недостающая библиотека управления состоянием для React.
В документации к ней говорится: «Получайте, кэшируйте и обновляйте данные в ваших приложениях React, не затрагивая никакого «глобального состояния»».
Да. Это именно то, что она делает. Она помогает нам управлять состоянием сервера без лишних хлопот. Это может уменьшить необходимость использования библиотеки управления состоянием, такой как Redux.
Преимущества
Автоматическое обновление данных в фоновом режиме
Значительно сокращает объем кода
До использования React Query
Вот пример для получения данных с помощью нашего пользовательского хука. Он даже не поддерживает кэширование.
После (использования) React Query
Вот код, если мы хотим использовать React Query. Посмотрите, какой он маленький.
Посмотрите, насколько сильно сократился наш код.
2. React Hook Form
Преимущества
Уменьшает объем кода
Сокращает ненужный ре-рендеринг.
Легко интегрируется с современными библиотеками пользовательского интерфейса (UI)
Ниже приведен пример, демонстрирующий, как React Hook Form может улучшить качество кода.
Без React Hook Form
Вот пример создания формы авторизации вручную.
С помощью React Form
Вот тот же пример с React Hook Form.
Выглядит аккуратно и в то же время эффективно. Попробуйте.
3. React Window
React Window используется для рендеринга длинных списков. Представьте, что у вас есть список из 1 000 элементов. На экране отображаются только десять, но ваш код пытается визуализировать 1000 элементов одновременно.
Это может привести к серьезным задержкам в вашем приложении. Данная библиотека очень популярна и является обязательным инструментом в вашем арсенале.
Ручной рендеринг 1 000 элементов
Но этот код рендерит 1000 элементов одновременно, хотя на экране можно увидеть не более 10-20 элементов.
Использование React Window
Теперь давайте используем React Window.
Данный код рендерит только то, что вы видите на экране. Поначалу это может быть непонятно, но необходимо, если вам нужно отобразить длинный список.
4. React LazyLoad
Преимущества
Поддерживает рендеринг на стороне сервера
Без LazyLoad
Вот пример, в котором мы загружаем пять изображений вручную.
С LazyLoad
Вот тот же пример с компонентом LazyLoad.
5. Почему вы выполняете рендеринг (Why Did You Render)
Ненужный рендеринг может навредить производительности ваших React-приложений. Но иногда мы делаем это, даже не подозревая.
Этот замечательный пакет, Why Did You Render, помогает нам найти проблемы с производительностью и решить их. Вы просто включаете его в любом компоненте, и он сообщает вам, почему именно происходит рендеринг.
Ниже представлен компонент с возникающими проблемами рендеринга.
После включения эта библиотека будет записывать в консоль следующий результат.
Из этого журнала видно, что мы обновляем объект с одним и тем же значением, что плохо для производительности.
6. Reselect
Если вы используете Redux, то эта функция станет для вас спасительной. Мы знаем, что редьюсеры Redux могут хранить большое количество данных, и если вы передадите всё хранилище в какой-либо компонент, это приведет к тому, что он будет заново рендериться каждый раз, когда что-либо в этом хранилище будет обновляться.
Reselect решает эту проблему, меморизуя значения и передавая только то, что необходимо.
Селекторы могут вычислять производные данные, что позволяет Redux хранить минимально возможное состояние.
Селекторы эффективны. Селектор не пересчитывается, если один из его аргументов не изменился.
Селекторы являются составными. Они могут быть использованы в качестве входных данных для других селекторов.
Пример
Ниже приведен пример получения значений из хранилища и их изменения в селекторе.
7. Deep Equal
Вот почему мы видим следующий результат.
Но если нужно проверить равенство (для мемоизации), то это становится затратной (и сложной) операцией.
Если мы используем Deep Equal, то это повышает производительность в 46 раз. Ниже приведен пример того, как мы можем это сделать.
Вот как это выглядит. Таковы некоторые из самых важных библиотек, которые вы можете использовать для обеспечения максимальной производительности вашего приложения React.
Оставляйте комментарии, если у вас на примете есть другие. Хорошего дня!
11 библиотек (наборов компонентов) для React, о которых стоит знать в 2018-м
Современные фреймворки для разработки веб-приложений сформировали вокруг себя сообщества, члены которых, помимо прочих дел, занимаются разработкой библиотек для этих фреймворков. Подобные библиотеки находят применение во множестве проектов. Как правило, можно даже говорить о том, что, например, на чистом React, Angular или Vue, без применения дополнительных средств, веб-приложения сегодня не разрабатывают.
Представляем вашему вниманию перевод первого материала из серии статей, в каждой из которых рассмотрены 11 наиболее интересных библиотек для разных веб-фреймворков, на которые стоит обратить внимание в 2018-м. Сегодня поговорим о библиотеках для React.
React
Если взглянуть на статистику по React, возникает ощущение, что популярность этого фреймворка постоянно растёт. Хотя, если рассмотреть данные Stack Overflow по самым популярным технологиям, React уступает Angular, но при этом лидирует в списке самых любимых разработчиками технологий.
React — самый любимый фреймворк в 2017-м
Технология Virtual DOM и возможность декларативного описания пользовательских интерфейсов, а также возможность моделирования состояния интерфейсов и доступность React для JS-разработчиков, знающих своё дело, привели к тому, что очень многие выбирают этот фреймворк для создания фронтенда веб-приложений.
Ещё одной существенной причиной популярности React является его компонентная модель. Компоненты позволяют разбивать пользовательский интерфейс на независимые фрагменты, подходящие для повторного использования, и рассматривать эти фрагменты как изолированные сущности.
Ниже приведён список из одиннадцати библиотек компонентов, которые пригодятся в работе над React-проектами.
1. React Material-UI
React Material-UI — это набор компонентов React, которые реализуют концепцию Material Design от Google. Если учесть то, что у библиотеки Material-UI более 30 тысяч звёзд на GitHub, она, вероятно, является самой популярной библиотекой для React. Эта библиотека бурно развивается, ожидается выход Material-UI v1.
2. React-Bootstrap
React-Bootstrap — это библиотека React-компонентов, подходящих для повторного использования, которая реализует возможности популярного шаблона Bootstrap от Twitter. На GitHub у неё около 11 тысяч звёзд. Вероятно, широкую популярность она снискала благодаря своей простоте и удобству работы с ней.
3. React Toolbox
React Toolbox — это набор компонентов для React, реализующих спецификацию Google Material Design. Она построена на базе некоторых весьма передовых технологий вроде модулей CSS (тут используется SASS), WebPack и ES6. На сайте библиотеки можно найти интерактивную песочницу, в которой с ней можно поэкспериментировать.
4. React Belle
React Belle — это набор компонентов React, оптимизированный для работы на мобильных устройствах и на настольных ПК. Стили, имеющиеся здесь, поддаются глубокой настройке, что позволяет как задавать базовые стили для всех компонентов, так и модифицировать стиль каждого конкретного компонента по отдельности. Вот симпатичный пример использования этой библиотеки.
5. React Grommet
React Grommet даёт в распоряжение разработчика обширный набор компонентов, сгруппированных по принципу особенностей их использования. Все они созданы с учётом требований доступности, кросс-браузерной совместимости и поддерживают настройку внешнего вида с помощью тем.
6. Компоненты React от Khan Academy
Компоненты React, подготовленные силами Khan Academy, выпущены в виде библиотеки компонентов, в которой используется встроенный CSS и имеются комментарии. Отдельные компоненты библиотеки можно установить, воспользовавшись этой подборкой, созданной средствами Bit.
7. Material Components Web
Material Components Web — это библиотека, которая разработана командой инженеров и UX-дизайнеров из Google. Входящие в неё компоненты позволяют организовать рабочий процесс, на выходе которого можно ожидать появления привлекательных и функциональных веб-проектов. Эта библиотека заменила библиотеку react-mdl (которая теперь признана устаревшей) и набрала уже около 7 тысяч звёзд на GitHub.
8. Ant Design
Библиотека для разработки пользовательских интерфейсов Ant Design для React построена с учётом спецификаций Ant Design. Она включает в себя набор компонентов и примеров их использования. Библиотека написана на TypeScript, в ней определены все необходимые типы. Она рассчитана на процесс работы над фронтендом, описываемый схемой NPM + WebPack + dva.
9. Semantic UI React
Semantic UI React — это библиотека, представляющая собой официальный проект интеграции Semantic UI и React. Она имеет почти 5 тысяч звёзд на GitHub, ей пользуются NetFlix и Amazon. Semantic UI даёт разработчику интересный и гибкий арсенал компонентов.
10. Onsen UI
Компоненты Onsen UI доступны в React благодаря привязкам и позволяют создавать гибридные мобильные приложения на базе React и фреймворка Onsen UI. Вклад в этот проект внесли более 80 разработчиков, на GitHub у него около 5.6 тысяч звёзд. Всё это позволяет говорить о том, что на Onsen UI стоит, как минимум, обратить внимание при выборе библиотеки для разработки пользовательского интерфейса.
11. React Virtualized
Проект React Virtualized, набравший около 8 тысяч звёзд на GitHub, представляет собой набор React-компонентов, предназначенных для эффективного рендеринга больших списков и таблиц.
Об отдельных компонентах
Итоги
Всё указывает на то, что в 2018-м продолжится рост популярности React, а это значит, что мы увидим и развитие библиотек компонентов, которые станут строительными блоками множества веб-приложений.
Надеемся, вам пригодятся те библиотеки, о которых мы сегодня рассказали. Однако, React — это далеко не единственный популярный фреймворк. В следующий раз читайте об 11-ти библиотеках для Angular.
Уважаемые читатели! Если вы пользуетесь React, то, наверняка, у вас имеются и личные списки любимых библиотек. Просим ими поделиться.
Топ-13 библиотек компонентов React на 2020 год
Хочешь проверить свои знания по фронтенду?
Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!
Перевод статьи «13 Top React Component Libraries for 2020».
Представляем вам список полезных UI-библиотек React с открытым исходным кодом, которые стоит знать в 2020 году!
1. Rebass
Открывает наш список Rebass — маленькая библиотека UI-компонентов, благодаря которой можно создавать очень мощные наборы примитивных UI-элементов для тем на основе библиотеки Styled System.
Среди ключевых особенностей этой библиотеки стоит отметить следующие:
Если вам нужны какие-то дополнительные доказательства жизнеспособности этой библиотеки компонентов, могу сказать, что она имеет больше 6 тысяч звезд на GitHub и больше 30 тысяч еженедельных загрузок на NPM.
2. Компоненты Ant-design
В отличие от Rebass с ее очень минималистическим набором расширяемых компонентов, Ant-design предлагает полновесный список из больше чем 50 настраиваемых компонентов, которые вы можете использовать для создания прекрасных приложений.
Особенность библиотеки в том, что все ее компоненты базируются на языке дизайна, разработанном создателями этой библиотеки.
Я советую вам почитать их Философию языка дизайна, где объясняются идеи, стоящие за каждым аспектом этих компонентов. Объяснения очень подробные: вы узнаете все «почему» каждого дизайнерского решения (например, расстояний между компонентами, выравнивания текста в пользовательськом input и т. п.).
Этот набор компонентов получил 53 тысячи звезд на GitHub и имеет больше 6 тысяч еженедельных загрузок NPM-версии (эта версия может быть устаревшей, так что по возможности лучше скачивайте напрямую с GitHub).
3. React Bootstrap
Помните старую добрую библиотеку Bootstrap? Это была, собственно, смесь CSS и JS-файлов, позволявшая вам легко добавлять уже подготовленные UI-компоненты.
Так может ли быть лучшее сочетание, чем Bootstrap и React? Эта библиотека заполняет пробел между старым и новым подходом, добавляя мощь React к уже и так мощной библиотеке.
Все, что вы могли делать с Bootstrap, можно делать и с этой библиотекой, с той лишь разницей, что вы будете при этом следовать паттерну React-компонентов.
Если вы поклонник Bootstrap или ищете способ быстро улучшить свои навыки CSS/JavaScript, вам определенно стоит обратить внимание на эту библиотеку. На время написания этой статьи оригинальная библиотека Bootstrap вышла в версии 4.4, а в React Bootstrap используется версия 4.3, так что они не слишком отличаются.
Наконец, о популярности: проект React Bootstrap имеет больше 16,7 тысяч звезд на GitHub и еженедельно скачивается с NPM больше 470 тысяч раз (да, популярная вещица!).
4. Material UI
Ребята из Ant-design создали собственный язык дизайна и реализовали на его основе React-компоненты. Google тоже создала собственный язык дизайна — Material Design, — в основе которого лежат карточки, макеты-сетки и отзывчивые анимации.
Библиотека Material-UI реализует язык дизайна Google, позволяя вам использовать его в React-проектах.
Стоит отметить качество и объем документации этой библиотеки. Вам нужно разобраться, как все работает, а чем больше функционала, тем больше проблем может возникнуть. Так что наличие обширной и хорошо продуманной документации очень важно.
Наконец, эта библиотека не просто дает вам набор инструментов для создания вашего собственного сайта. Она предлагает список тем, из которых вы можете выбирать. Это бывает очень удобно, особенно если вы занимаетесь дизайном фронтенда. Имейте в виду, что некоторые из лучших вариантов не бесплатны, но ничто не мешает вам взять бесплатный вариант и расширить его в нужном направлении.
С учетом всего вышесказанного, не удивительно, что этот проект имеет больше 52 тысяч звезд на GitHub и больше 800 тысяч скачиваний на NPM (в неделю!). Если вы ищете полностью React-совместимую тему для своего сайта, подумайте об этом варианте и попробуйте его, прежде чем принять окончательное решение.
5. React Spinner
Вам случалось слышать фразу «иногда меньше значит больше»? Эта библиотека — прекрасная иллюстрация данной фразы. React Spinner, в отличие от предыдущих вариантов, фокусируется на не общем виде вашего приложения и не на внутреннем дизайне его архитектуры. Вместо этого она заботится об одной-единственной вещи: индикаторах загрузки.
Возможно, это не самый популярный проект в нашем списке, но это хорошая рабочая лошадка. Если вы ищете способ дать понять пользователю, что что-то происходит, эта библиотека предоставляет вам больше 20 индикаторов загрузки, совместимых с React.
С учетом того, что эту библиотеку еженедельно скачивают с NPM около 69 тысяч раз, а на GitHub наградили тысячей звезд, мы можем предполагать, что она не просто полезная, а еще и активно используется сообществом.
6. Semantic UI React
Semantic UI это библиотека на основе jQuery, добавляющая дополнительный функционал в ваш конвейер. Это как Bootstrap, только с фокусом на семантике UI-разработки. Но есть одна проблема: эта библиотека не на 100% совместима с React. Вот здесь и выходит на сцену Semantic UI React.
Эта библиотека содержит длинный список готовых компонентов, разработанных таким образом, чтобы способствовать производству семантически правильного кода.
Оригинальная версия библиотеки работала на основе HTML и CSS с небольшими вкраплениями JavaScript. Вы определяли свои HTML-элементы, задавали подготовленные CSS-классы и вызывали подходящую JavaScript-функцию.
Теперь, благодаря добавленной совместимости с React, вы при помощи JSX-кода напрямую определяете компоненты и связываете их с кодом React Component. То есть, вам не нужно волноваться о выборе правильного элемента и добавлять код: «реактивный» подход все это значительно упрощает.
Библиотека Semantic UI React имеет больше 10,6 тысяч звезд на GitHub, а с NPM ее скачивают больше 100 тысяч раз в неделю.
7. Grommet
Grommet это еще одна библиотека компонентов, призванная помочь вам создавать ваши собственные сайты, просто смешивая и соединяя разные их части. При этом данная библиотека очень сильно фокусируется на отзывчивости и доступности (предлагает клавишную навигацию, теги для скринридеров и т. п.).
И если вы не увлекаетесь дизайном (а это могут сказать о себе многие разработчики, включая меня), вам понравятся design kit и полный комплект значков, поставляемые с этой библиотекой.
Design kit поставляется в разных видах, например, Sketch для MacOS (на картинке снизу), Adobe XD и т. д.
Набор значков полностью можно просмотреть на сайте, а картинка демонстрирует, насколько легко вам будет установить их в своем проекте и добавить в ваш код.
Эта библиотека имеет больше 5,6 тысяч звезд на GitHub. По части NPM-загрузок она, может, и не сравнится с предыдущими библиотеками в нашем списке, но, тем не менее, речь идет о 16 тысячах скачиваний в неделю, а это тоже не мало.
8. Gestalt
Библиотека компонентов Gestalt была разработана Pinterest на основе их внутреннего языка дизайна. Как и Material UI, и Ant-Design, Gestalt была создана для упрощения коммуникации между дизайнерами и разработчиками путем внедрения множества готовых компонентов.
Имейте в виду, эти компоненты не особенно красивы (ну, вы же видели UI Pinterest?). Но это хороший вариант, если вы работаете над прототипом или ищете способ сделать так, чтобы ваши дизайнеры и разработчики начали понимать друг друга.
На GitHub эта библиотека набрала больше 3,3 тысячи звезд, а вот в NPM-сообществе она не столь популярна (800 загрузок в неделю).
9. Fabric React
Еще одна библиотека, созданная одним из крупных игроков рынка. Речь идет о Microsoft. Fabric React может помочь вам в создании Office-подобного пользовательского опыта. Это не значит, что вы будете копировать Office, просто у вас будет доступ к похожему поведению и графике.
Fabric React совместима с десктопами, устройствами Android и iOS, а также используется на таких сайтах как Office 365, OneNote, Azure DevOps и пр.
Опять же, когда дело касается библиотек компонентов React, есть определенный смысл в использовании тех из них, которые следуют какому-то языку дизайна (в данном случае — язык дизайна Microsoft Office), потому что такой дизайн имеет сильную логику. В общем, если вы хотите создать веб-приложение с пользовательским интерфейсом, похожим на Office, обратите внимание на эту библиотеку.
Что касается популярности, Fabric React не дотягивает до «звездных деток», но показывает вполне достойные результаты: больше 6,2 тысячи звезд на GitHub и 77 тысяч скачиваний в неделю с NPM.
10. OnsenUI
Onsen это библиотека компонентов с фокусом на mobile-first дизайн. Отличительная особенность этой библиотеки в том, что она написана на чистом JavaScript и не привязана к какому-то фреймворку. Другими словами, это не React-библиотека в строгом смысле; потенциально ее можно использовать с любыми другими UI-фреймворками.
Если вы хотите создать приложение в стиле mobile-first, подумайте об использовании OnsenUI. Эта библиотека даст вам возможность создать надежный UI с минимальными усилиями, причем вы получите совместимость с основными платформами просто «из коробки».
В отличие от других библиотек в списке, Onsen UI в большей степени популярна на NPM (больше 12 тысяч скачиваний в неделю), чем на GitHub (больше 7,8 тыс. звезд).
11. React Virtualized
Подобно проекту React Spinner, React Virtualized предназначен для решения одной-единственной проблемы: эффективного рендеринга списков и табличных данных на странице. Я знаю, что вы думаете: «А что, так сложно отобразить таблицу? Или простой выпадающий список?» Но что, если в вашем выпадающем списке больше тысячи элементов, а в таблице — больше сотни столбцов?
Этот проект как раз и призван решить проблему подобных edge cases.
На сайте проекта вы найдете простую, но мощную демку, с которой стоит повозиться, чтобы понять, насколько полезной может быть эта библиотека. Поменяйте число столбцов, добавьте побольше элементов в списки, и вы увидите, насколько легко демо адаптируется. После этого задумайтесь, сколько кода вам пришлось бы написать, чтобы добиться такой же гибкости списков, — и скачайте React Virtualized.
Этот проект набрал больше 17,5 тыс. звезд на GitHub и еженедельно скачивается с NPM около 460 тысяч раз. В общем, на эту библиотеку стоит обратить внимание.
12. Blueprint
Помните, я говорил, что OnsenUI это библиотека компонентов, следующая подходу mobile-first? Так вот — о Blueprint этого точно не скажешь. Как справедливо отмечено на сайте проекта, он фокусируется на разработке десктопных приложений, требующих обработки большого объем данных и запускающихся в современных браузерах (к которым зачем-то причислен IE11).
С этой библиотекой вы получаете доступ к компонентам для выбора даты и времени, к таблицам с высокой интерактивностью (здесь вспоминаем об обработке больших объемов данных) и к хосту с более чем 300 значками для всех ваших графических нужд.
Библиотека Blueprint создана командой Palantir. Эта компания фокусируется на создании способов легкого взаимодействия пользователей с данными, так что понятно, почему ее библиотека имеет именно такую направленность.
Имейте в виду, что если вы создаете приложение, требующее обработки больших объемов данных, использование чего-то вроде React Virtualized поможет вам в отображении этих данных, но если вам нужно нечто большее, лучше подумайте о Blueprint.
На GitHub этот проект набрал больше 15 тысяч звезд, так что он определенно пользуется популярностью. Количество скачиваний с NPM тоже впечатляет — больше 100 тысяч в неделю.
13. React Desktop
Наконец, закрывая обзор лучших библиотек компонентов React на 2020 год, я хотел бы рассказать о React Desktop. Этот проект занимает уникальное положение в нашем списке, поскольку он единственный пытается подражать десктопному опыту в вебе.
Посмотрите на скриншоты и вы поймете, что я имею в виду (компоненты используются одни и те же).
Как видите, при помощи этой библиотеки вы можете идеально воспроизвести десктопный опыт, используя JavaScript. А это значит, что вы сможете создавать настоящие десктопные приложения, используя Electron.js или же просто добавлять интересные эффекты в ваши веб-приложения (эти примеры лучше всего работают в Chrome, так что используйте именно этот браузер для тестирования).
GitHub-репозиторий этого проекта имеет больше 8,5 тыс. звезд, а это просто потрясающе для инди-разработки. Но, несмотря на все эти звезды, количество скачиваний незаслуженно низкое — чуть больше 600 в неделю.