Question: How to convert plain javascript to reactJs which uses Node.js / npm (React Application)? Convert the following javascript code into reactJs and explain ToDoList.js 'use

How to convert plain javascript to reactJs which uses Node.js / npm (React Application)?

Convert the following javascript code into reactJs and explain

ToDoList.js

'use strict'

/**

* ToDoList.js

*

* This class represents a list with all the items in our todo list.

*/

export default class ToDoList {

/**

* The constructor creates a default, empty list.

*/

constructor(initId) {

this.id = initId;

this.name = "Unnknown";

this.items = [];

}

// GETTER/SETTER METHODS

setName(initName) {

this.name = initName;

}

getName() {

return this.name;

}

getId() {

return this.id;

}

/**

* Adds an item to the end of the list.

*

* @param {TodoListItem} itemToAdd Item to add to the list.

*/

addItem(itemToAdd) {

this.items.push(itemToAdd);

}

/**

* Finds and then removes the argument from the list.

*

* @param {TodoListItem} itemToRemove Item to remove from the list.

*/

removeItem(itemToRemove) {

let indexOfItem = -1;

for (let i = 0; (i < this.items.length) && (indexOfItem < 0); i++) {

if (this.items[i].id === itemToRemove.id) {

indexOfItem = i;

}

}

this.items.splice(indexOfItem, 1);

}

/**

* Finds the index of the argument in the list.

*

* @param {TodoListItem} item Item to search for in the list.

*/

getIndexOfItem(item) {

for (let i = 0; i < this.items.length; i++) {

let testItem = this.items[i];

if (testItem === item) {

return i;

}

}

return -1;

}

/**

* Gets and returns the item at the index location.

*

* @param {Number} index Location in the list of item to return.

*/

getItemAtIndex(index) {

return this.items[index];

}

}

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!