Hi there, This is another react tutorial. This time I built a very small school management system. If I can even call it that.
Here’s what it can do.
- Add students
- Add courses
- Enroll students to courses
That’s it basically but it was still fun building it. Lets look at some of the main parts. You can view the full github repo here.
First thing to note Routing
Well I have never really used to routing before in react apps. I can’t say this is the best way to do it.
<Router>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/dashboard" component={Dashboard} />
<Route path="/students" component={Student} />
<Route path="/teachers" component={Teachers} />
<Route path="/courses" component={Courses} />
<Route path="/enrollments" component={Enrollments} />
</Switch>
</Router>
So our router maps the paths to different components. I didn’t use all those components. Only Student, Courses and Enrollments.
Child Components
I was trying to figure out how react apps can be best structured for simpletons like me. So I decided at least for my Students.js
component to break or split it into two sections. The first is the list where we list the students.

The second components we show how we can create a student.

So that was my brilliant decision but I found it was kind of hard because I had to pass things to the child components. That got annoying after a while so for the other components I didn’t go this way.
You can see this in the code below. We pass data to our child components.
{this.state.showStudents ?
<ListStudents
students = {this.state.students}
viewStudent={this.viewStudent}
createStudent={this.createStudent}
deleteStudent={this.deleteStudent}/>
:
<EditStudent
viewAllStudents={this.viewAllStudents}
studentModel={this.state.studentModel}
saveStudent={this.saveStudent}
/>
}
The thing that makes them appear and disappear is called this.state.showStudents
. Once we update our state either true
or false
we can show one view and hide the other. Pretty cool right? Yes?
The rest is pretty straight forward. We have functions to save our students. The PHP scripts that handle them are really simple don’t worry.
saveStudent(data, action){
fetch("http://dev.samples.com/insertStudents.php",
{
body: data,
method: "post"
}).then(()=>{
if(data.get('id')){
NotificationManager.success('Student updated');
}else{
NotificationManager.success('Student Created');
}
this.getStudents();
this.setState({showStudents:true})
});
}
One of the things I had to google search for (like I wasn’t always doing this) was how to get a confirmation dialog.

deleteStudent(model){
if(window.confirm("Are you sure you want to delete this student?")){
this.deleteStudentRequest(model);
}
}
Above we see we call window.confirm
to get our dialog.
That is it for students.
To edit a student we call the function below.
viewStudent(model){
this.setState({ showStudents:false, studentModel: model});
}

Now in our courses component we have more of the same. This time we didn’t split it into two child components.
Demo
If you want to see the app in action check out the demo below.
Above I show the basic functions and then go through some of the code.
Conclusion
That’s it. Once you complete the students component you can following along with the rest. The only thing changed is the data. I pull data from the database to display in a table and delete records as required.
To get enrollments you can check out the SQL code. Its nothing special but a bit more than the rest.
SELECT t.id, s.firstname, s.lastname, c.name as course, c.description, t.createdOn as enrolledOn
FROM wftutorials.enrollments as t
LEFT JOIN students as s on t.student = s.id
LEFT JOIN courses as c on t.course = c.id
So we have a students table with the format
CREATE TABLE students
(
id
int(11) NOT NULL AUTO_INCREMENT,
firstname
varchar(45) DEFAULT NULL,
lastname
varchar(45) DEFAULT NULL,
studentId
varchar(45) DEFAULT NULL,
classroom
varchar(45) DEFAULT NULL,
PRIMARY KEY (id
)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Then we have a courses table with the format
CREATE TABLE courses
(
id
int(11) NOT NULL AUTO_INCREMENT,
name
varchar(45) DEFAULT NULL,
description
varchar(125) DEFAULT NULL,
PRIMARY KEY (id
)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Then we havae our enrollments
CREATE TABLE enrollments
(
id
int(11) NOT NULL AUTO_INCREMENT,
student
int(11) DEFAULT NULL,
course
int(11) DEFAULT NULL,
createdOn
datetime DEFAULT current_timestamp(),
PRIMARY KEY (id
)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
So we just had to do some joins to get the required data.
Check out the full code here.