JQuery together with React

Question

I'm building a tool to create landingpages out of react components.

So how does it work:

I have a simple API - React loads the configuration and display the components accordingly.

Since this tool will be used for A/B tests (fastly generate some landingpages and test which one works) I need a library that is also able to manipulate the DOM after React rendered it.

This code injects some javascript:

if (template.customJavascript) {
  let script = document.createElement('script');
  script.type = 'text/javascript';
  script.innerHTML = template.customJavascript;
  script.async = true;
  document.body.appendChild(script);
}

I would like to use jQuery for the customJavascript - but it seems that it doesn't work because React is also using a virtual DOM. Is there any possibility to control for example clicks on a button with a custom injected JavaScript?

Hey @Fabian ! So, I don't think I get your question right... Why would you exactly need jQ? You can actually manipulate the DOM with React using states, you also have event handlers and stuff. Nearly everything you do with jQ related to DOM manipulation, you can also do with React. — Alexandre Wiechers Vaz, Nov 24 '16 at 17:16
Do your best to not use jQuery with React and manipulate the DOM after React rendered it. — elmeister, Nov 24 '16 at 17:20
Its a bit difficult to explain actually :) Do you know the tool otpimizely (optimizely.com). We are building something similar here. So we have a backend where we can select components - these components will be rendered in react. In order to make these blocks work (business logic) i need to inject some javascript - since this can be very variable. If you have a look at optimizely.com you will hopefully understand it :) (Sorry for my bad explanation) — Fabian Lurz, Nov 25 '16 at 08:48

SergeDirect · Answer 1 · 2020-09-17T13:07:30.247

A note to people who commented under original question:

jQuery was around long before virtual doom libraries and frameworks. It was first built in 2005, influenced by Dean Edwards' earlier cssQuery library and released as an open source JavaScript library in 2006 by John Resig. There have been tens of thousands of jQuery plugins written for the jQuery library. in 2020 the jQuery library is still the most popular JavaScript library on the web. React isn't the only virtual dom library and far away from the fastest and lightest. However it is a well maintained library with very passionate community behind it. What is important to note, is that because we like something more than something else, doesn't mean we shouldn't use it. Why should we reinvent the wheel and disregard beautifully made plugins for jQuery library because the New way came around? jQuery plugins allow us to respect our client's/employer's budget. Use what is available, integrate into any echo system, be it Angular, Vue or React. Why not?

Here is my take on how to integrate with React:

The Node

To include jQuery in Node, first install with npm.

npm install jquery

For jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as jsdom. This can be useful for testing purposes.

require("jsdom").env("", function(err, window) {
     if (err) {
         console.error(err);
         return;
     }

     var $ = require("jquery")(window);
});

Import jQuery as $ of jQuery package.

If you not familiar with ES6 import/Export syntax, please check question and answers on StackOverflow, using the link below.

Using Jquery and Bootstrap with Es6 Import for React App

Now you can select DOM by $ sign in your life cycle methods and include, extend or develop plugins with help of jQuery library. Note: Markup should be load first, that’s why I use jquery code in componentDidMount() method.

import React, { Component } from "react";
import {render } from "react-dom";
import $ from "jquery"
import PluginName from 'jQueryPluginExample'

class App extends Component {
   componentDidMount() {
         $('.element').jQueryPluginExample({

             plugin_object_hook_1:custom_value,
             plugin_object_hook_2:functio(){
                // custom functionality
             }
         })
   }
   render(){
     return (
        // ... App markups
     );
   }
}

render (<App />, document.detElementById("root"));

JQuery together with React

1 Answers1