How to convert plain javascript to reactJs using Node.js / npm (React Application)

Please convert the following javascript code into reactJs

ToDoController.js

'use strict'

/**

* ToDoController

*

* This class serves as the event traffic manager, routing all

* event handling responses.

*/

export default class ToDoController {

constructor() {}

setModel(initModel) {

this.model = initModel;

let appModel = this.model;

// SETUP ALL THE EVENT HANDLERS SINCE THEY USE THE MODEL

document.getElementById("add-list-button").onmousedown = function() {

appModel.closeCurrentList();

let newList = appModel.addNewList();

appModel.moveListToTop(newList);

this.loadList(newList.id);

}

document.getElementById("undo-button").onmousedown = function() {

if (!document.getElementById("undo-button").classList.contains("disabled"))

appModel.undo();

}

document.getElementById("redo-button").onmousedown = function() {

if (!document.getElementById("redo-button").classList.contains("disabled"))

appModel.redo();

}

document.getElementById("add-item-button").onmousedown = function() {

appModel.addNewItem();

}

document.getElementById("delete-list-button").onmousedown = () => {

this.showDeleteListModal();

}

document.getElementById("close-list-button").onmousedown = function() {

appModel.closeCurrentList();

}

document.getElementById("dialog_yes_button").onclick = () => {

this.handleConfirmDeleteListRequest();

}

document.getElementById("dialog_no_button").onclick = () => {

this.handleCancelDeleteListRequest();

}

document.getElementById("close-modal-button").onclick = () => {

this.handleCancelDeleteListRequest();

}

}

// PROVIDES THE RESPONSE TO WHEN A USER CLICKS ON A LIST TO LOAD

handleLoadList(listId) {

// UNLOAD THE CURRENT LIST AND INSTEAD LOAD THE CURRENT LIST

this.model.loadList(listId);

}

handleMoveItemUp(itemId) {

this.model.registerMoveUpItemTransaction(itemId);

}

handleMoveItemDown(itemId) {

this.model.registerMoveDownItemTransaction(itemId);

}

handleRemoveItem(itemId) {

this.model.registerRemoveItemTransaction(itemId);

}

handleUpdateItem(item, newDescription, newDueDate, newStatus) {

this.model.registerUpdateItemTransaction(item, newDescription, newDueDate, newStatus);

}

/**

* This function responds to when the user clicks the No

* button in the popup dialog after having requested to delete

* the loaded list.

*/

handleCancelDeleteListRequest() {

// JUST HIDE THE DIALOG

this.hideDeleteListModal();

}

/**

* This function responds to when the user clicks the Yes

* button in the popup dialog after having requested to delete

* the loaded list.

*/

handleConfirmDeleteListRequest() {

// DELETE THE LIST

this.model.removeCurrentList();

this.hideDeleteListModal();

}

/**

* This method is for hiding the yes/no dialog.

*/

hideDeleteListModal() {

let modal = document.getElementById("delete_modal");

modal.classList.remove("is_visible");

}

/**

* This method is for showing the yes/no dialog.

*/

showDeleteListModal() {

let modal = document.getElementById("delete_modal");

modal.classList.add("is_visible");

}

}