error with imports when using jquery plugin with react

Question

I am trying to use jquery.infinitedrag to create a component in react. My code is here:

//Grid.js

import React from 'react'
import './jquery/jquery.min.js'
import './jquery/jquery-ui.min.js'
import './jquery/jquery-ui.min.css'
import './jquery/jquery.infinitedrag.js'

export default class Grid extends React.Component{

    componentDidMount() {
        $.infinitedrag("wall")
    }

    render() {
        return(
            <div id="wall"/>
        )
    }
}

This is supposed to work by making a div (identified by id) when react renders and then filling in an infinite grid later once the component mounts. The problem is, for some reason, jquery.infinitedrag is getting confused. Here is the error:

Failed to compile.

./src/jquery/jquery.infinitedrag.js
  Line 108:4:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 277:4:  'jQuery' is not defined                                                no-undef

My file structure looks like this:

src
  -jquery
    -jquery.min.js
    -jquery-ui.min.js
    -jquery-ui.min.css
    -jquery.infinitedrag.min.js
  -Grid.js
  -misc other components and stuff

I am fairly new to javascript, so this is probably something dumb.

Answer 1

npm install jquery OR npm update to remove the second error.