How to Import jQuery in a React Component: A Complete Guide (2026)

Integrating jQuery with React can seem counterintuitive due to their different philosophies. While React focuses on a declarative approach, jQuery is imperative. However, there are scenarios where you might need to incorporate jQuery in your React application, especially when dealing with legacy code or certain plugins. This tutorial will guide you through the process of importing jQuery into a React component effectively.

Key Takeaways

• Learn how to import and use jQuery within a React component.
• Understand the compatibility and differences between jQuery and React.
• Explore handling AJAX calls in React using jQuery.
• Identify common pitfalls and how to troubleshoot them.

Why Integrate jQuery with React?

While React is a powerful library for building dynamic UIs, jQuery's extensive plugin ecosystem and ability to easily manipulate the DOM can be beneficial in specific scenarios. Integrating jQuery can be particularly useful when:

• Working with third-party libraries that depend on jQuery.
• Managing complex animations not easily done with CSS or React.
• Integrating legacy code that relies on jQuery.

Understanding how to use jQuery alongside React can help maintain and leverage existing codebases, ensuring smoother transitions and enhanced application functionality.

Prerequisites

• Basic knowledge of React and JavaScript ES6.
• Node.js and npm installed on your machine.
• Create React App set up for your project.
• jQuery installed in your project via npm.

Step 1: Install jQuery

First, ensure you have jQuery installed in your React project. You can do this easily using npm:

npm install jquery

This command will add jQuery to your project's node_modules directory, making it available for import in your components.

Step 2: Set Up Your API Call

Create a separate JavaScript file, apiCalls.js, where you will define your jQuery AJAX methods. This helps maintain separation of concerns and keeps your components clean.

// scripts/apiCalls.js
import $ from 'jquery';

function getBlogInfo() {
  $.ajax({
    url: "http://api.tumblr.com/v2/blog/myblog.tumblr.com/info?api_key=my-api-key",
    dataType: 'jsonp',
    success: function(info) {
      console.log(info);
      console.log(info.response.blog.likes);
    }
  });
}

export { getBlogInfo };

This function uses jQuery's $.ajax to fetch data from the Tumblr API. It's exported for use in your React component.

Step 3: Import jQuery in a React Component

Within your React component, import jQuery and your API call function. Here’s how you can structure your component:

import React, { Component } from 'react';
import $ from 'jquery';
import { getBlogInfo } from './scripts/apiCalls';

class Homepage extends Component {
  componentDidMount() {
    getBlogInfo();
  }

  render() {
    return (
      
        Welcome to the Homepage
        Check the console for blog info.
      
    );
  }
}

export default Homepage;

In this example, the getBlogInfo function is called within componentDidMount to ensure it runs after the component has been rendered.

Step 4: Handle jQuery and React Differences

Remember that React manages the DOM differently than jQuery, which can lead to conflicts if DOM manipulations are not handled carefully. It’s essential to limit jQuery manipulations to non-React-managed DOM elements or use callbacks to ensure React's virtual DOM stays in sync.

Common Errors/Troubleshooting

• TypeError: $ is not a function: Ensure jQuery is correctly imported. If using a CDN, include the script tags in your HTML file.
• AJAX call not working: Check the API endpoint and ensure CORS policies allow your request.
• DOM manipulation issues: Avoid direct DOM manipulations on elements managed by React to prevent inconsistencies.

Conclusion

Integrating jQuery into a React component can be straightforward when done correctly. By understanding the differences in their approaches and carefully structuring your code, you can leverage both libraries' strengths. Whether for legacy support or specific functionality, knowing how to use jQuery in React expands your toolkit and enhances your web development projects.

Frequently Asked Questions

Can you use jQuery with React?

Yes, you can use jQuery with React, though it's generally recommended to use React's APIs for DOM manipulation. jQuery can be useful for integrating certain plugins or legacy code.

How do you import jQuery into a React project?

You can import jQuery into a React project by installing it via npm and then importing it in your component file using import $ from 'jquery';.

What are common issues when using jQuery with React?

Common issues include conflicts in DOM manipulation, as React uses a virtual DOM. It's important to avoid direct manipulation of React-managed DOM elements.