Без этих библиотек компонентов React проекты не были бы такими же. Не знаю, что бы я без них делал! Их так много, и я взволнован каждый раз, когда сталкиваюсь с новой, которая делает мое время разработки более эффективным, а мой проект более стильным. Вот мои любимые, обязательные библиотеки React, которые я использовал в 2021 году!
1. Материальный интерфейс
Material UI - одна из самых популярных библиотек компонентов React UI, если не самая популярная среди разработчиков. Он построен с использованием Google Material Design и имеет множество готовых компонентов React с изящным и простым дизайном элементов. Он позволяет легко интегрировать высококачественный внешний вид в наше приложение React. У них также есть предварительно созданные темы, если вы хотите, чтобы ваше приложение работало быстро, не тратя слишком много времени на стилизацию отдельных компонентов.
GitHub ⭐️: 68,4 КБ
Документация: Material-UI
Установка (npm): npm install @ material-ui / core
2. React Bootstrap
Bootstrap - одна из лучших библиотек пользовательского интерфейса, а React Bootstrap - специально для тех случаев, когда вы хотите использовать компоненты начальной загрузки с помощью React. Существует множество готовых компонентов React, убирающих сторонние библиотеки, которые могут вам не понадобиться, если вы используете только Bootstrap. Существует множество элементов как для веб-приложений, так и для мобильных приложений, что дает вам возможность использовать множество адаптивных веб-компонентов.
GitHub ⭐️: 19,4 КБ
Документация: React Bootstrap
Установка: npm install response-bootstrap
3. Чакра UI
Пользовательский интерфейс Chakra - это то, что мне нужно в библиотеке, если я в затруднительном положении, поскольку его гораздо проще использовать и просматривать документацию, чем в некоторых других библиотеках. Модульные и доступные компоненты пользовательского интерфейса упрощают стилизацию. Отлично для новичков!
GitHub ⭐️: 18,2 КБ
Документация: Chakra-UI
Установка: перейдите сюда, чтобы установить
4. Пользовательский интерфейс семантического реагирования
Semantic React UI - еще одна отличная библиотека для стилизации элементов. В этой библиотеке нет сторонних библиотек, таких как jQuery, которые есть в Semantic UI, поэтому лучше использовать для приложений React. Вы можете легко создавать стили и адаптивный веб-дизайн с настраиваемыми элементами.
GitHub ⭐️: 18,2 КБ
Документация: Semantic-UI React
Установка: npm install semantic-ui-react semantic-ui-css
5. Иконки React
Это моя любимая иконка. Существует такая большая библиотека разных стилей, между значками Bootstrap, значками Material Design, Font Awesome и многим другим. Очень простой в использовании, и вы можете легко искать в их библиотеке с их простым макетом, без необходимости переходить на разные страницы.
GitHub ⭐️: 6.3k
Документация: React-Icons
Установка: используйте ссылку выше
6. Анимация при прокрутке (AOS)
Анимируйте элементы на странице при прокрутке. Вы можете контролировать продолжительность, направление прокрутки, анимацию задержки и многое другое.
GitHub ⭐️: 16,6 КБ
Документация: AOS
Установка: используйте ссылку выше
7. faker.js
Faker - такой удобный инструмент для разработчиков. Вместо того, чтобы тратить время на попытки вручную придумать электронные письма, адреса, названия компаний, даже изображения или продукты для магазина электронной коммерции для базы данных вашего приложения, faker может помочь предоставить вам все поддельные данные, необходимые для вашего приложения. Просто ознакомьтесь с их документацией, чтобы увидеть различные типы данных и методы API, которые вы можете использовать. Ниже я выбрал аватарки фейкеров для отображения в комментарии к блогу.
GitHub ⭐️: 32,1 КБ
Документация: faker.js
Установка: npm install faker
8. Графики React
Это отличный ресурс, когда вам нужно добавить в проект диаграммы и графики. Они гибкие, вы можете настраивать их, и это позволяет вам динамически отображать ваши данные.
GitHub ⭐️: 1,4 КБ
Документация: React Charts
Установка: нажмите здесь для получения руководства по установке
9. React-Router-Dom
Очевидный must-have в проектах, когда вам нужна декларативная маршрутизация в React.
GitHub ⭐️: 43,2 КБ
Документация: React Router Dom
Установка: npm install response-router-dom
10. React-Hook-Form.
Форма крючка React - спасение жизни, если формы всегда были проблемой для вас в ваших приложениях React. Эта библиотека помогает создавать формы с включенной проверкой и правильными сообщениями об ошибках, вы пишете меньше кода, удаляете ненужные повторные отрисовки, и все работает быстрее. Почему я не знал об этом во время моего последнего проекта? !! Форма была моим кошмаром! Супер классные демонстрации на их веб-сайте по сравнению с React-Hook-Form и Controlled Forms. См. Один ниже.
GitHub ⭐️: 20,9 КБ
Документация: React Hook Form
Установка: npm install response-hook-form
Заключение
Существует масса потрясающих и мощных библиотек и фреймворков React. Это не полный список, и это только те, которые я пробовал лично до сих пор. Какие ваши любимые библиотеки React? Есть ли какие-нибудь новые и интересные, которые мне стоит попробовать? Дайте мне знать в комментариях! Удачного кодирования!
Больше контента на plainenglish.io
