Как использовать jQuery в вашем приложении React | Маниш Мандал | How To React
Как использовать jQuery в вашем приложении React | Маниш Мандал | Как реагировать | MediumОпубликовано в
·
2 мин чтения
·
25 апреля 2020 г.
. Когда я был новичком в React, я хотел знать, как я могу использовать jQuery в своем приложении для реагирования. Я проверил множество руководств, доступных в Интернете, о том, как мы можем использовать jQuery в реагирующем приложении, некоторые из них были просты для понимания, а некоторые просто вводили в заблуждение. Сегодня я покажу, как вы можете легко использовать jQuery для управления DOM в вашем приложении для реагирования.
- jQuery
- Перейдите в корневой каталог вашего проекта реакции и откройте терминал, чтобы установить jQuery, используя приведенную ниже команду.
npm install jquery --save
2.
Теперь откройте проект в вашей любимой IDE и импортируйте jquery в файл, в котором вы хотите манипулировать DOM.
import $ from 'jquery'
3. Теперь создайте функцию и поместите код jquery внутрь этой функции. Для целей этого руководства я создал текст и кнопку lorem ipsum и буду использовать jQuery CSS API, чтобы изменить цвет текста lorem ipsum, нажав на эту кнопку.
4. Теперь вызовите эту функцию внутри метода жизненного цикла componentDidMount .
5. Готово. Теперь запустите приложение React в браузере для проверки.
Вот живой пример и репозиторий git
Mediumtutorial/medium-jquery
Этот проект был загружен с помощью приложения Create React. В каталоге проекта вы можете запустить: Запускает приложение в…
github.com
Jquery
JavaScript
Автор Manish Mandal
744 подписчиков
·Редактор для
Full Stack Developer | Реагировать JS | Следующий JS | узел JS | Вью JS | Вордпресс.
Свяжитесь со мной https://www.linkedin.com/in/manishmandal21/
Еще от Manish Mandal и How To React
Manish Mandal
в
Использование файла .env в React js
Сегодня мы узнаем, как использовать файл .env в нашем проекте react js. Если вы используете какие-то внешние API для данных, вы должны использовать файл .env…
3 минуты чтения · 1 сентября 2020 г.
Manish Mandal
in
Различные способы перебора массивов и объектов в React
Если мы работаем над каким-либо Re act мы должны играть с массивами и объекты для данных. Массивы используются для хранения нескольких данных в…
6 мин чтения · 5 октября 2020 г.
Manish Mandal
в
Config Eslint и Prettier в Visual Studio Code для разработки React js
Я пришел с учебным пособием, которое охватывает настройку Eslint и Prettier в коде Visual Studio для разработки React js.
Ошибки…4 минуты чтения · 9 ноября 2020 г.
Manish Mandal
in
Как анализировать или читать файлы CSV в ReactJS
9004 1 В этой статье я научу вас анализировать или читать CSV-файлы в ReactJS самым простым способом. Когда вам нужно извлечь данные из…
2 мин чтения·11 марта 2022 г.
Просмотреть все от Manish Mandal
Рекомендовано от Medium
Reed Barger
в
7 проектов React для начинающих в 2023 году (+ код)
900 41 Вы готовы приступить к созданию простых проектов с помощью React, но вы не знаете, что делать. С чего начать?
·6 минут чтения·11 января
The PyCoach
в
Вы используете ChatGPT неправильно! Вот как опередить 99% пользователей ChatGPT
Освойте ChatGPT, изучив технику быстрого доступа.
·7 мин чтения·17 марта
Christopher Clemmons
in
Создавайте компоненты React как старший разработчик
Создание повторно используемых компонентов в React может значительно улучшить эффективность и ремонтопригодность вашей кодовой базы.
Создавая компоненты, которые…·4 минуты чтения·28 декабря 2022 г.
Кристофер Клеммонс
в
9 вопросов для собеседования, которые должен знать каждый старший разработчик React
Как разработчик React, вы в конечном итоге испытаете желание сделать следующий большой шаг к старшей роли. Многие из нас застряли, как…
· 8 минут чтения · 4 января
Philosophical Techie
9 проектов, которые помогут вам стать мастером интерфейса в 2023 году
Неважно, с чего вы начинаете, ли вы новичок или ветеран отрасли, постоянно обновляющий новые концепции, языки и…
·5 минут чтения·3 фев. Убедитесь, что вы знаете их все! 17 декабря 2022 г. 2 Аканде Олалекан Тохиб
Бесплатный курс собеседования по проектированию систем
Многие кандидаты отклоняются или понижаются в рейтинге из-за плохой успеваемости на собеседовании по проектированию систем.
Выделитесь на собеседованиях по проектированию систем и получите работу в 2023 году благодаря этому популярному бесплатному курсу.
jQuery — широко используемая библиотека JavaScript. Благодаря своему синтаксису манипулирование DOM упрощается, что ускоряет разработку.
Чтобы использовать jQuery, на него должна быть ссылка в файле HTML, а его синтаксис должен быть объявлен в файле javascript.
Есть два способа включить jQuery в HTML-файл проекта:
Примечание:
Рекомендуется работать с последней версией jQuery (версия 3.6.3), чтобы получить доступ ко всем функциям.
- Загрузите последнюю версию библиотеки jQuery из jQuery и включите ее в тег заголовка следующим образом:
<голова>
Использовать CDN. jQuery CDN можно найти здесь. Включить CDN в
заголовоктег следующим образом:Примечание: A CDN (сеть доставки контента) — это распределенная сеть серверов, которая предоставляет контент пользователям в зависимости от их географического положения, обеспечивая высокую доступность и производительность.
CDN кэшируют и распределяют контент, такой как изображения, видео, аудиофайлы и другие статические или динамические веб-ресурсы, на несколько пограничных серверов, расположенных ближе к конечным пользователям, что снижает требования к задержке и пропускной способности для доставки контента из центрального местоположения. Это помогает улучшить взаимодействие с пользователем и обеспечить более стабильную производительность онлайн-контента и приложений.
CDN кэшируют и распределяют контент, такой как изображения, видео, аудиофайлы и другие статические или динамические веб-ресурсы, на несколько пограничных серверов, расположенных ближе к конечным пользователям, что снижает требования к задержке и пропускной способности для доставки контента из центрального местоположения. Это помогает улучшить взаимодействие с пользователем и обеспечить более стабильную производительность онлайн-контента и приложений.<голова>
После ссылки на библиотеку jQuery в файле HTML она будет доступна во всем проекте. Давайте объявим синтаксис jQuery в JavaScript.
Пример
Объяснение
Приведенный выше код использует CDN jQuery для рендеринга jQuery в файле разработки. См. строка 4 вкладки HTML.
Вот объяснение вкладки JavaScript:
Строка 1 : Файл начинается с
＄(document.
