javascript - Jquery in React is not defined - Stack Overflow

admin管理员组

文章数量:1134553

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='' />, 
  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>
        );
    }
}

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>
        );
    }
}

• javascript
• jquery
• ajax
• reactjs

Share Improve this question Follow edited Aug 17, 2019 at 14:10 Nicolás Alarcón Rapela 2,98211 gold badge2020 silver badges3434 bronze badges asked Oct 26, 2015 at 16:54 MachycekMachycek 86311 gold badge66 silver badges77 bronze badges 7

• 8 I don't see you defining jQuery anywhere in that code. Why do you think it should work? – Quentin Commented Oct 26, 2015 at 16:56
• 2 Why even use jQuery with React? – J. Lin Commented Mar 19, 2019 at 16:38
• 1 const that = this; fetch('http://jsonplaceholder.typicode.com/posts') .then(function(response) { return response.json(); }) .then(function(myJson) { that.setState({data: myJson}); }); – mplungjan Commented Mar 21, 2019 at 15:36
• 1 @mplungjan please make that an answer, with a small explanation on how fetch is enough when using ES6 already anyway. Maybe mention that a polyfill can be used for older browsers. – Emile Bergeron Commented Mar 21, 2019 at 15:42
• @EmileBergeron done. Feel free to amend the answer to reflect OPs usage – mplungjan Commented Mar 21, 2019 at 15:46

 |  Show 2 more comments

6 Answers 6

Sorted by: Reset to default 343

Try add jQuery to your project, like

npm i jquery --save

or if you use bower

bower i jquery --save

then

import $ from 'jquery'; 

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'

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
  });

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';

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
});

Add "ref" to h1 tag :

<h1 ref="source">Hey there.</h1>

and
const { source } = this.props; change to const { source } = this.refs;

本文标签： javascriptJquery in React is not definedStack Overflow