Grade application

Create a "grade application" using ReactJS. The user should be presented with text input boxes and associated labels for "course name" and "grade", as well as an "add" button. Beneath these elements should be an initially empty course table with the column headings "course name", "grade", "edit" and "delete". Beneath this course table there should be a second analytics table with the column headings "maximum", "minimum" and "average", and a single row beneath it for the computed values (which can initially be zero). When the user enters a course name (any text) and grade (number from0-100) into the text input boxes and clicks on the add button, if theinput is validated successfully than the course should be added to thecourse table as a new row. The new row should contain the course name and grade, as well as icons in the edit and delete columns that can be clicked (e.g. a garbage can in the case of delete) to carry out the action. The text input boxes should be made blank when the course is added to the course table. To validate a course, check that the course name is non-blank and thatthe grade is an integer between 0-100 when the user clicks on the"add" button. If the course name is blank, present an error message "Course Name cannot be blank" below the form and do not add the course to the course table. If the grade is not an integer between 0-100, present an error message "Grade must be an integer between 0-100" below the form and do not add the course to the course table. In the case of either error, the text in the input text boxes should remain, and the error message should disappear when the input has been validated successfully upon a subsequent attempt to add the course to the table. When the user clicks on the delete icon for a course in the course table, remove that course from the course table. When the user clicks on the edit icon for a course in the course table, load that course name and grade into the text input boxes, and change the "add" button to an "edit" button. The user should be able to change the course name and grade and click on the edit button, and if the input is validated successfully than the course name and/or grade should be changed in the course table (it must change in the exact same row, and an "edit" must take place, not delete and add operations in succession). Input validation should occur exactly the same as when adding an item to the course table. As courses are added, edited and deleted from the course table, the analytics table should be updated to present the current maximum course grade, minimum course grade, and average course grade. This update should occur automatically on each add, edit and delete operation. Use the container and presentation component design pattern to create the application. Use CSS to attractively and professionally style your application (padding, borders, margins, background/text colours). The entire app should be rendered into a single container div. Doing styles in CSS is OK, but other than that all functionality should be done using in the expected ways. The browser should never reload while the user is using the application. (Note don't use javascript or jquery) Use only ReactJS.