7 библиотек React, которые вы должны знать

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

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

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

1. Пользовательский интерфейс React Material

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

2. React Bootstrap

React Bootstrap предоставляет компонентную структуру для Bootstrap, перестроенную для компонентов React. Bootstrap, вероятно, является самым популярным UI-фреймворком в мире, и сочетание его дизайна с мощью компонентов React ... ну, разве это не все, о чем мы можем просить?

3. React Belle

React Belle предлагает прекрасный набор настраиваемых компонентов, включая Toggle, ComboBox, Rating, TextInput, Button, Card, Select и другие. Эта структура гордится тем, что делает компоненты оптимизированными как для настольных компьютеров, так и для мобильных устройств, обеспечивая при этом высокий уровень реконфигурируемости стилей.

4. Панель инструментов React

React Toolbox - популярная библиотека, содержащая компоненты на основе материального дизайна. Он построен на основе самых модных предложений, таких как модули CSS (написанные на SASS), Webpack и ES6. Библиотека гармонично интегрируется с вашим рабочим процессом Webpack, она легко настраивается и очень гибкая. Несмотря на то, что они включают примерно 10 видов компонентов, конфигурация делает их отличной площадкой для создания отличного пользовательского интерфейса.

5. React Grommet

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

6. Семантический интерфейс

React Semantic UI - это официальная интеграция React для Semantic UI. Semantic - это среда разработки, которая помогает создавать красивые, гибкие макеты с использованием удобного для человека HTML. Он позволяет управлять отображаемым тегом HTML или отображать один компонент как другой компонент. Дополнительные свойства передаются компоненту, который вы визуализируете как . Вы можете составлять компоненты и реквизиты без добавления дополнительных вложенных компонентов. Это важно для работы с MenuLinks и response-router .

7. Реагируйте с помощью Bit

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