How to Use jQuery in ReactJS?

JavaScript presents powerful libraries like jQuery and ReactJS. The job of jQuery is to simplify JavaScript DOM manipulation, while ReactJS helps to build user-interactive interfaces. And when both are integrated, it makes a very dynamic combination. However, the condition is that this step should be taken carefully to improve the functionality of the application. This blog will guide you through the simple process of implementing jQuery in ReactJS applications.

Benefits of Integrating jQuery in ReactJS

Despite the fact that ReactJS prefers using virtual DOM by default, there are some situations where jQuery would be beneficial to consider. It ensures to give following benefits:

• Provide an option of ready-to-use plugins, such as jQuery UI, Slick Slider, DataTables, or Owl Carousel
• Compatible with outdated code, which would be helpful when upgrading from an older React application to a modern one
• Easily connect with some third-party tools so you can build a more advanced app
• Offers handy animation tools that save developers time and extra effort.

This process needs some expertise, which is why many businesses hire React developers to perform this integration process smoothly.

Step-by-Step Process to Use jQuery in ReactJS

Before starting the process, make sure you have a project set up for React. That is possible with three different ways, such as Create React App (CRA), using Vite, or Next.js. After setting up the project, the following steps can guide you:

1. Set Up jQuery in a React Application

The first step is to add jQuery to your React application. There are two methods for doing it:

Method:01 Install via npm or Yarn

Simply add this command to your React project folder:

npm install jquery 

# or 

yarn add jquery 

Afterward, move it to the component where you want to use it.

Import $ from 'jquery'; 

This method is mostly recommended by React experts because it keeps everything inside the React project file.

Method:02 Install with CDN Link

You can also use a Content Delivery Network (CDN) rather than the local React file. Go to public/index.html in your React project, after that enter:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 

This process is fast and does not require any extra process because of its global availability. It is ideal for small projects that demand a faster time to market. The npm method is more suitable for large-scale and production projects.

2. Implement jQuery in ReactJS Components

After installing jQuery in the React file, it's time to connect it with React components. React components rely on the DOM to deliver the product to the web browser. But the problem here is that React prefers using Virtual DOM, so you need to run jQuery carefully once the component is displayed. Expert React developers use hooks or lifecycle methods to connect the DOM with jQuery. Here are examples using useEffect:

a) Change CSS with jQuery

In this example, we are supposed to change the background color to light green.

import React, { useEffect } from 'react'; 

import $ from 'jquery'; 

const MyComponent = () => { 

  useEffect(() => { 

    $('#myDiv').css('background-color', 'lightgreen'); 

  }, []); 

  return <div id="myDiv">Hello, my background is changed with jQuery!</div>; 

}; 

export default MyComponent; 

In this example, ‘MyComponent’ is a React functional component, and ‘useEffect’ is used to connect jQuery to set the background color to light green. More than changing the background color, you can also change font size, text color, or padding.

B) Fade-In Effect

To gently hide and reveal elements, we can use this type of code:

import React, { useEffect } from 'react'; 

import $ from 'jquery'; 

const FadeComponent = () => { 

  useEffect(() => { 

    $('#fadeText').hide().fadeIn(1000); 

  }, []); 

  return <p id="fadeText">I smoothly fade in with jQuery!</p>; 

}; 

export default FadeComponent; 

Here, ‘FadeComponents’ are React functional components, while with useEffect, text fades with a speed of 0 to 1 over 1000ms. This step is a little complicated, so it is better to hire React developers for the correct usage of useEffect.

3. Add jQuery Plugins

jQuery plugins are ready-to-use features such as sliders, tooltips, and date pickers. The purpose of them is to enhance the functionality of jQuery and save developers' time. You can simply use them as if using jQuery code. For your better understanding, we have broken this step down into three parts. Let’s have a look by taking an example of the Data Tables plugin:

Download Data Tables

It can be installed through npm or a CDN easily.

npm install datatables.net jquery 

Or  

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 

<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script> 

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" /> 

Import DataTables in React Component

import React, { useEffect } from 'react'; 

import $ from 'jquery'; 

import 'datatables.net'; 

Program it in useEffect

const DataTableComponent = () => { 

  useEffect(() => { 

    $('#myTable').DataTable(); 

  }, []); 

  return ( 

    <table id="myTable"> 

      <thead> 

        <tr> 

          <th>Name</th> 

          <th>Position</th> 

          <th>Office</th> 

        </tr> 

      </thead> 

      <tbody> 

        <tr> 

          <td>Tiger Nixon</td> 

          <td>System Architect</td> 

          <td>Edinburgh</td> 

        </tr> 

        <tr> 

          <td>Garrett Winters</td> 

          <td>Accountant</td> 

          <td>Tokyo</td> 

        </tr> 

      </tbody> 

    </table> 

  ); 

}; 

export default DataTableComponent;

After this code command, you have allowed automatic sorting, pagination, and search features in your React component file. Curiously, when you compare Angular vs React, Angular has many built-in utilities for tables and data handling, while React often relies on third-party libraries like jQuery plugins or DataTables for such advanced UI features.

4. Combining React State with jQuery

React data, which changes, is being handled and stored by React state. While jQuery has an effect, sometimes you might need to combine state and jQuery to automatically apply changes in the application. Let's again take an example of background color changing when someone clicks the button:

import React, { useState, useEffect } from 'react'; 

import $ from 'jquery'; 

const StateWithJQuery = () => { 

  const [color, setColor] = useState('lightblue'); 

  useEffect(() => { 

    $('#colorBox').css('background-color', color); 

  }, [color]); // re-run when state changes 

  return ( 

    <div> 

      <div  

        id="colorBox"  

        style={{ width: '200px', height: '100px', marginBottom: '10px' }} 

      > 

        React + jQuery Box 

      </div> 

      <button onClick={() => setColor('lightgreen')}>Green</button> 

      <button onClick={() => setColor('pink')}>Pink</button> 

      <button onClick={() => setColor('orange')}>Orange</button> 

    </div> 

  ); 

}; 

export default StateWithJQuery; 

Insider insight here is that before using jQuery on certain components, first verify that they are not already being handled by the Virtual DOM. Because if you apply both to the same component, it results in bugs and errors in your app.

Situations to Avoid Using jQuery in React

JQuery is a very supportive JavaScript library, but it is not applicable in every React environment. So before starting your React project or jQuery integration, first look into situations where you cannot use them:

• Applying it to React-managed components, such as styles, text, or the structure of components
• Form handling apps, because React handles this by itself
• You already use Redux or other complex state management apps
• Advanced features like React hooks, state, or component libraries also offer the same functions as jQuery, so don’t try to use all

It is recommended to use jQuery for advanced UI features or third-party plugins, which React is not good at.

Tips to Safely Use jQuery in React: Bizmia’s Recommendations

Here are some useful best practices from Bizmia experts for connecting jQuery and React:

• Keep your jQuery usage minimal to avoid extra DOM trees and enhance the app's performance overall
• Make use of lifecycle hooks like useEffect or componentDidMount
• Avoid using obsolete jQuery plugins because they increase the chances of security threats
• Always verify tasks of jQuery operations and React Virtual DOM never match
• Figure out when your project needs help, always consider hiring React developers because they will handle your React and jQuery complex integrations more easily.

Bizmia can also provide you with React experts within 48 hours, who will ensure a smooth integration process by using advanced plugins and the right lifecycle hooks.

Wrapping Up

Using jQuery and React is sometimes the demand of React projects. So, it is important to understand where to use them and how. As both handle DOM-related tasks, you should carefully integrate them with hooks like useEffect. Moreover, double-check that you always apply jQuery for tasks that React can’t handle well, such as animations and plugins. And if in doubt, it is always a wise decision to hire React developers to ensure best practices and smooth jQuery integration.