Это пятый день моего участия в ноябрьском испытании обновлений, подробности о мероприятии:Вызов последнего обновления 2021 г.
Недавно я увидел несколько практичных библиотек инструментов React, обобщил их и поделился с вами, чтобы не повторять колесо. Надеюсь, это поможет вам~
1. Основы
1. React Infinite Scroller
React Infinite Scroller используется для бесконечной прокрутки загружаемого контента в проектах React.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
2. react-dnd
React DnD — это набор компонентов React более высокого порядка, созданный основным автором React и Redux Дэном Абрамовым, чтобы помочь создавать сложные интерфейсы перетаскивания, сохраняя при этом отдельные компоненты. В основном используется для перетаскивания компонентов.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
3. react-beautiful-dnd
react-beautiful-dnd — красивая и простая в использовании библиотека React для перетаскивания списка.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
4. react-icons
Используйте значки реагирования, чтобы легко включать популярные значки в свои проекты React.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
5. react-share
react-share — это кнопка «поделиться» в социальных сетях и библиотека подсчета репостов для React.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
6. create-react-app
Create React App — это инструмент с интерфейсом командной строки, который позволяет быстро создавать и запускать приложения React без какой-либо настройки.
адрес нпм:woohoo. эта лошадь plus.com/package/пока горячо…
7. react-intl
React Intl предоставляет компонент React и миксин для интернационализации веб-приложений React. Он содержит описание отформатированных дат, чисел и строковых сообщений.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
8. react-router
react-router — это решение для маршрутизации для React.js. Он легко синхронизирует ваше приложение и URL-адреса, обеспечивая при этом первоклассную поддержку вложения, преобразования и рендеринга на стороне сервера.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
9. React Virtualized
react-virtualized — это адаптивный компонент, который эффективно отображает большие списки и табличные данные и может использоваться для решения проблем с отображением длинных списков.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
2. Управление статусом
1. redux
Redux — это контейнер состояния JavaScript, обеспечивающий предсказуемое управление состоянием. Позволяет создавать согласованные приложения, которые работают в разных средах (клиент, сервер, собственные приложения) и легко тестируются.
адрес нпм:Ууууу, эта лошадь plus.com/package/hotspots…
2. react-redux
Официальная библиотека привязки React, предоставленная Redux. Эффективный и гибкий.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
3. MobX
MobX — это проверенная библиотека, которая делает управление состоянием простым и прозрачным для масштабируемых приложений с помощью функционального реактивного программирования (TFRP).
адрес нпм:Уууу, эта лошадь плюс .com/package/templates…
4. redux-saga
redux-saga — это библиотека для управления побочными эффектами приложения (побочными эффектами, такими как асинхронная выборка данных, доступ к кешам браузера и т. д.), ее цель — упростить управление побочными эффектами, повысить эффективность выполнения, упростить тестирование и упростить обработку сбоев. .
адрес нпм:Ууууу, эта лошадь plus.com/package/hotspots…
5. redux-thunk
Промежуточное ПО Thunk для Redux.
адрес нпм:Ууууу, эта лошадь plus.com/package/hotspots…
3. Компоненты
1. Ant Design
antd — это библиотека компонентов пользовательского интерфейса React, основанная на системе проектирования Ant Design, которая в основном используется для разработки продуктов среднего и внутреннего уровня на уровне предприятия.
Адрес официального сайта:ant.design/index-cn
2. React Select
React Select — это готовый элемент управления Select.
Адрес официального сайта:react-select.com/home
3. React Hot Toast
React Hot Toast — популярная библиотека уведомлений с множеством стилей для уведомлений.
Адрес официального сайта:react-hot-toast.com/
4. React Content Loader
React Content Loader можно использовать для создания компонентов-заполнителей для загрузки списка.
Адрес официального сайта:skeletonreact.com/
5. Sweet Alert
Sweet Alert — это всплывающий компонент, который содержит множество стилей всплывающих окон.
Адрес официального сайта:sweetalert.js.org/
6. draftjs
Draft JS — это библиотека текстового редактора с расширенным форматированием. Может быть легко интегрирован в приложения React.
Адрес официального сайта:draftjs.org/
7. react-slick
React Slick — это карусельный компонент React.
Адрес официального сайта:react-slick.neostack.com/
8. Material-UI
Material-UI — это простая настраиваемая библиотека компонентов для создания более быстрых, красивых и простых в использовании приложений React.
Адрес официального сайта:Проверьте i.com/this/getting-…
9. react-bootstrap
React Bootstrap — это компонент Bootstrap 4, созданный с помощью React.
Адрес официального сайта:react-bootstrap.github.io/
10. react-custom-scrollbars
react-custom-scrollbars — это библиотека компонентов полосы прокрутки, которая может плавно использовать полосы прокрутки в Интернете и на мобильных устройствах и может быть полностью настроена вами.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
11. react-dropdown
react-dropdown — это простой компонент раскрывающегося списка, вдохновленный react-select.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
12. react-horizontal-scrolling-menu
react-horizontal-scrolling-menu — компонент меню с горизонтальной прокруткой.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
13. react-calendar
react-calendar — это компонент календаря React.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
14. react-datepicker
react-datepicker — это компонент для выбора даты.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
15. react-table
react-table — мощный табличный компонент.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
16. react-awesome-button
react-awesome-button — это библиотека компонентов кнопок.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
17. react-compound-slider
react-compound-slider — это компонент слайдера.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
18. react-checkbox-tree
React-Checkbox-Tree - это компонент флажков.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
19. recharts
recharts — это библиотека диаграмм React.
адрес нпм:Woohoo. Эта лошадь Plus.com/package/zealous…
20. react-modal
react-modal — это библиотека компонентов библиотеки статической анимации.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
21. react-responsive-carousel
react-responsive-carousel — это библиотека компонентов адаптивной карусели.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
22. react-image-lightbox
react-image-lightbox — это библиотека компонентов для отображения изображений.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
23. react-tabs
react-tabs — это компонент вкладок.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
24. rebass
Rebass — это набор инструментов React UI для создания отзывчивых веб-приложений, который имеет более 60 настраиваемых базовых компонентов, а стили разделены без написания собственного CSS.
Адрес официального сайта:rebassjs.org/
25. react-suite
React Suite — это набор библиотек компонентов пользовательского интерфейса корпоративного уровня, созданный для серверной части. Он создан совместно командой HYPERS и командой UX. Он имеет большое количество общих компонентов и функций, а также поддерживает Typescript и Flow и поддерживает рендеринг на стороне сервера.
Адрес официального сайта:rsuitejs.com/
4. Анимация
1. react-spring
react-spring — это библиотека анимации реакции, основанная на spring-физике (физике пружины), эффект анимации более плавный и естественный.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
2. react-motion
react-motion — мощная библиотека реактивной анимации. адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
3. react-transition-group
react-transition-group — это библиотека, предназначенная для анимации.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
4. react-spinner
react-spinner используется для создания компонентов нагрузки.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
5. HTTP
1. Axios
Axios — это HTTP-библиотека на основе обещаний, которую можно использовать в браузерах и node.js.
адрес нпм:Woohoo. Эта лошадь Plus.com/package/asy…
2. apisauce
apisauce — это http-клиент, установленный на axios. Официальное описание: Axios + стандартизированные ошибки + преобразования запроса/ответа.
адрес нпм:Уууу, эта лошадь plus.com/package/API…
3. SuperAgent
SuperAgent — это облегченный Ajax API, который может использоваться сервером (Node.js) клиентом (на стороне браузера). , если вы хотите обрабатывать запросы get, post, put, delete, head, вы можете рассмотреть возможность использования SuperAgent.
адрес нпм:Woohoo. Эта лошадь Plus.com/package/speeddating…
6. CSS
1. styled-components
styled-components могут использовать CSS в коде JavaScript для стилизации компонентов React. Через эту библиотеку можно настроить стиль компонента, она будет оборачивать заданный стиль в компонент, который можно использовать напрямую без сопоставления между компонентом и стилем, то есть это обычный компонент React после создания.
адрес нпм:Woohoo. Эта лошадь Plus.com/package/basking…
2. emotion
эмоция — это эффективный и гибкий CSS в библиотеке JS. Основанный на многих других CSS в библиотеке JS, он позволяет быстро стилизовать ваше приложение, используя стили строк или объектов. Он имеет предсказуемую композицию, чтобы избежать проблем со спецификой CSS.
адрес нпм:woohoo. эта лошадь plus.com/package/demons…
7. Тест
1. @testing-library/react
Библиотека тестирования React добавляет несколько API-интерфейсов на основе библиотеки тестирования DOM, в основном для тестирования компонентов React. Библиотека фокусируется не на внутренней реализации компонента во время использования, а на тестировании. Эта библиотека основана на react-dom и react-dom/test-utils и является облегченной реализацией двух вышеупомянутых.
адрес нпм:Уууу, эта лошадь plus.com/package/@te…
2. Enzyme
Enzyme от airbnb — это инструмент тестирования JavaScript для React, который позволяет вам оценивать, манипулировать и просматривать выходные данные компонентов React.
адрес нпм:woohoo, эта лошадь plus.com/package/enze…
8. Форма
1. react-hook-form
React Hook Form — это высокопроизводительная, гибкая, простая в расширении и использовании библиотека проверки форм для проверки форм React Web и Native.
Адрес официального сайта:react-hook-form.com/
2. Formik
Formik состоит из компонентов React и хуков, имеет встроенные операции управления состоянием для форм, что избавляет нас от необходимости создавать состояние для форм отдельно, в то же время используется Context, что позволяет вкладывать компоненты формы в несколько слоев, и нам больше не нужно передавать их слой за слоем.
адрес нпм:Woohoo. Эта лошадь Plus.com/package/foru…
3. react-use-form-state
react-use-form-state — это небольшой React Hook, который использует собственные элементы ввода формы для упрощения управления состоянием формы.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
Девять, пользовательские крючки
1. use-clippy
Использование-CLIPPY - это пользовательский реактивный крюк, реализованный с помощью Teadercript, который можно использовать для чтения и записи буфера обмена для пользователя.
адрес нпм:Уууу, эта лошадь plus.com/package/use…
2. react-window-communication-hook
react-window-communication-hook обеспечивает связь между контекстами браузера (окнами, вкладками, фреймами).
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
3. react-speech-kit
react-speech-kit — это хук React для распознавания и синтеза речи в браузере. Проще говоря, он может распознавать голос как текст и синтезировать текст в речь.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
4. react-script-hook
react-script-hook — это хук для динамической загрузки (и уведомления при загрузке) внешних скриптов.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...
5. use-mouse-action
use-mouse-action — это библиотека с тремя хуками React для прослушивания событий мыши на элементах или элементах JSX. Включая операции с мышью, события «нажатие мыши», «наведение мыши».
адрес нпм:Уууу, эта лошадь plus.com/package/use…
6. @rehooks/online-status
@rehooks/online-status используется для проверки состояния сети, чтобы определить, подключен ли пользователь к сети.
адрес нпм:Уууу, эта лошадь plus.com/package/@hot…
7. @rehooks/document-title
@rehooks/document-title используется для обновления заголовка страницы (отображается на вкладке браузера).
адрес нпм:Уууу, эта лошадь plus.com/package/@hot…
8. useHooks
Пользовательская библиотека хуков, включая множество практичных хуков.
Адрес официального сайта:usehooks.com/
9. react-hanger
react-hanger — это настраиваемая библиотека React Hooks, которая содержит множество полезных пользовательских хуков.
адрес нпм:Ууууу. Эта лошадь plus.com/package/hot...