Как использовать jquery в react
How to use JQuery with ReactJS
I’m new to ReactJS. Previously I’ve used jQuery to set any animation or feature that I needed. But now I’m trying to use ReactJS and minimize the use of jQuery.
My Case is:
I’m trying to build an accordion with ReactJS.
My Question:
How can I do this with ReactJS?
10 Answers 10
Yes, we can use jQuery in ReactJs. Here I will tell how we can use it using npm.
step 1: Go to your project folder where the package.json file is present via using terminal using cd command.
Example:
write the below in index.jsx
write the below in index.html
You should try and avoid jQuery in ReactJS. But if you really want to use it, you’d put it in componentDidMount() lifecycle function of the component.
Ideally, you’d want to create a reusable Accordion component. For this you could use Jquery, or just use plain javascript + CSS.
Then you can use it in any component like so:
Step 1:
Step 2:
Somewhere in your project folder
Step 3:
Step 4:
Import the loader into your root file before you import the files which require jQuery
Step 5:
Now use jQuery anywhere in your code:
Earlier,I was facing problem in using jquery with React js,so I did following steps to make it working-
To install it, just run the command
then you can import it in your file like
Based on answer given by @David Joos
since React uses the Virtual DOM to manipulate the DOM nodes on the web page, and most other libraries might do direct DOM manipulation, variable attached to window is not directly available to all components. Thus in every component where jquery is required, a variable(‘$’ to follow the convention) has to set equal to window.$ as shown in step 4
Step 1:
Step 2:
Somewhere in your project folder
Step 3:
Step 4:
Step 5:
Now use jQuery anywhere in your component:
I was tried bellow script and its work fine for me.
You can use JQuery with React without doing:
To do so, you need to go to the root folder where package.json in your terminal and type this command:
Then add this configuration to your webpack.config.js file:
Don’t forget to add Jquery to your vendor bundle like this:
Now you can use jquery without importing it inside your code because that’s what expose-loader does for you.
And to test that it works just fine, add this to any file in your project:
I read a lot about jQuery and ReactJS; they have been always advised to avoid using jQuery in ReactJS apps.
If you want to create an accordion, you can do it with React-Bootstrap: React-Bootstrap Accordion Component
use a style library like bootstrap or MUI to accomplish this. react has react strap, a solid bootstrap/react component package. the style frameworks can both be used but it is not a good practice to mix them. I would recommend using react strap as i believe it has better react components, personal preference.
if you continue in react, you will find that jquery is not the best solution. it may work but since react and jquery are bothing working from the dom (and react manages a shadow dom) you might have issues. someone had mentioned using the react lifecycles to use the library on mount or load. for those of us using the newer functional components & hooks (react 16+ i believe) we can use the useEffect hook to call it on load.
the style and component libraries are best practice. for the same reason you would use formik to manage a form component (to not have to re-create the wheel/form every time) the same is true for the style component libraries.
3.17 Интеграция со сторонними библиотеками
3.17.1 Интеграция с плагинами манипуляции DOM
React не знает об изменениях, внесенных в DOM вне контекста React. Он определяет обновления, основанные на собственном внутреннем представлении, и если одни и те же узлы DOM управляются другой библиотекой, React запутывается и не имеет возможности восстановления.
Это не означает, что невозможно или чрезвычайно сложно совместить React с другими способами воздействия на DOM, вам просто нужно понимать, что каждый из них делает.
3.17.1.1 Как подойти к проблеме
Чтобы это продемонстрировать, давайте построим обёртку для известного плагина jQuery.
Мы добавим атрибут ref к корневому элементу DOM. Внутри componentDidMount мы получим на него ссылку, чтобы можно было передать его в плагин jQuery.
Чтобы предотвратить взаимодействие React с DOM после монтирования, мы вернем пустой тег
3.17.1.2 Интеграция с JQuery UI Dialog плагином
Во-первых, давайте посмотрим, что Dialog делает с DOM.
Если вы вызываете Dialog на узле DOM
Предположим, что это API, к которому мы стремимся с помощью нашего React-компонента-оболочки :
Важно знать, что если вы измените DOM вне потока React, вы должны убедиться, что у React нет оснований касаться этих узлов DOM.
Далее мы реализуем метод жизненного цикла. Нам нужно инициализировать Dialog с помощью ссылки ref на узел
Обратите внимание на одну очень важную деталь: как мы вызываем диалог из приложения.
Но чтобы данный метод вызвался, нам необходимо демонтировать наш диалог. Для этого нам понадобится атрибут onClose для диалога, которому мы присвоим метод-коллбэк, выставляющий isDialogShowed в false :
У самого компонента диалога будем использовать коллбэк onClose в componentDidMount :
3.17.2 Интеграция с другими библиотеками
Фактически, именно так React используется в Facebook. Это позволяет разработчикам Facebook писать приложения на React по частям и комбинировать их с уже существующими, сгенерированными сервером шаблонами и другим клиентским кодом.
3.17.2.1 Замена отрисовки, основанной на строках, на React
. может быть переписана с использованием компонента React:
Теперь вы можете начать перемещать больше логики в компонент и применять наиболее распространенные практики React. Например, в компонентах лучше не полагаться на идентификаторы, потому что один и тот же компонент может отображаться несколько раз.
Вместо этого мы будем использовать систему событий React и зарегистрируем обработчик кликов непосредственно в элементе React :
Как добавить ReactJS в существующее веб-приложение
Очень часто при ознакомлении с новой технологией, будь то JavaScript фреймворк или методология CSS, мы сталкиваемся с простым вызовом: “А как добавить эту крутую вещь на свой старый и запущенный сайт?” Многие руководства показывают, как это сделать с чистого листа, но в реальности у нас далеко не всегда есть такая роскошь.
В этой статье я дам несколько базовых примеров по использованию ReactJS в качестве замены для существующего кода, написанного на jQuery.
От jQuery к React
Недавно передо мной была поставлена задача взять достаточно большой функционал, написанный на jQuery и переписать его на React. Процесс был очень сложным, так как jQuery был распылен по разным местам кодовой базы. Построение полного пользовательского интерфейса с jQuery вполне возможно (и мы делаем это уже многие годы), но при этом возникают сложности с масштабируемостью и поддерживаемостью.
Независимо от того, что вы используете — Angular, Ember, Vue, React или jQuery, вы пытаетесь сделать то же, что долгие годы делали разработчики:
Вывести HTML → Получить события от пользователей → Обновить HTML
Архитектура с сильной зависимостью от идентификаторов и классов при выборке и манипуляции HTML может быть очень хрупкой.
Так что делать, если ваш код пронизан jQuery или целиком построен на каком-нибудь ином фреймворке, как начать заменять элементы пользовательского интерфейса чем-то типа React?
На что надо сразу обратить внимание?
Обертка/элемент-контейнер
Независимо от того, используется ли в приложении jQuery или другой популярный фреймворк, в большинстве случаев будет использоваться своего рода корневой элемент, оборачивающий фрагмент пользовательского интерфейса. Если в кодовой базе для реализации функционала используется jQuery, то обычно есть элемент, действующий как селектор-обертка. Этот элемент находится с помощью используется и используется для динамического обновления DOM.
Изолированное и распределенное состояние
Также стоит уяснить, изолировано ли состояние вашего функционала в отдельном контейнере или разделено между несколькими элементами.
Я собираюсь показать четыре примера распределенного/изолированного состояния с jQuery и затем с ReactJS.
Пример изолированного состояния с jQuery
Предположим, у нас есть существующее веб-приложение, показывающее эмодзи и кнопку, при нажатии на которую выводится другой эмодзи. Ниже показан код, который является образцом типичного приложения jQuery, в нем мы находим основной родительский элемент и динамически вносим в него изменения.
Вот разметка этого примера:
Это самая распространенная, хотя и не единственная стратегия изменения DOM с помощью jQuery.
Пример изолированного состояния с ReactJS
Одним из преимуществ использования библиотеки типа React является возможность инкапсулировать JavaScript и HTML внутри компонента. Результат получается более надежным, поддерживаемым и подходящим для многократного использования.
Это особенно помогает при работе с большими приложениями, в которых рендеринг и обновление производятся совместно внутри компонента. Я имею в виду не смешивание логики и представления, а согласованную организацию JavaScript и HTML внутри компонента. Эта же идея реализуется во всех JavaScript фреймворках, отсюда и сам термин фреймворк.
Как правило, все фреймворки:
Итак, наша разметка с интеграцией React:
Пример распределенного состояния с jQuery
Мы легко можем делать это с jQuery, но когда одна часть сайта динамически влияет на другую при помощи простых селекторов это сильно запутывает код. Опять-таки, при использовании классов и идентификаторов для манипуляции DOM, вы обязаны сами все это отслеживать.
Пример распределенного состояния с React
В ReactJ есть два распространенных способа работы с состоянием, распределенным между несколькими компонентами.
Использование контейнера для распределенного состояния
Это широко распространенная практика особенно для одностраничных приложений или фрагментов пользовательского интерфейса, полностью выводимых при помощи React. Так как мы хотим, чтобы наши компоненты общались друг с другом, мы оборачиваем их родительским контейнером, а он передает вниз свойства для обновления каждого компонента. Именно так работает ReactJS из коробки и в этом нет ничего нового.
Этот метод хорошо работает в тех случаях, когда у вас есть возможность обернуть пользовательский интерфейс одним контейнером. В большинстве давно поддерживаемых приложений это невозможно, но в некоторых случаях, в зависимости от раскладки пользовательского интерфейса, может быть вариантом.
Использование Redux для распределенного состояния
Библиотеки типа Redux (и различные варианты Flux) облегчают коммуникацию между компонентами, расположенными в разных областях приложения. Это распределенное состояние позволяет вам подсоединять действия и свойства состояния к вашим компонентам путем обновления глобального объекта, предоставляемого Redux.
Заключение
Надеюсь, у вас появилось понимание того, на что нужно обращать внимание при интеграции ReactJS в существующее приложение. При использовании jQuery для фрагмента пользовательского интерфейса вы можете заменить контейнер монтируемым компонентом React. А если состояние разделено между нескольким компонентами, то вы можете использовать метод контейнера или подключить библиотеку типа Redux.
React — это не новый jQuery
Это был тихий субботний день, когда я столкнулся с таким постом — React is the New JQuery (React — это новый jQuery). Я чувствовал, что было довольно много недоразумений, и подумал попытаться разрешить некоторые из поднятых в статье вопросов.
Я считаю, что обсуждение инструментов с точки зрения их крутости — это пустая трата времени и сил. Каждый инструмент разработан как ответ на улучшение решения распространённых проблем. Когда мы решаем одну проблему, возникают новые, которые, в свою очередь, требуют иных инструментов. Сами инструменты не вызывают сложности, они являются реакцией на более сложную работу, которой мы пытаемся заниматься.
Цель jQuery в основном заключалась в предоставлении единообразного способа решения проблем, связанными с кроссбраузерностью, а также обеспечить мощными инструментами управления DOM. Этот подход был основан на сервере, генерирующем HTML-страницу, а затем JS загружался на фронтенде для обработки взаимодействий пользователя. Вы можете создавать переключатели или любые компоненты для расширения возможностей браузера по умолчанию. Проблема с данным подходом заключается в том, что ваш пользовательский интерфейс заканчивается тем, что реализуется через клиент и сервер. Чаще всего это означает, что нам нужно два разработчика для реализации функциональных возможностей в двух местах — и на клиенте, и на сервере. Это занимает больше времени, больше общения и, скорее всего, приведёт к багам.
Вместо того, чтобы думать о React как способе реализации компонентов, подумайте о React как о самом пользовательском интерфейсе. Мы можем собрать пользовательский интерфейс из повторно используемых компонентов, которые создаём по ходу работы над приложением. Мы можем выполнять код таким же образом на сервере, как мы это делаем на клиенте. Это означает, что у нас наконец есть возможность реализовать весь наш пользовательский интерфейс на одном языке программирования. Это не только экономит значительное количество времени, но мы теперь свободны от багов, возникающих из-за того, что какая-нибудь одна из функций реализована в двух местах. Любые обновления теперь могут быть сделаны одним человеком.
React и Redux также приносят с собой ряд интересных идей, например как то, что пользовательский интерфейс является функцией состояния приложения. Мы больше не сохраняем состояние приложения в DOM, как это было бы с jQuery, поток состояния теперь изменился в обратную сторону. Состояние может находится в хранилище, а всем компонентам нужно сделать повторную отрисовку при каждом обновлении состояния. Хотя потребуется какое-то время, чтобы разобраться в этой концепции, но после этого ваш код станет легче для понимания.
Теперь я хотел бы рассмотреть некоторые из поднятых вопросов.
В то время как обработчики событий выглядят так, как будто они являются встроенными, это всего лишь синтаксис, используемый для их объявления. По факту они реализованы с использованием делегирования, таким образом React применяет один-единственный обработчик событий в корне приложения для обработки всех событий. В результате наше приложение будет по-прежнему эффективным и высокопроизводительным даже с большим количеством обработчиков событий.
Одно сходство, которое React имеет с jQuery — это то, что они оба гарантируют одинаковую работоспособность событий во всех браузерах, что пытается сделать нашу жизнь немного легче.
Добавьте this.handleClick = this.handleClick.bind(this); в конструктор, чтобы вызов метода класса заработал.
Контекстное разыменование — сложная тема и может подловить даже опытных разработчиков. Один из способов обойти эту проблему в React — использовать стрелочные функции, как описано в этом ишью.
Это может быть только для меня, но React кажется сравнительно более сложным и неэлегантным.
Это другой подход. Во многих случаях он будет лучше, но не всегда. Хотя может показаться, что его использование осложняет наше приложение, но на мой взгляд он на самом деле помогает нам справляться со сложностью, которая существует в больших приложениях. Я работал над приложениями, созданными с помощью React с более чем ста тысяч строк кода и на каждом шагу React был огромной помощью и играл важную роль. Некоторые проекты было бы сложно реализовать любым другим способом.
React может быть сложным, поскольку предполагает не только смену подхода к разработке, но также требует глубокого понимания основ JavaScript. Если вас это интересует, я запускаю учебную программу по JavaScript в Лондоне, которая охватывает именно эту тему. У нас ещё осталось несколько мест в нашей сентябрьской группе, и я хотел бы помочь вам справиться с изучением React, а также со всеми сопутствующими технологиями.
Примечание переводчика: а для всех тех, кто не живёт в Лондоне, но хочет изучить React на базовом уровне, предлагаю прочитать небольшую бесплатную книгу «Путь к изучению React». Это перевод известной книги «The Road to learn React», которая переведена на четыре языка, а совсем недавно был закончен перевод на русский язык. Так что, если вы или кто-нибудь из вашего круга общения ещё не знают React, но желают его изучить, то эта книга будет отличным стартом для погружения в мир React!
What is the right way to use Jquery in React?
I am trying to work on a project which is using a Layout/Template which uses a lot of jQuery.
I have learned to integrate the template with ReactJS Project, however, I am looking for a solution where I can completely replace the jQuery.
One of my solution is to use jQuery functions inside ComponentDidMount() or Render() function of React.
Is this approach correct? Is it the right way?
I have attached a small example below:
This is my Render Function.
4 Answers 4
Is this approach correct? Is it the right way?
No. No approach is correct and there is no right way to use both jQuery and React/Angular/Vue together.
jQuery manipulates the DOM by, for example, selecting elements and adding/deleting stuff into/from them. Typically, it selects an existing
The other frameworks don’t manipulate the DOM; they generate it from data, and regenerate it whenever this data changes (for instance after an Ajax call).
The problem is, jQuery has no clue about React’s presence and actions, and React has no clue about jQuery’s presence and actions.
This will necessarily lead to a broken application, full of hacks and workarounds, unmaintainable, not to mention that you have to load two libraries instead of one.
Solution : use jQuery OR (React/Angular/Vue), not both together.