Trong video này, chúng ta sẽ cùng nhau hoàn thiện ứng dụng Todo Apps, cụ thể ở đây là chức năng Sửa và Xóa (Update/Delete)
Chi tiết và cụ thể, các bạn cùng theo dõi video này nhé ❤
—–
🌹Bạn nào muốn donate hay mua cho mình cốc cà phê, cái pizza hay chỉ là gói mì tôm hảo hảo, để có thêm động lực làm nhiều video chất lượng, thì các bạn có thể liên hệ qua: 🤩🤩🤩
1. Patreon của mình :
2. Fanpage Facebook Tiếng Việt:
3. Fanpage Facebook Tiếng Anh:
😁Mình có 1 channel khác (Tiếng Anh, tên là haryphamdev), nên là có 2 Fanpage Facebook: Link channel Tiếng Anh:
—–
🚀 Khóa học Free FullStack SERN (SQL, Express, React, Node.js):
🎁 Tài liệu tham khảo sử dụng trong video:
👉 Nội dung khóa học:
👉 Xem full khóa học này tại đây:
👉 Tải project từ Github của mình:
👉 Source code video này:
👉Check An Empty Object:
👉 Change value of object in an Array :
👉 JS Array Find index:
———————————— IMPORTANT —————————–
🚀 Learn by doing : Hiện tại, mình đang làm 1 series miễn phí, học và thực hành để trở thành 1 fullstack web developer từ A đến Z. Và để thực hiện được mục tiêu này, khóa học này chính là thứ rất cần thiết dành cho các bạn beginners – React Basic. (React cơ bản từ A đến Z)
1️⃣ Các bạn nhận được gì khi kết thúc khóa học?
✔ Các bạn có thể làm chủ công nghệ, cũng như học được, biết được những kiến thức thực tế được sử dụng với thư viện, framework React.JS (công nghệ được sử dụng bởi Facebook và Instagram).
✔ Các bạn hiểu được React có thể làm những gì, chú trọng vào những kiến thức cơ bản nhưng cốt lõi nhất.
Phương châm của mình luôn là “chỉ nên học những cái mà các công ty cần”, không nên học tràn lan, tỏ ra ta đây cái gì cũng biết, cơ mà bản chất lại không biết (hiểu) gì.
Các bạn nên nhớ rằng, đối với những người mới bắt đầu, nên đi chậm nhưng mà chắc, không cần code siêu, chỉ cần biết cách ‘google search’ là được.
2️⃣ Nội dung khóa học ?
✔Mình dự định sẽ làm 1 series hướng dẫn full từ A đến Z những kiến thức căn bản(cốt lõi) của React cho những bạn chưa biết gì, những người mới bắt đầu dấn thân vào học thư viện (Framework) React này.
✔Khóa này chính là bước đệm để các bạn có thể chuẩn bị một công cụ cũng như kiến thức cần thiết, từ đó có thể làm những cái to tát hơn, như làm game, app và website thực tế.
3️⃣ Công nghệ sử dụng ?
✔ HTML, CSS và Javascript.
✔ React Framework
✔ Manage State with Redux
👉Các bạn muốn video ra nhanh thì đừng quên Đăng Ký Kênh, Like, Share và Comment bên dưới video để mình có thêm động lực làm video nha. Cảm ơn các bạn nhiều 💕💕💕
👉 Các videos này sẽ được cập nhật vào playlist -Tự Học React Cơ Bản Từ A đến Z Cho Người Mới Bắt Đầu với Hỏi Dân IT:
👉 Các bạn đăng ký kênh, bật thông báo để có thể nhận được những video từ series này một cách sớm nhất nhé ❤
———————————— IMPORTANT —————————–
🧠 Nội dung video:
0:00 Giới thiệu
0:55 Demo sản phẩm đạt được
1:55 Xóa Todo
6:25 Tạo input edit
8:00 Tạo edit State
10:00 Kiểm tra object empty
12:25 Renders todo theo điều kiện
18:04 Xử lý sửa todo
21:30 Xử lý lưu todo
25:10 Cập nhật danh sách todos
31:00 Debug code
🌎 Tìm mình tại đây:
1. Facebook Fanpage (Tiếng việt):
2. Facebook Fanpage (Tiếng anh):
3. Group trao đổi học tập Facebook:
4. Github:
5. Youtube channel:
6. Email: haryphamdev@gmail.com
#KhoaHocReactJS #reactBasic #HoiDanIT
🌹Bạn nào muốn mua cho mình cốc cà phê, cái pizza hay chỉ là gói mì tôm hảo hảo, hãy dùng MoMo quét mã QR tại link này nhé: https://nhantien.momo.vn/hoidanit (lưu ý: tên người nhận là PHAM VAN TUAN)
Đây là video #21 (Phần 2) trong series học và thực hành để nắm vững React căn bản.
👉Xem Full Playlist này tại đây: https://www.youtube.com/watch?v=-GE7xzr7ZKc&list=PLncHg6Kn2JT4C0enPGQPK7ZIlEoZ1ZvRy
👉 Cần giải đáp thắc mắc, cũng như hỗ trợ, tham gia group Facebook : https://www.facebook.com/groups/hoidanit
👉Các bạn đăng ký kênh, Like cũng như comment để mình có thêm động lực làm video nha. Cảm ơn mọi người ❤
👉Chanel khác của mình (Tiếng anh): https://www.youtube.com/channel/UCHqJxLo7mKam9GKqqwr2wfA
Khi sửa: Xóa hết title rồi mà vẫn cho lưu mỗi id? Cách check thế nào ạ?
Mình đã học theo hết các phần React trên loạt playlist này. Rất dễ hiểu vì Eric kiến thức rất sâu-vững vàng và được đầy đủ phương tiện cho bạn thực hành theo từ mỗi bài học ( source code ). Các bạn học thử đi …mình học xong cho hết playlist – free và sau đó quay trở lại comment như cách cảm ơn ( mình cũng mua các lớp khác của bạn Eric ….cảm ơn Eric rất nhiều )
AD ơi, không hiểu sao ở cái function handleOnChangeEditTodo thay vì gán giá trị sao chép {…this.state.editTodo} cho biến, thì sao mình không gán trực tiếp là this.state.editTodo luôn nhỉ?
mình muốn edit , nó nhảy vào nội dung trên input thì sẽ làm theo hướng nào bạn chủ mod ơi
cảm ơn anh vì những kiến thức anh mang lại. Chúc anh năm mới gặp nhiều may mắn, thành công trong công việc
mong anh rep cmt… em viết bằng function compoment, cái editTodo của em chỉ là chuỗi, ko phải obj nên khi edit xóa hết nó sẽ quay về text và mất input, anh có thể cho em cách xử lý với
a cho e hỏi e học xong khóa này của a thì ra tết e xin vào vị trí Fresher reactjs đc chưa a, e đã có 6 tháng làm việc với spring boot rồi ạ, giờ muốn làm thêm reactjs nữa
tới phần update em hơi cấn mà xem thêm vài lần ổn áp
anh hco em hỏi chỗ này: handleDelete = (todo) => {
let todoCurrent = this.state.ListTodo;
todoCurrent = todoCurrent.filter((item) => {
return item.id !== todo.id; // tra ve nhung item.id # todo.id. khi click vao se nhận biết todo.id đó
});
console.log("in ra todo.id :", todo.id);
console.log("Log item .id !== todo.id", todoCurrent);
this.setState({
ListTodo: todoCurrent,
});
toast.success("the list was removed succeed !");
};
cái todo này có phải lấy từ let todo = {
id: Math.floor(Math.random() * 100),
title: this.state.title,
};
không ạ.
cám ơn Anh.
Anh ơi cho em hỏi đoạn 19:30 ấy anh tại sao mình lại phải cần làm một đối tượng clone, để setState ạ, mà mình setState trực tiếp vưới e.target.value thì nó lại lỗi anh nhỉ, anh có thể giải thích cho em đc khôngaj
Phần Edit thì e dùng hàm map thì gọn hơn còn hiệu năng thì cái nào tốt hơn a
let x = listTodos.map((item) => {
if (item.id === todo.id) {
item.title = editTodo.title;
}
return item;
});
this.setState({ editTodo: "", listTodos: x });
A ơi, học hết khóa React cơ bản này của a thì xin làm Fresher đc chưa a ?
A cho em hỏi: Lúc khách hàng họ truy cập web mình họ debug là họ cũng có thể xem code của mình và chỉnh sửa code được luôn à anh.
thanks a , a dạy dễ hiểu lắm ạ💕💕💕
đoạn edit e tận dụng luôn cái index của map lưu vào biến tmpindex (khởi tạo undefined ở trong state); kiểm tra điều kiện { index !== tmpindex ? in ra <span> +<button edit> : <input > + <button save> (khi save thì setState lại tmpindex = undefined)}
Dạ anh ơi em gặp vấn đề là khi em thay đổi biến state thì thằng props của em cũng bị thay đổi theo, em nghĩ là trong một lần change state thì có truyền vào một biến item của thằng props thì có phải nó lấy vùng nhớ của props đó truyền cho state làm cho props và state thay đổi không ạ. Nếu vậy có cách nào khắc phục k anh em cám ơn
mấy cái a code phần edit trong project thực tế có làm như vậy k ạ
hay quá anh ơi, mà e hơi choáng với phần edit, chắc phải xem lại vài lần.
hay thực sự anh ơi
Dễ hiểu quá ạ