ToDoList App là gì ?

ToDoList App là một ứng dụng  quản lý danh sách các công việc cần được thưc hiện. Đây là ứng dụng đầu tiên mình làm khi mình học bất cứ 1 công nghệ nào mới như Flutter, React, Vue, Node,... Bài viết này mình sẽ xây dựng ứng dụng ToDoList bằng React JS.

Preview ToDoList App

Đoạn Code HTML :

Đoạn Code CSS :

Giao diện trên điện thoại :



Giao diện trên desktop :



Cấu trúc project :

Khai báo các constants :

Khai báo các state :

Khởi tạo giá trí ban đầu cho state toDoList, trong trường hợp trước đó bạn đã sử dụng ứng dụng này trên trình duyệt của bạn, dữ liệu sẽ được lưu trên localStorage và cập nhật bất cứ khi nào bạn quay lại với ứng dụng toDoList.  

Hàm cập nhật state toDo khi viết có event onChange của input :

Hàm xử lý việc thêm mới 1 toDo :

Thực hiện việc thêm mới 1 toDo khi ấn Enter :

Hàm xử lý việc xóa 1 toDoItem khỏi todoList :

Hàm thay đổi trạng thái của toDo :

Cập nhật dữ liệu localStorage khi state toDoList thay đổi :

Code JSX :

Chi tiết các File trong Project

App.js :

App.css :

constants.js :

Source Code : 

https://github.com/trandinhthangdev/todolist-react

Demo :  ...