Лучшие библиотеки React

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

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

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

React Query

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

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

React Query может помочь вам сократить код, который вы пишете при выполнении сетевых запросов с помощью React. Весь этот код React, который нам приходилось писать раньше, можно заменить хуком useQuery. Из него мы получаем все данные, которые нам нужны, без необходимости объявлять переменную состояния:

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

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

Ant Design

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

Существует множество библиотек компонентов, но немногие из них столь же сложны и хорошо спроектированы, как Ant Design. Если вы можете придумать тип компонента, который нужно включить в интерфейс и дизайн вашего приложения React, у Ant Design почти наверняка он есть:

Использование библиотеки компонентов, такой как Ant Design, ускоряет время разработки за счет уменьшения количества зачастую ненадежных стилей, которые нам приходится писать самостоятельно.

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

Если вы думаете о создании приложения сегодня и ищете надежную библиотеку компонентов, выбирайте Ant Design. В нем есть практически все функции, которые вам могут понадобиться из библиотеки компонентов, а также отличная настраиваемость, которая обслуживает любую функцию приложения, которую вы могли бы рассмотреть.

Zustand

Когда дело доходит до управления состоянием, разработчикам React часто предоставляется два знакомых выбора: Redux или React Context.

Redux - это сторонняя библиотека, которую разработчики React используют для управления состоянием. Но с появлением React Context в React версии 16 у нас появился более простой способ управлять состоянием, передавая его по дереву компонентов.

Если вы ищете библиотеку со всей функциональностью и мощью Redux, с простотой React Context, обратите внимание на библиотеку Zustand. Начать работу с ней невероятно легко, как вы можете видеть в примере ниже:

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

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

Попробуйте Zustand в следующий раз, когда вы будете искать более сложное решение состояния, такое как Redux, для своего приложения - оно вам понравится.

React Hook Form

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

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

Он контролирует внутреннее управление состоянием нашей формы, дает нам простых помощников для отображения ошибок для соответствующего ввода и применяет правила проверки без каких-либо внешних библиотек, таких как Yup, - наряду с обработкой отправки нашей формы:

Когда дело доходит до создания функциональных форм, вам нужна библиотека, которая проста в использовании и не добавляет слишком много кода к вашим компонентам. Согласно этим двум критериям, React Hook Form, возможно, является лучшей библиотекой форм React.

React Responsive

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

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

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

Чтобы любые приложения React реагировали без использования CSS, обязательно ознакомьтесь с библиотекой React Responsive.

Комментарии ()

    Написать комментарий