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

Давайте приступим к делу без дальнейших церемоний.

1. Создайте приложение React

Создать приложение React — это удобная среда для изучения React и лучший способ начать создание нового одностраничного приложения в React.

Приложение Create React не обрабатывает внутреннюю логику или базы данных; он просто создает конвейер сборки интерфейса, поэтому вы можете использовать его с любым бэкэндом, который хотите. Под капотом он использует Babel и webpack, но вам не нужно ничего о них знать.

Когда вы будете готовы к развертыванию в рабочей среде, запуск npm run build создаст оптимизированную сборку вашего приложения в папке build. Вы можете узнать больше о приложении Create React из его README и Руководства пользователя.

2. Пользовательский интерфейс материала

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

Виджеты Material-UI во многом вдохновлены принципами Google для создания пользовательских интерфейсов. Поэтому разработчикам легко создавать визуально привлекательные приложения.

3. Стилизованные компоненты

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

Помимо улучшенного опыта для разработчиков, styled-components обеспечивает:

  • Автоматический критический CSS: стилизованные компоненты отслеживают, какие компоненты отображаются на странице, и полностью автоматически внедряют их стили и ничего больше. В сочетании с разделением кода это означает, что ваши пользователи загружают наименьшее количество необходимого кода.
  • Нет ошибок в именах классов: styled-components генерируют уникальные имена классов для ваших стилей. Вам никогда не придется беспокоиться о дублировании, перекрытии или орфографических ошибках.
  • Более простое удаление CSS: может быть сложно узнать, используется ли имя класса где-то в вашей кодовой базе. стилизованные компоненты делают это очевидным, так как каждый элемент стиля привязан к определенному компоненту. Если компонент не используется (что может обнаружить инструментарий) и удаляется, все его стили удаляются вместе с ним.
  • Простой динамический стиль: адаптация стиля компонента на основе его свойств или глобальной темы проста и интуитивно понятна без необходимости вручную управлять десятками классов.
  • Простота обслуживания: вам не нужно просматривать разные файлы, чтобы найти стиль, влияющий на ваш компонент, поэтому обслуживание не составит труда, независимо от того, насколько велика ваша кодовая база.
  • Автоматическое добавление префиксов поставщиков: напишите свой CSS в соответствии с текущим стандартом, а остальное пусть настраиваются стилизованными компонентами.

4. МобХ

MobX — это простое, масштабируемое, не требующее шаблонов решение для управления состоянием. Это позволяет вам управлять состоянием приложения вне какой-либо среды пользовательского интерфейса, делая код несвязанным, переносимым и, прежде всего, простым для тестирования.

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

5. Фермент

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

API Enzyme должен быть интуитивно понятным и гибким, имитируя API jQuery для манипулирования и обхода DOM.

6. Редукс

Redux представляет собой автономную библиотеку, которую можно использовать с любым уровнем пользовательского интерфейса или фреймворком, включая React, Angular, Vue, Ember и vanilla JS. Хотя Redux и React обычно используются вместе, они независимы друг от друга.

Если вы используете Redux с какой-либо инфраструктурой пользовательского интерфейса, вы обычно будете использовать библиотеку «привязки пользовательского интерфейса», чтобы связать Redux вместе с вашей инфраструктурой пользовательского интерфейса, а не напрямую взаимодействовать с хранилищем из вашего кода пользовательского интерфейса.

React Redux — это официальная библиотека привязки пользовательского интерфейса Redux для React. Если вы используете Redux и React вместе, вам также следует использовать React-Redux для связывания этих двух библиотек.

7. Реагируйте виртуализированно

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

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