Another react tutorial

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.