title: React JS Sementic UI keeps saying: "ReferenceError: jQuery is not defined"
body: <p>I am very new to React and I have a question regarding Semantic UI.</p>
  <p>I am following a tutorial where I have to use a Header component of Semantic UI in App.js by including</p>
  <pre class="lang-js prettyprint-override"><code>    import { Header } from 'semantic-ui-css'
  </code></pre>
  <p>However, whenever the page compiles with this code it keeps returning an error message like this:</p>
  <hr />
  <pre><code>ReferenceError: jQuery is not defined
  
  ./node_modules/semantic-ui-css/semantic.js
  
  node_modules/semantic-ui-css/semantic.js:497
  
    494 | });
  
    495 | 
  
    496 | 
  
  &gt; 497 | })( jQuery, window, document );
  
    498 | 
  
    499 | /*!
  
    500 |  * # Semantic UI 2.4.1 - Form Validation
  </code></pre>
  <hr />
  <p>While searching for the solution I read many suggestions to run</p>
  <pre class="lang-sh prettyprint-override"><code>npm install -s jquery
  </code></pre>
  <p>so I did, but it still returns the same error message.</p>
  <p>I would really appreciate it if I can help on what I should do.</p>
  <hr />
  <p>Here are parts of my files that I think is related to the issue:</p>
  <p><strong>App.js</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  //import './App.css';
  import { Header } from 'semantic-ui-css'
  import TeacherForms from './components/TeacherForm';
  import CourseList from './components/CourseList';
  import { Col, Row, Container, Navbar, Button} from  'react-bootstrap'
  import { connect } from 'react-redux';
  import * as courseAction from './actions/courseAction';
  import DynamicForm from './components/DynamicForm'
  
  class App extends Component {
    constructor(props){
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  
      this.state = {
        name: ''
      }
    }
    
    handleChange(e){
      this.setState({
        name: e.target.value
      })
    }
  
    handleSubmit(e){
  
      e.preventDefault();
      let course = {
        name: this.state.name
      }
      this.setState({
        name: ''
      });
      if (course.name == ''){
        window.alert('Please enter a course name.')
      }else{
        this.props.addCourse(course);
      } 
    }
  
    listView(data, index){
      return (
        &lt;div className="row"&gt;
          &lt;div className="col-md-10"&gt;      
                &lt;Button className = "text-left " variant = "light" block&gt;
                  {data.name}
                &lt;/Button&gt;
          &lt;/div&gt;
          &lt;div className="col-md-2"&gt;
            &lt;confirm&gt;
              &lt;button onClick={(e) =&gt; {if (window.confirm('Are you sure you want to delete this item?'))
                this.deleteCourse(e, index)
              }} className="btn btn-danger"&gt;
                  Remove
              &lt;/button&gt;
            &lt;/confirm&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
      )
    }
  
    deleteCourse(e, index){
      e.preventDefault();
      this.props.deleteCourse(index);
    }
  
    render(){
      let name;
      return ( 
        &lt;div className="full-page"&gt;
          &lt;Navbar bg="dark" variant="dark"&gt;
            &lt;Navbar.Brand href="#home"&gt;Brandeis Course Scheduling&lt;/Navbar.Brand&gt;
          &lt;/Navbar&gt;
          &lt;Row&gt;
          &lt;Col&gt;
            &lt;div className="course-list"&gt;
                  &lt;h1&gt; Academic Requirements Form &lt;/h1&gt;
                  &lt;hr /&gt;
                  &lt;div class = "overflow"&gt;
                  &lt;h3&gt;Add Course&lt;/h3&gt;
                  &lt;form onSubmit={this.handleSubmit}&gt;
                      &lt;input type="text" onChange={this.handleChange} className="form-control" value={this.state.name}/&gt;&lt;br /&gt;
                      &lt;input type="submit" className="btn btn-success" value="ADD"/&gt;
                  &lt;/form&gt;
                  &lt;hr /&gt;
                  { &lt;ul className="list-group"&gt;
                    {this.props.courses.map((course, i) =&gt; this.listView(course, i))}
                  &lt;/ul&gt; }
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/Col&gt;
          &lt;Col&gt;
            &lt;TeacherForms&gt;&lt;/TeacherForms&gt;
          &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = (state, ownProps) =&gt; {
    return{
      courses: state.courses
    }
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      addCourse: course =&gt; dispatch(courseAction.addCourse(course)),
      deleteCourse: index =&gt; dispatch(courseAction.deleteCourse(index))
    }
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(App);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Index.js</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  //import './index.css';
  import "semantic-ui-css/semantic.css"
  import $ from 'jquery';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  import 'bootstrap/dist/css/bootstrap.min.css'
  import configureStore from './store/configureStore';
  import { Provider } from 'react-redux';
  
  const store = configureStore();
  
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;, 
      document.getElementById('root')   
  );
  
  serviceWorker.unregister();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thank you so much in advance.
  I will also try my best to figure this out by myself as well.</p>