Jquery in React is not defined

Hi I just want to receive ajax request, but the problem is that jquery is not defined in React. React version is 14.0

Error message

 Uncaught ReferenceError: $ is not defined

I have two files :


import React from 'react'; 
import { render } from 'react-dom';
import App from './containers/App';  

const root = document.getElementById('root');  

  <App source='https://api.github.com/users/octocat/gists' />, 


import React, { Component } from 'react';

export default class App extends Component {

    componentDidMount() {
        const { source } = this.props;

        console.log($); // throws error

    render() {
        return (
            <h1>Hey there.</h1>

14 thoughts on “Jquery in React is not defined”

  1. I just want to receive ajax request, but the problem is that jQuery is not defined in React.

    Then don’t use it. Use Fetch and have a look at Fetch polyfill in React not completely working in IE 11 to see example of alternative ways to get it running

    Something like this

    const that = this; 
      .then(function(response) { return response.json(); }) 
      .then(function(myJson) { 
         that.setState({data: myJson}); // for example
  2. Just a note: if you use arrow functions you don’t need the const that = this part.
    It might look like this:

      .then((response) => { return response.json(); }) 
      .then((myJson) => { 
         this.setState({data: myJson}); // for example
  3. Isn’t easier than doing like :

    1- Install jquery in your project:

    yarn add jquery

    2- Import jquery and start playing with DOM:

    import $ from 'jquery';
  4. It happens mostly when JQuery is not installed in your project.
    Install JQuery in your project by following commands according to your package manager.


    yarn add jquery


    npm i jquery --save

    After this just import $ in your project file.
    import $ from 'jquery'


Leave a Comment