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