React ToDo List Tutorial (v2) | Refactored & Improved | Learn React JS | Do More with Less Code

Показать описание

This video is linked to previously created tutorial on React To Do App. In this video we will quickly go through what we created earlier. Then we will refactor & improve the code. We will remove unnecessary code. Then we will improve functions for adding, deleting, editing and toggling tasks. AT the end, there should be less lines of code, it should be clean, understandable and more maintainable.

First of all I will remove all commas from code. Then file extension can also be removed from jsx files imports. Removing commas and file extensions from code is not necessary. It's a matter of personal choice or it depends on project workflow.

### State
We have state with the name toDo. In toDo each object has got, id, title and status. We can change status, we can add more to dos, we can update to dos.

### Temp State
Temporary state is used to temporarily hold data as we change it. We have newTask and updateData as temp state.

Then we have few functions.

### Forms
We have got two forms.
- Update Form
- Add Task form

Data is being passed down to these components. updateData and toDo is from state. Rest of props are pointing towards functions to add, edit, delete, update data from state.

### updateData Condition
This condition controls visibility of two forms. If we have something in updateData state, we see update form, otherwise we see add task form.

### toDo Condition
If we don't have any tasks or to dos in state, this condition shows a message - no tasks.

### Update Form
update form has got an input, a button to update state and a button to cancel update.

### Add Task Form
It's got an input and a button.

### To Do Component
To do component is displaying records from state. And we have icons from fontawesome to trigger add, edit, delete functionalities.

Main purpose of this video is to update add, edit delete functions. Let's improve functions to add, delete, edit and toggle tasks.

Adding Task
#########
When we type in input, we store the text in temp state. When we click add task button, we are looking in newTask that is temp state - if it has the data. If it's got the data, we are proceeding further. Now we have to prepare the object that will be inserted in state as new task. We only have the text. So we create the id and keep the status false. We prepare object, keep it with already stored to dos and update the state. Then we clear newTask state empty to clear the form. We refactored the code to add task.

Delete Task
#########
Deleting task has got two lines. We can do it in one line. Here we are filtering out record with specific id from state. We refactored that code.

Mark Task Done
############
Mark done is about toggling a value from false to true and true to false. We have refactored it.

Cancel Update
##########
No change here, it just emptying a record from state. So its good.

Change Task for Update / Change Holder
#############################
We changed function name to changeHolder and considerably refactored it. This is about holding the update change and not actually updating the task. This is not actual update. This is object prepared to push as updated data in state. It has one record or object from state that is updated now in temp state and is ready to be pushed.

Update Task
#########
This is actual update. Here we have the id. We know the id. We know which object has changed. Now we have remove old object with that id from state and push the updated object with same id in state. filterRecords is confusing. We used removeOldRecord. Then removed one step from this function. And then we are just clearing the temp state to empty form.

And it is all working fine at the end after refactoring and improving the code. So we made significant changes and removed extra code and improved few functions. This is v2 for the To Do List app in react js.

⭐⭐ React ToDo List App (V2) - New Code ⭐⭐

⭐⭐ React ToDo List App (V1) - Old Video ⭐⭐

⭐⭐ React ToDo List App (V1) - Old Code ⭐⭐

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#ReactJS #React #JS #JavaScript #App #ToDoListApp #WebStylePress #webdevelopment #ReactToDoList