В своей предыдущей статье я поделился 20 пакетами для React.js. Если вы не читали ее, посмотрите Лучшие пакеты NPM для React.js часть -1, а затем продолжите эту статью.
React front-end Design & Development для некоторых важных пакетов «npm», которые будут играть очень полезную роль в вашей повседневной работе. Эти пакеты широко используются, и они сыграют большую роль в облегчении вашей работы.
A. Html-react-parser:
Когда мы пишем блоги, мы должны публиковать их из бэкенда или панели администратора. Однако, когда мы создаем посты, они хранятся в базе данных как обычный текст, но если мы используем этот плагин, вся структура HTML будет храниться в базе данных. Это означает, что мы можем отправлять полный html через этот плагин.
Пример: parse('<h1>single</h1>'); То есть, мы получим вывод вот так <h1>single</h1>, Еще один будет полностью сохранен в базе данных.
- https://www.npmjs.com/package/html-react-parser
B. Axios:
Это популярный плагин для приема HTTP клиентов. Обычно на клиентском сайте нам приходится работать с API. Обязательно нужно использовать API для загрузки данных. Но в начале мы используем fetch (). Но самое интересное, что этот плагин настолько прост, что вы можете загрузить API очень быстро.
Пример:
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
- https://www.npmjs.com/package/axios
C. React-share:
В различных записях блога мы можем видеть внизу или вверху. В некоторых социальных сетях есть система совместного доступа. При желании мы можем сделать такое действие через этот плагин. Функция этого плагина — связь с социальными сетями, то есть, если вы хотите поделиться своим постом в социальных сетях, вы можете сделать это через этот плагин.
- https://www.npmjs.com/package/react-share
D. Export-from-json:
Обычно используется для экспорта json-файлов. Экспорт в обычный текст, css, html, json, csv, xls, xml файлы из JSON. Если вам нужно экспортировать из JSON файла в обычный текст, css, html, json, csv, xls, xml файлы, то вы можете использовать его.
- https://www.npmjs.com/package/export-from-json
E. EmailJS:
Обычно мы обмениваемся информацией в списке контактов. Система коммуникации начинается со списка контактов, и вы можете сделать систему коммуникации очень простой с помощью этого плагина, что означает, что вы можете легко получить файлы из списка контактов по электронной почте с помощью этого плагина.
- https://www.emailjs.com/docs/examples/reactjs/
F. Progressbar:
Чаще всего мы видим Progressbar в дизайне сайта, Progressbar — это некий символический дизайн, который показывает, сколько знаний он приобрел по какому-либо вопросу или всю информацию компании. Вы можете создать свой собственный дизайн с помощью плагинов.
- https://www.npmjs.com/package/react-circular-progressbar
- https://www.npmjs.com/package/@ramonak/react-progress-bar
- https://www.npmjs.com/package/react-customizable-progressbar
- https://github.com/kimmobrunfeldt/progressbar.js…
- https://www.npmjs.com/package/react-progressbar-fancy
- https://kimmobrunfeldt.github.io/progressbar.js/
G. Редактор насыщенного текста:
Rich Text Editor — это инструмент, который позволяет добавлять или редактировать содержимое, изображения, ссылки и другие компоненты на странице без необходимости знать какой-либо код. Он отображает содержимое и любое форматирование так, как оно отображается в браузере. Эти плагины связаны с html-react-parser.
- https://ckeditor.com/…/latest/guide/dev_react_v2.html
- https://www.npmjs.com/package/quill
H. React-tabs:
Я не могу без него. Мне приходится использовать этот плагин на каждом сайте, который я создаю. Одним словом, необыкновенный. Я даже создал меню/навбар с помощью этого плагина. Однако и в других фреймворках есть похожие дизайны, например, вкладка Bootstrap, но я поставлю этот плагин React-tabs на первое место.
- https://www.npmjs.com/package/react-tabs
I. Эффект прокрутки:
Эти плагины весьма полезны для CSS-дизайна. Эти плагины позволяют вносить ряд изменений по мере прокрутки вашего сайта.
- https://www.npmjs.com/package/react-scroll-parallax
- https://www.npmjs.com/package/react-custom-scroll (Этот плагин можно использовать для изменения дизайна полосы прокрутки в правой части браузера)
- https://www.npmjs.com/package/react-infinite-scroller
- https://www.npmjs.com/package/react-custom-scrollbars
J. React Date Picker:
Услышав название, можно понять, что это может быть за работа. Простой и многократно используемый компонент Datepicker для React. Много раз нам может понадобиться подсчитывать даты на сайте. Вы можете легко подобрать время с помощью этого плагина. Очень популярный плагин, который широко используется.
- https://www.npmjs.com/package/react-datepicker
- https://www.npmjs.com/package/react-datetime
- https://www.npmjs.com/package/react-date-range
K. React-select:
Это очень продвинутая тема. Обычно существует тег под названием html select. Который используется для выбора. Однако w3school на этом сайте (https://www.w3schools.com/tags/tag_option.asp) очень нормальный, но если вы хотите получить некоторые возможности заранее, то этот пакет npm React-select — не вариант. Немного сложный, однако, если вы хорошо прочитаете их документацию, вы сможете легко его использовать.
Последние 2 дня у меня было много проблем с использованием этого пакета, но я не сдавался и, потратив около 14 часов, решил проблему. Я сказал, что вы должны хорошо прочитать документацию. Я читал документацию строка за строкой в течение долгого времени, а затем привел коды в надлежащее состояние.
- https://www.npmjs.com/package/react-select
L. React-accessible-accordion:
Услышав название Accordion, вы понимаете, что он делает. Я нажимаю на текст или иконку, и тут же раздел внизу выдает какую-то информацию, затем я нажимаю на эту иконку, и она закрывается. Haзывается Accordion. Вы можете использовать Bootstrap или любой другой фреймворк, который у вас есть, но мне очень нравится этот плагин. Я также использовал его на некоторых сайтах.
- https://www.npmjs.com/package/react-accessible-accordion
- https://www.npmjs.com/package/react-collapsible
- https://www.npmjs.com/package/rc-collapse
M. React Visibility Sensor:
это очень продвинутая тема. Но ее очень легко понять. За последние два месяца я приобрел четыре шаблона react на Themeforest исключительно в исследовательских целях. И самый интересный пакет, который я видел, — этот. Его функция — компонент Sensor для React, который уведомляет вас, когда он входит или выходит за пределы области просмотра окна.
Это означает, что после загрузки всей вашей веб-страницы задача будет ждать вас, пока вы не перейдете к определенному разделу. Предположим, вы создадите на своем сайте раздел под названием Counter, и там будет вестись подсчет от одного до ста при перезагрузке данных или сайта. Но вы заметите одну вещь: если ваш раздел счетчика находится в нижнем колонтитуле, то вы увидите в нижнем колонтитуле, что счетчик 100 заполнен. Вы больше не увидите, что счетчик равен 100. И поэтому функция этого плагина React Visibility Sensor заключается в том, что счетчик не будет считаться, пока вы не перейдете в этот раздел. Как только вы увидите этот раздел или эту секцию на вашем мониторе, счетчик начнет отсчет. Другими словами, вращая скролл мыши, вы начнете считать от одного до ста, как только перейдете к секции счетчика.
Пример: http://met-cifo.amitjs.com/about-us
- https://www.npmjs.com/package/react-visibility-sensor
N. React Hook Form:
Очень популярным плагином является React Hook Form (исполняемые, гибкие и расширяемые формы с простой в использовании валидацией). При работе с формами нам приходится создавать много обязательств, и этот плагин очень поможет вам в этом. У этого плагина очень простая структура и большая популярность. Он может работать как с react web, так и с react native.
- https://react-hook-form.com
O. React-helmet:
Этот плагин очень популярен для динамической установки метаданных. Я использую этот плагин на каждом сайте.
Пример: http://met-cifo.amitjs.com/ (Если вы наведете курсор на favicon каждой страницы этого сайта, вы увидите, что метаданные отображаются отдельно на каждой странице).
- https://www.npmjs.com/package/react-helmet
P. React-image-magnify:
Когда мы посещаем сайт электронной коммерции и наводим курсор мыши на товар, товар увеличивается и масштабируется. Это можно сделать с помощью плагина React-image-magnify. Однако его настройка немного сложна, поэтому внимательно изучите документацию.
- https://www.npmjs.com/package/react-image-magnify
Q. React-modal:
Нажал на иконку и появилось всплывающее окно. Это означает, что данный плагин можно использовать для создания всплывающих моделей.
- https://www.npmjs.com/package/react-modal
R. Countdown:
Используется обратный отсчет. На сайте мы обычно видим некоторую информацию, называемую счетчиком, которая в основном показывает, сколько людей работает в компании, или сколько человек в компании, или сколько проектов было завершено. Такая информация представляется с помощью дизайна. Предположим, вы завершили проект, теперь ваш дизайн будет рассчитываться от 1 до 100. Вы можете сделать это, следуя приведенным ниже плагинам.
- https://www.npmjs.com/package/react-countdown
- https://www.npmjs.com/package/use-react-countdown
- https://www.npmjs.com/package/react-countdown-circle-timer
S. Table:
Таблица — очень полезный тег. Когда у нас в руках много данных, нам приходится прибегать к помощи таблиц, чтобы показать эти данные. Если вы хотите, вы можете создать и использовать обычный формат таблицы в w3schools. Опять же, если вы хотите что-то продвинутое, то вы можете использовать этот плагин, я лично использую эти плагины.
- https://www.npmjs.com/package/react-table
- https://www.npmjs.com/package/rc-table
T. React Rating:
Нам часто приходится использовать рейтинги для создания разделов отзывов. Вы можете создавать рейтинги очень красиво с помощью этих плагинов, представленных ниже. Используя эти плагины, вы можете настроить дизайн по своему вкусу.
- https://www.npmjs.com/package/react-rating
- https://www.npmjs.com/package/react-simple-star-rating
- https://www.npmjs.com/package/react-rating-stars-component
- https://www.npmjs.com/package/react-star-ratings
U. Эффект печатной машинки:
Различные тексты показывают, что некоторые тексты танцуют и исчезают. Да, это так называемый эффект пишущей машинки. Вы можете легко создавать текстовые эффекты с помощью этих плагинов, приведенных ниже.
- https://www.npmjs.com/package/typewriter-effect
- https://www.npmjs.com/package/react-simple-typewriter
Подведение итогов
Надеюсь, вам понравилась статья, если да, то не забудьте нажать ❤️ и Подписаться. Вы также можете добавить ее в закладки для дальнейшего использования. Было интересно создавать эту статью, и если у вас есть какие-либо вопросы или предложения, не стесняйтесь, пишите их. До встречи.
Вы можете выразить свою поддержку, поставив мне звезды на GitHub Profile.😊👇
G i t h u b
P o r t f o l i o
Л и н к е д и н
Поддержать
Купите мне кофе
#мухаммадасиф #вебразработчик #бангладеш