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 :

index.js

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

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

render( 
  <App source='https://api.github.com/users/octocat/gists' />, 
  root
);

app.js

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; 
    fetch('http://jsonplaceholder.typicode.com/posts') 
      .then(function(response) { return response.json(); }) 
      .then(function(myJson) { 
         that.setState({data: myJson}); // for example
      });
    
    Reply
  2. Just a note: if you use arrow functions you don’t need the const that = this part.
    It might look like this:

    fetch('http://jsonplaceholder.typicode.com/posts') 
      .then((response) => { return response.json(); }) 
      .then((myJson) => { 
         this.setState({data: myJson}); // for example
    });
    
    Reply
  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';
    
    Reply
  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

    yarn add jquery
    

    npm

    npm i jquery --save
    

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

    Reply

Leave a Comment