In an attempt to put into practice, the react lessons taught by Edwin Maye of the AltSchool Africa, I built a website that gives a brief insight to the Mortal Kombat video game.
This website implements the following react elements:
React Router
Nested Routes
404 page and
Navigation Menu
I began by installing my react app with npx create-react-app AltSchool-react-examination using my git bash in my local machine.
I started by creating the various necessary components needed to setup the website. This is how my home page looks like:
This is the code for my homepage on VSCode
With a couple of hours spent in youtube and w3school research, I was able to design the home page that way.
THE ABOUT PAGE
This is the code for my About Page from VSCode
The entire content of the About page was lifted from https://www.complex.com/pop-culture/mortal-kombat-video-games-ranked/.
Using Nested Routes, I am able to switch between the Home page menu and the About page menu.
USERS
This was intended to list the users that have accounts in the website.
Characters
This shows the list of Characters in the Mortal Kombat game.
This was made possible by applying the principles of Pagination.
Using Pagination, I am able to toggle between the characters of the video game by clicking the "Next" and "Previous" buttons respectively.
This is the code from VSCode
404 Error Page
In a situation where a wrong URL is initiated or the URL is misspelt, the following error message pops up.
GitHub Repositories
2nd Semester Exam: https://github.com/nnamdikurus/AltSchool-2nd-Semester-Exam
Top comments (0)