Cảm ơn tất cả các bạn đã xem video của mình! ❤️ Có điều gì bạn mới biết về useState() khi xem video này không? Hãy bình luận bên dưới cho mình biết với nhé 😉
yeah đúng rồi nha Thanh, style trong reactjs mình viết theo js nhen. Các thuộc tính css sẽ được viết lại thành dạng camelCase Vd: background-color --> backgroundColor font-size --> fontSize ... Em lưu ý cái này Thanh nha 🙂
lol cảm ơn em đã phát hiện lỗi này, do anh code chay nên hk để ý, nó phải là key={todo} luôn á Thanh. Khi render cái list trong react, em ko nên dùng cái index làm key nha. Vì index nó sẽ bị thay đổi, ví dụ nếu em remove một item ở giữa mảng, thì rõ ràng index của các item phía sau sẽ bị thay đổi, nên react sẽ detect bị sai nhen 🙂
Anh đã "bị" em theo dõi trên Facebook ^^. Em cực kỳ thích cách hướng dẫn của anh, vừa có hình => tăng tính tương tác, vừa có nội dung lý thuyết bài bản. Tuyệt vời hơn là không có những từ ngữ thừa làm cho bài học bị rối cũng như dễ gây mất tập trung. Thật sự xem video của anh rất hiệu quả. ^^ Mong chờ những series khác nữa từ anh. :) Cám ơn anh rất nhiều!
chào Anh, cảm ơn bạn nhiều nhé. ❤️ Bạn cũng giữ sức khoẻ, đặc biệt là trong mùa dịch này nha. À với bạn có thể chia sẻ với mình là có điều gì trước đây bạn chưa biết về useState() khi xem video này hk Anh?
chào bạn, series này a chỉ cung cấp các kiến thức về react hooks thôi nè, không có trang bị đủ hành trang cho bạn đi xin việc làm nhé. Bạn nên chuẩn bị thêm những mảng kiến thức khác nữa nha 🙂
@@toantrinhbao3604 yeah okie em nhé Toàn, a vẫn ra đều đều nè, cơ mà tại a đang làm khoá học reactjs cơ bản, chắc tuần sau là public cho mọi người hihi, nên hôm giờ hơi bỏ bê kênh TH-cam hihi, xong a sẽ quay về lại hihi 😉
hihi cảm ơn Quang nhiều nha, hi vọng sáng mốt sẽ có video tiếp theo nè 👍 Hiện tại thì có gì Quang review và xem lại các videos để tổng hợp kiến thức lại y nha. 🙂
video bổ ích quá ạ. Tuy nhiên em thấy những clip dạng này bây giờ khá nhiều rồi ạ. Nếu có thể anh làm những clip dạng practices thì sẽ trực quan và dễ hiểu hơn ạ. Cảm ơn anh chia sẻ kiến thức
lol cảm ơn fan cứng Tiến, nắm thông tin rất rõ về series này hihi hi Thược, như bạn Tiến đã chia sẻ, mình có code nữa nhé, mà không phải trong video này nè! 🙂
@@EasyFrontend tuần trước học ko hiểu tại sao lại có [name, setName] hay tại sao lại this.setName này nọ, mà coi xong thì em hiểu rồi,hehe, a update kịp thời ghê
Video rất hay, bổ ích và dễ hiểu bạn ơi. Cám ơn bạn nhiều. Chúc kênh ngày càng phát triển nhé! Bạn làm thêm nhiều video về useContext(), useReducer, useSelector()....nữa được không ạ?
yeahhh cảm ơn Vy nhiều nhiều nhé hihi 😊 Sắp tới mình có dự định quay lại update nội dung, nhưng mà chắc sẽ làm trong khoá reactjs trên udemy thôi á Vy ơi. Còn hiện tại thì mình đang active sản xuất cho series NextJS 😊
Yeah cảm ơn bạn Vy nhiều nhiều nhé 😍 Link tổng hợp các videos / series: www.ezfrontend.com/blog/tong-hop-tai-lieu-hay-tu-easy-frontend Bên dưới là các links khoá học cho bạn tham khảo nhen Fan cứng thì xem được videos chỉ dành riêng cho members (fan cứng) --- Easy Frontend - Code xịn hơn mỗi ngày 🔥 Khoá học Javascript: course.ezfrontend.com/javascript 🎁 Khoá học ReactJS: course.ezfrontend.com/reactjs 🎯 Fan cứng Easy Frontend: bitly.com/easy-fan-cung
Anh ơi anh cho em hỏi vấn đề như này. Cái useState nó trả về [] mà anh gán nó là const. Vậy khi setState sao cái state nó đổi được vậy anh. Const thì không gán lại được chứ nhỉ
hi em, mỗi lần render là một lần nó chạy lại cái hàm của mình, với lại em ko sửa đổi giá trị state trực tiếp được, phải thông qua hàm setState, sau đó giá trị state mới sẽ có ở lần render tiếp theo em nha
thêm các video về hook đi anh. em đnag làm dự án về reactjs, và mới xài được 2 thằng là useState, với useeffect thôi. và cacgs viết unitest cho nó. from ReactJS Group
Lê Minh Hồ hihi nhất định nhé bạn, mình vẫn tiếp tục làm thêm nè hihi, bạn dùng useState() rồi chắc biết hết mấy cái mình share trong video bạn hen?
4 ปีที่แล้ว
Anh ơi, em thấy ở mục *4. Thêm ví dụ dùng useState()* anh có nhầm ở chỗ sử dụng map() cho todoList state phải không ạ? Thuộc tính key của phải có giá trị là {index} và textContent của phải là {todo} nhỉ.
hi Trì, em ko nên dùng index cho key nhé. Vì lỡ số phần tử thay đổi, index sẽ bị thay đổi, lúc đó reactjs sẽ detect sai item nào bị thay đổi nè. Em có thể đọc thêm docs chỗ này nhen reactjs.org/docs/lists-and-keys.html#keys 🙂
4 ปีที่แล้ว
@@EasyFrontend Dạ cảm ơn anh ♥ vậy thì initial state chúng ta phải set nó là một mảng chứa các giá trị là object gồm 2 thuộc tính là "id" và "title" chứ anh nhỉ. em thắc mắc chỗ đó á
4 ปีที่แล้ว
@@EasyFrontend Trước giờ em hay dùng index cho key. Cảm ơn anh đã giúp em biết thêm được thông tin hữu ích này 😊
Khanh Trì Nguyễn à tại a hk muốn làm phức tạp lên á Trì hehe, trong ví dụ này ds todo thì cái todo thường ko trùng nhau òi nên xài tạm vậy hehee, còn trong thực tế em sẽ dùng key là cái object id nha Trì 😉
const [ productOrders , setProductOrders ] = useState( () => { return getProductOrther(); } ); function getProductOrther { call API } Anh ơi cho em hỏi khi Call API thì em có cần đăt Function getProductOrther vào cái useEffect() không Anh
hi Tiến, useState() callback ko support async function em nha. Trường hợp này là em khởi tạo mảng rỗng trước. Rồi trong useEffect() em mới gọi APIs và cập nhật lại state nhen, em xem các videos tiếp theo sẽ rõ phần này hehe
a có video nào hướng dẫn về authentication và authorization trong react không ạ? Nhờ a Hậu tag hoặc post link vào cmt này giúp e với. E tìm không thấy. Thanks a.
hi bạn ơi, có một số điểm bạn lưu ý thế này: 1. Cái inititalState chỉ có ý nghĩa 1 lần đầu, nên việc mình dùng callback hay ko thì nó cũng chỉ có ý nghĩa lần đầu tiên nè. 2. Điểm khác biệt của việc dùng callback là: - Hàm callback sẽ chỉ được gọi 1 lần duy nhất. - Còn với việc ko dùng callback, ví dụ tính toán trực tiếp ở functional component, thì mỗi lần re-render, hàm sẽ được chạy lại từ đầu, trong đó bao gồm cả việc tính toán cái initial state của mình (mà rõ ràng những lần render sau thì cái vụ tính toán initialState ko còn ý nghĩa nữa, nên hơi thừa, và sẽ bị ảnh hưởng đôi chút nếu mà tác vụ đó phức tạp và tốn thời gian hehe) Hi vọng là giải thích được cho bạn hiểu 🙂
hi em, nôm na ngắn gọn nó sẽ thế này setCount(count + 1): lấy state hiện tại tăng 1 --> setCount(1 + 1) --> setCount(2) setCount(x => x + 1): lấy state mới nhất tăng 1 --> setCount(callback) --> callback sẽ được chạy sau và luôn đảm bảo lất state mới nhất, còn thời điểm trên component nó ko lấy state em nhen trường hợp đầu tiên, em truyền vào value để bắt nó cập nhật trường hợp sau, em truyền vào cái hàm, kiu nó tính theo công thức cho mình, và nó luôn đảm bảo state là mới nhất
@@EasyFrontend dạ e cám ơn a, e còn 1 vấn đề 1 thắc mắc thì e có thể nhắn tin riêng cho a hỏi được k ạ. Cái này về javascript. A có thể giải thích e về run-rime của async function? Liệu e có thể nhắn tin hỏi được k ạ?
Em đang thấy hơi khó hiểu Initial state ạ, Có nghĩa mình sử dụng callback để cho nó lưu lại giá trị đầu tiên, không cho nó thay đổi à anh. Vậy những lúc nào nên dùng ạ. Em cảm ơn ạ
hi Học, hiện cái initial state đó chỉ có ý nghĩa duy nhất cho lần render đầu tiên, những lần re-render sau, nó ko có tác dụng gì cả. Chính vì lý do đó, nếu mà cái hàm tính initial state cần tính toán nhiều, phức tạp thì nên dùng callback. - Không dùng callback: thì lần render nào nó cũng chạy lại việc tính toán initial state, mà điều này ko có ý nghĩa. - Có dùng callback: thì nó chỉ chạy hàm tính toán initial state lần đầu tiên render thôi, mấy lần sau nó ko tính lại initial state nữa, cái này ngon nè hehee
anh ơi ví dụ em có nhiều state như: content, title,.... setState từ cái input thì em phải tạo từng đấy cái useState ạ, và khi em tạo hàm onchange thì phải tạo cho từng cái ạ, a cho em giải pháp với
hi em, cơ bản là như vậy nè. Hoặc em có thể tạo một state chung gọi là formValues, rồi mỗi control là một key trong object đó nhen. Nhưng trong thực tế thì mình thường sử dụng một thư viện quản lý form cho việc này em nhen, điển hình như React Hook Form hoặc Formik, nhưng RHF thì tốt hơn vì tiếp cận theo hướng uncontrolled component để khắc phục được performance issue khi form của em nó có nhiều controls (> 20 controls) 😉
haha xưa mình làm OOP, cơ mà bên FE ko phù hợp lắm, viết theo functional nó tường minh và rõ ràng hơn nhiều lắm luôn hihi, em viết thử thời gian xem sao, biết đâu thích luôn hehe 😍
Phạm Dũng hi Dũng ơi, hiện tại là mình hoàn toàn có thể thay thế được class component nhen. Những gì class component làm đc thì giờ có hooks functional component cũng làm được tương tự nhen, thẩm chí là tốt hơn luôn nè hehee
@@NhungLe-ni9ec Hi Nhung, sorry Nhung, a cũng mới kiểm tra lại mà không thấy. Anh mới cập nhật lại òi á. Link ở đây luôn cho Nhung dễ lấy hen drive.google.com/open?id=1Whnf_XkXGnawOU9Cobw9rzZCHwmbE6of 😊
hi Mạnh, theo anh thì ko nên nè, vì cái initColor nó chỉ xài đúng 1 lần đầu à 🙂 Nên tính toán xong xài 1 lần rồi thôi, mấy lần render sau ko có tác dụng gì hết nè 🙂
@@EasyFrontend em có xem bài video về useMemo của anh thì cũng tương tự như initColor ý a, với useMemo kèm theo dependency là empty array thì nó cũng chỉ tạo initColor một lần duy nhất, những lần render sau không tạo lại mà anh
à em ơi, mình clone ra mảng mới để array mới có ref khác vs array hiện tại, như vậy react mới biết là state array này thay đổi. Nếu ko clone thì react cứ ngỡ là mảng ko thay đổi em nhé 😉
anh ơi em mới học react, em có tìm hiểu rồi. nhưng chưa rõ lắm. anh có thể chỉ em cách add class, hay remove class trong react.js được k ạ. cảm ơn anh nhiều
À phần này thì khá là đơn giản. Nếu em muốn add/remove class theo một điều kiện nào đó thì làm như sau: Ví dụ em có cái biến điều kiện là: const isActive = true/false; Trong template của em: Your item Ý nghĩa, nếu isActive = true --> add class active Nếu isActive = false --> remove class active, lúc này class trở thành empty. Hi vọng giải đáp được thắc mắc của em. 🙂
Dung Duong Cảm ơn e nhiều nhé Dũng. E cũng giữ sức khoẻ nha, gặp những bạn siêng học như e, a rất vui nè. Cố gắng học tập, nếu ko hiểu có thể trao đổi với anh nha! 🙂
const [ person , setPerson ] = useState ({ name: 'Hau' , color: 'red' }) setPerson({...person, name:'Hello'}) thì không đươc nha Anh. Nó vân ra {name: 'Hau', color:'red'} Nhưng Nếu setPerson({...person, color:'black'}) thì được nha {name: 'Hau', color:'black'}
![[LIVE] : ONE ลุมพินี 83 วันนี้!! คู่เอก "พันฤทธิ์ vs ซุปเปอร์บอล วันของโอม MBK"](http://i.ytimg.com/vi/1b4pkKHa_Fk/mqdefault.jpg)
Cảm ơn tất cả các bạn đã xem video của mình! ❤️
Có điều gì bạn mới biết về useState() khi xem video này không?
Hãy bình luận bên dưới cho mình biết với nhé 😉
Easy Frontend Em có 1 chỗ chưa hiểu kĩ lắm ở cái đoạn set backgroundColor . có phải style trong React thì viết khác css là background-color hay k anh
Easy Frontend và cái chỗ return ra thẻ li mình phải là key={index} đúng k anh.vì todo k có id mà anh
yeah đúng rồi nha Thanh, style trong reactjs mình viết theo js nhen.
Các thuộc tính css sẽ được viết lại thành dạng camelCase
Vd:
background-color --> backgroundColor
font-size --> fontSize
...
Em lưu ý cái này Thanh nha 🙂
lol cảm ơn em đã phát hiện lỗi này, do anh code chay nên hk để ý, nó phải là key={todo} luôn á Thanh.
Khi render cái list trong react, em ko nên dùng cái index làm key nha.
Vì index nó sẽ bị thay đổi, ví dụ nếu em remove một item ở giữa mảng, thì rõ ràng index của các item phía sau sẽ bị thay đổi, nên react sẽ detect bị sai nhen 🙂
@@EasyFrontend Dạ vâng anh. Cảm ơn Anh . Mong các video sắp tới về React Hook và sâu hơn về React Redux của anh :)
cách giảng này vô cùng dễ hiểu với ae newbie ..vote
Yayyyy cảm ơn em nhiều nhé Bảo ơi 😍
Anh giảng rất hay và dễ hiểu ạ
Yeahhhh cảm ơn em nhiều nhé Bach ơi 🤩
Anh đã "bị" em theo dõi trên Facebook ^^. Em cực kỳ thích cách hướng dẫn của anh, vừa có hình => tăng tính tương tác, vừa có nội dung lý thuyết bài bản. Tuyệt vời hơn là không có những từ ngữ thừa làm cho bài học bị rối cũng như dễ gây mất tập trung. Thật sự xem video của anh rất hiệu quả. ^^ Mong chờ những series khác nữa từ anh. :) Cám ơn anh rất nhiều!
trời ơi, phản hồi rất có tâm luôn, cảm ơn em rất nhiều nha Vũ ơi hehee, a vẫn đang làm thêm videos, hi vọng là nó cũng hữu ích cho mn 😍
mình không có ý kiến gì về useState(), nhưng cảm ơn bạn vì chia sẽ có tâm. Thế giới cần những người như bạn :D
hihi cảm ơn bạn TH nhiều nhiều nhé 😊
Bài học quá hay và thú vị . Hi vọng bạn cho thật nhiều bài giảng về react nữa nhé , thanksss @!!!!
hehe cảm ơn bạn Hiếu nhiều nhé 😉 nếu bạn quan tâm tới full khoá reactjs thì có thể tham khảo khoá của mình trên udemy nhen 🙂
Cách giảng và các ví dụ anh đưa ra rất dễ hiểu ạ. Thank a nhiều ạ :))
hihi cảm ơn em đã phản hồi lại cho anh nhé Van 😉
Videos vô cùng bổ ích. Cảm ơn anh ạ.
hihi cảm ơn em nhiều nhé Tin ơi 🥳
Cảm ơn bác nhiều nhé, chúc bác sức khỏe và mong bác ra nhiều video về những lưu ý như này.
chào Anh, cảm ơn bạn nhiều nhé. ❤️
Bạn cũng giữ sức khoẻ, đặc biệt là trong mùa dịch này nha.
À với bạn có thể chia sẻ với mình là có điều gì trước đây bạn chưa biết về useState() khi xem video này hk Anh?
Hay quá anh ơi, luôn liên kết với những kiến thức liên quan :x quá tuyệt anh ạ
hihi cảm ơn em nhiều Thành ơi, rất vui vì em thích những kiến thức a gom góp vào video nè 🥰
Quá hay, cảm ơn bạn❤
anh giảng dễ hiểu quá anh ạ
Trung Nguyễn hihi cảm ơn e nhiều Trung ơiiii 🥰 rất vui vì em có thể hiểu đc thông qua video nè hehee
anh giảng hay quá, e sub luôn r :D
yeahhh cảm ơn em nhiều nhé hihi
hay quá anh ơi, đúng đoạn hqa đang tắc ở function Com useState ạ. Thank anh nhiều :D
yeah quá đúng thời điểm luôn Thanh ơi, cảm ơn em đã xem video của anh nha.
Ngoài ra còn vấn đề gì chưa rõ hk Thanh?
Video siêu hay luôn a ơi :D Chúc kênh phát triển thêm ạ.
Yeahhh cảm ơn em nhiều nhiều nha Tông ơiii 😍
Video hay, dễ hiểu. Thanks a nhé!
hihi cảm ơn em nhiều nhé Phong 😍
Cảm ơn a. Quá dễ hiểu ạ.
hay quá anh. hi vọng học xong chuỗi video của anh thì xin dc việc làm.
chào bạn, series này a chỉ cung cấp các kiến thức về react hooks thôi nè, không có trang bị đủ hành trang cho bạn đi xin việc làm nhé. Bạn nên chuẩn bị thêm những mảng kiến thức khác nữa nha 🙂
@@EasyFrontend cám ơn anh. videos anh rất hay và dể hiểu.hi vọng xong hết series anh sẻ làm một project thực tế.
Dạy dễ hiểu. Giọng thì nghe không bị chán hay buồn ngủ.
hihi cảm ơn em nhiều nhé Toàn ơi 😊
Ra nhiều clip hơn nhé anh. Nhờ anh mà em hiểu biết thêm rất nhiều
@@toantrinhbao3604 yeah okie em nhé Toàn, a vẫn ra đều đều nè, cơ mà tại a đang làm khoá học reactjs cơ bản, chắc tuần sau là public cho mọi người hihi, nên hôm giờ hơi bỏ bê kênh TH-cam hihi, xong a sẽ quay về lại hihi 😉
Bài hay đó anh, rất mong chờ anh ra video tiếp theo 🐂
hihi cảm ơn Quang nhiều nha, hi vọng sáng mốt sẽ có video tiếp theo nè 👍
Hiện tại thì có gì Quang review và xem lại các videos để tổng hợp kiến thức lại y nha. 🙂
hay quá, thanks bạn
video bổ ích quá ạ. Tuy nhiên em thấy những clip dạng này bây giờ khá nhiều rồi ạ. Nếu có thể anh làm những clip dạng practices thì sẽ trực quan và dễ hiểu hơn ạ. Cảm ơn anh chia sẻ kiến thức
*1. A hậu nói seri đi từ cơ bản của hooks*
*2. Sẽ có code cùng nếu bạn đã xem video trước + cuối video này ^^*
lol cảm ơn fan cứng Tiến, nắm thông tin rất rõ về series này hihi
hi Thược, như bạn Tiến đã chia sẻ, mình có code nữa nhé, mà không phải trong video này nè! 🙂
xong series này giới thiệu redux luôn huynh đài ơi :D hehe huynh nói chuyện bánh cuốn quá :D
hehe cảm ơn bạn nhiều nhaaaa! Mình ghi nhận ý kiến của bạn nhé, sau series này mình sẽ xem mọi người vote gì nhiều nhất rồi làm tiếp nhé hehe
mong a làm 1 clip giới thiệu cách sử dụng socket io ạ
chà hơn 1k like rồi, hay quá anh ơi
hihi cảm ơn e nhiều nha Lâm 😍
Cho a xin hỏi tí e có biết gì thêm về useState() sau khi xem video hk Lâm?
@@EasyFrontend tuần trước học ko hiểu tại sao lại có [name, setName] hay tại sao lại this.setName này nọ, mà coi xong thì em hiểu rồi,hehe, a update kịp thời ghê
Khải Lâm hahaa may mắn ghê, a lại ra video đúng thời điểm, cảm ơn e đã phản hồi cho anh biết nhé 👍
Tuyệt vời, cảm ơn anh
cảm ơn a
Video rất hay, bổ ích và dễ hiểu bạn ơi. Cám ơn bạn nhiều. Chúc kênh ngày càng phát triển nhé! Bạn làm thêm nhiều video về useContext(), useReducer, useSelector()....nữa được không ạ?
yeahhh cảm ơn Vy nhiều nhiều nhé hihi 😊
Sắp tới mình có dự định quay lại update nội dung, nhưng mà chắc sẽ làm trong khoá reactjs trên udemy thôi á Vy ơi. Còn hiện tại thì mình đang active sản xuất cho series NextJS 😊
@@EasyFrontend bạn cho mình xin link khóa học udemy nhé. Cám ơn bạn. Hi vọng bạn sẽ ra thêm nhiều video nữa!
Yeah cảm ơn bạn Vy nhiều nhiều nhé 😍
Link tổng hợp các videos / series: www.ezfrontend.com/blog/tong-hop-tai-lieu-hay-tu-easy-frontend
Bên dưới là các links khoá học cho bạn tham khảo nhen
Fan cứng thì xem được videos chỉ dành riêng cho members (fan cứng)
---
Easy Frontend - Code xịn hơn mỗi ngày
🔥 Khoá học Javascript: course.ezfrontend.com/javascript
🎁 Khoá học ReactJS: course.ezfrontend.com/reactjs
🎯 Fan cứng Easy Frontend: bitly.com/easy-fan-cung
Trở thành fan cứng của anh :D
haha cảm ơn em nhiều nha Dũng =))) hi vọng các videos của anh giúp ích được nhiều cho em 😊
quá hay lun !
yeah cảm ơn em nhiều nhé Đức 😍
tuyệt vời
Ninja Code hihi cảm ơn em nhiều nhé 😊
Anh ơi anh cho em hỏi vấn đề như này. Cái useState nó trả về [] mà anh gán nó là const. Vậy khi setState sao cái state nó đổi được vậy anh. Const thì không gán lại được chứ nhỉ
hi em, mỗi lần render là một lần nó chạy lại cái hàm của mình, với lại em ko sửa đổi giá trị state trực tiếp được, phải thông qua hàm setState, sau đó giá trị state mới sẽ có ở lần render tiếp theo em nha
*Nào a rảnh lập 1 cái group học tập của kênh "Easy Frontend" trên facebook luôn a ơi*
hihi yeahhhh okie Phúc ơi, mà chắc mình lập page luôn nhỉ? hay là chỉ group thôi? Do mình mới làm nên không rõ nên làm cái nào? 🙂
@@EasyFrontend Cả 2 cũng đc a ơi. fanpage để a chia sẻ tài liệu, video...Còn group để tụi e dễ trao đổi thảo luận or đăng câu hỏi....
Phúc Minh À okie em hehe, lol có thêm việc làm cho anh, để a tìm fan cứng phụ anh làm =)))
@@EasyFrontend em nè kk
big like, thanks anh!
Yeah cảm ơn em nhiều nhé Nguyen
hay qua a
hihi cảm ơn em nhé Mạnh 😍
Hay quá anh ơi
Quang Nguyễn hehee cảm ơn e nhiều Quang ơiiii 🥰 Cho a xin hỏi tí, e có học được gì mới từ video hk Quang?
hay quá anh ạ
Dung Duong hihi cảm ơn e nhiều nha Dũng, em có học được điều mới từ video hk e hen? 🙂
cảm ơn a ạ
hihi em Nam nhé 🙂
thêm các video về hook đi anh. em đnag làm dự án về reactjs, và mới xài được 2 thằng là useState, với useeffect thôi.
và cacgs viết unitest cho nó.
from ReactJS Group
Lê Minh Hồ hihi nhất định nhé bạn, mình vẫn tiếp tục làm thêm nè hihi, bạn dùng useState() rồi chắc biết hết mấy cái mình share trong video bạn hen?
Anh ơi, em thấy ở mục *4. Thêm ví dụ dùng useState()* anh có nhầm ở chỗ sử dụng map() cho todoList state phải không ạ?
Thuộc tính key của phải có giá trị là {index} và textContent của phải là {todo} nhỉ.
hi Trì, em ko nên dùng index cho key nhé. Vì lỡ số phần tử thay đổi, index sẽ bị thay đổi, lúc đó reactjs sẽ detect sai item nào bị thay đổi nè. Em có thể đọc thêm docs chỗ này nhen reactjs.org/docs/lists-and-keys.html#keys 🙂
@@EasyFrontend Dạ cảm ơn anh ♥ vậy thì initial state chúng ta phải set nó là một mảng chứa các giá trị là object gồm 2 thuộc tính là "id" và "title" chứ anh nhỉ. em thắc mắc chỗ đó á
@@EasyFrontend Trước giờ em hay dùng index cho key. Cảm ơn anh đã giúp em biết thêm được thông tin hữu ích này 😊
Khanh Trì Nguyễn à tại a hk muốn làm phức tạp lên á Trì hehe, trong ví dụ này ds todo thì cái todo thường ko trùng nhau òi nên xài tạm vậy hehee, còn trong thực tế em sẽ dùng key là cái object id nha Trì 😉
Cám ơn anh về bài giảng. Anh cho e hỏi là 1 project tầm trung làm với API thì mình có nên build full React Hook k anh ?
Em cảm ơn ạ
hi Bảo ơi, hiện tại dự án mới a đều recommend react hooks hết em nha, size cỡ nào cũng đc hehe
@@EasyFrontend dạ e cảm ơn a hehe. Nhờ mấy cái của a mà thông hết, donate phát ủng hộ a thêm video hehe
Giờ mới biết là 1 cái merging và 1 cái replacing :))
hehe rất vui khi bạn học được điều mới từ video của mình 👍
Dạ anh ơi cho em hỏi tại sao khi dùng callback ở initialState thì nó chỉ chạy duy nhất 1 lần ạ, anh có video hoặc giải thích về callback kĩ hơn k ạ
hi An, đó là cách hoạt động của nó em nhen
khi truyền dạng callback, nó sẽ đảm bảo giúp em cb chỉ đc gọi đúng một lần hehe
const [ productOrders , setProductOrders ] = useState( () => {
return getProductOrther();
} );
function getProductOrther {
call API
}
Anh ơi cho em hỏi khi Call API thì em có cần đăt Function getProductOrther vào cái useEffect() không Anh
hi Tiến, useState() callback ko support async function em nha.
Trường hợp này là em khởi tạo mảng rỗng trước.
Rồi trong useEffect() em mới gọi APIs và cập nhật lại state nhen, em xem các videos tiếp theo sẽ rõ phần này hehe
like mạnh
Trung Minh hihi thanks Trung nhiều nhé 😉
Cho em hỏi, để quản lý các hook trong reactjs thì anh sử dụng cái gì để quản lý ạ
à anh chưa rõ câu hỏi của em lắm Vinh 😉
anh có một folder hooks rồi gom vào đó thôi à em hehe
a có video nào hướng dẫn về authentication và authorization trong react không ạ? Nhờ a Hậu tag hoặc post link vào cmt này giúp e với. E tìm không thấy. Thanks a.
th-cam.com/video/Jp6Ce64Adaw/w-d-xo.html
Em check video này nha Tâm hehe
@@EasyFrontend cám ơn a nhiều.
Video rất hay và hữu ích ạ... Anh cho em hỏi là theo em được biết là this.setState là một asynchronous còn đối với useState thì sao ạ?
hihi cảm ơn e nhiều nhé, cơ bản 2 ông thần này đều dùng feature state của ReactJS, nên cơ chế nó phải giống nhau nhé Nam 😉
sao mình thấy cái đoạn initialState dùng callback hay ko nó cứ giống nhau nhỉ, cùng gọi 1 lần như bạn nói
hi bạn ơi, có một số điểm bạn lưu ý thế này:
1. Cái inititalState chỉ có ý nghĩa 1 lần đầu, nên việc mình dùng callback hay ko thì nó cũng chỉ có ý nghĩa lần đầu tiên nè.
2. Điểm khác biệt của việc dùng callback là:
- Hàm callback sẽ chỉ được gọi 1 lần duy nhất.
- Còn với việc ko dùng callback, ví dụ tính toán trực tiếp ở functional component, thì mỗi lần re-render, hàm sẽ được chạy lại từ đầu, trong đó bao gồm cả việc tính toán cái initial state của mình (mà rõ ràng những lần render sau thì cái vụ tính toán initialState ko còn ý nghĩa nữa, nên hơi thừa, và sẽ bị ảnh hưởng đôi chút nếu mà tác vụ đó phức tạp và tốn thời gian hehe)
Hi vọng là giải thích được cho bạn hiểu 🙂
A ơi cho e hỏi. Sự khác nhau giữa setCount(count+1) và setCount(prev => prev + 1), giả sử count = 1 thì lúc này cả 2 thằng đều như tức là đều return = 2. Nhưng có 1 số trường hợp sử dụng thêm useCallback thì nó lại khác ạ. useCallback( () => { setCount(count+1) }, [] ) và useCallback( () => { setCount(prev => prev + 1) }, [] ). Khi click thì thằng đầu tiên nó chỉ chạy 1 lần rồi ngưng nhưng thằng thứ 2 chạy nhiều lần. A có thể giải thích dùm e được k ạ? e cảm on.
hi em, nôm na ngắn gọn nó sẽ thế này
setCount(count + 1): lấy state hiện tại tăng 1 --> setCount(1 + 1) --> setCount(2)
setCount(x => x + 1): lấy state mới nhất tăng 1 --> setCount(callback) --> callback sẽ được chạy sau và luôn đảm bảo lất state mới nhất, còn thời điểm trên component nó ko lấy state em nhen
trường hợp đầu tiên, em truyền vào value để bắt nó cập nhật
trường hợp sau, em truyền vào cái hàm, kiu nó tính theo công thức cho mình, và nó luôn đảm bảo state là mới nhất
@@EasyFrontend dạ e cám ơn a, e còn 1 vấn đề 1 thắc mắc thì e có thể nhắn tin riêng cho a hỏi được k ạ. Cái này về javascript. A có thể giải thích e về run-rime của async function? Liệu e có thể nhắn tin hỏi được k ạ?
Em đang thấy hơi khó hiểu Initial state ạ, Có nghĩa mình sử dụng callback để cho nó lưu lại giá trị đầu tiên, không cho nó thay đổi à anh. Vậy những lúc nào nên dùng ạ. Em cảm ơn ạ
hi Học, hiện cái initial state đó chỉ có ý nghĩa duy nhất cho lần render đầu tiên, những lần re-render sau, nó ko có tác dụng gì cả. Chính vì lý do đó, nếu mà cái hàm tính initial state cần tính toán nhiều, phức tạp thì nên dùng callback.
- Không dùng callback: thì lần render nào nó cũng chạy lại việc tính toán initial state, mà điều này ko có ý nghĩa.
- Có dùng callback: thì nó chỉ chạy hàm tính toán initial state lần đầu tiên render thôi, mấy lần sau nó ko tính lại initial state nữa, cái này ngon nè hehee
anh ơi ví dụ em có nhiều state như: content, title,.... setState từ cái input thì em phải tạo từng đấy cái useState ạ, và khi em tạo hàm onchange thì phải tạo cho từng cái ạ, a cho em giải pháp với
hi em, cơ bản là như vậy nè.
Hoặc em có thể tạo một state chung gọi là formValues, rồi mỗi control là một key trong object đó nhen.
Nhưng trong thực tế thì mình thường sử dụng một thư viện quản lý form cho việc này em nhen, điển hình như React Hook Form hoặc Formik, nhưng RHF thì tốt hơn vì tiếp cận theo hướng uncontrolled component để khắc phục được performance issue khi form của em nó có nhiều controls (> 20 controls) 😉
E code backend Java thuần OOP. Qua đây ngta lại ngại OOP, làm ra hẳn 1 cái feature để sài function compo powerful hơn , chán quá anh ạ
haha xưa mình làm OOP, cơ mà bên FE ko phù hợp lắm, viết theo functional nó tường minh và rõ ràng hơn nhiều lắm luôn hihi, em viết thử thời gian xem sao, biết đâu thích luôn hehe 😍
@@EasyFrontend vâng a ơi, e sẽ cố gắng :)
hàm setState của hook là async hay sync vậy anh
hi em, setState là async em nha hehee
em chào anh ạ.anh cho em hỏi functional component này có thể thay thế hoàn toàn class component không ạ.
Phạm Dũng hi Dũng ơi, hiện tại là mình hoàn toàn có thể thay thế được class component nhen. Những gì class component làm đc thì giờ có hooks functional component cũng làm được tương tự nhen, thẩm chí là tốt hơn luôn nè hehee
anh ơi setState là async đúng không anh
Yeah đúng rồi đó Nam ơi 😉
✅
thầy ơi react hook nó giống nhau giữa reactjs với react native phải ko thầy
hi Tuyên ơi, hooks là tính năng của React nói chung, mà React Native cũng dùng react nên nó như nhau nhé Tuyên 😉
Hay quá anh ơi
Nhung Lê hihi cảm ơn e nhiều nhé Nhung, link của slide trong phần mô tả video nha Nhung 🙂
Anh hậu ơi, anh check lại em với, em xem phần mô tả k có ạ
@@NhungLe-ni9ec Hi Nhung, sorry Nhung, a cũng mới kiểm tra lại mà không thấy. Anh mới cập nhật lại òi á.
Link ở đây luôn cho Nhung dễ lấy hen drive.google.com/open?id=1Whnf_XkXGnawOU9Cobw9rzZCHwmbE6of 😊
anh ơi chỗ initColor thay vì truyền callbacl vào useState em có thể vẫn viết như bình thường bên trên useState và sử dụng useMemo được không anh
hi Mạnh, theo anh thì ko nên nè, vì cái initColor nó chỉ xài đúng 1 lần đầu à 🙂
Nên tính toán xong xài 1 lần rồi thôi, mấy lần render sau ko có tác dụng gì hết nè 🙂
@@EasyFrontend em có xem bài video về useMemo của anh thì cũng tương tự như initColor ý a, với useMemo kèm theo dependency là empty array thì nó cũng chỉ tạo initColor một lần duy nhất, những lần render sau không tạo lại mà anh
anh ơi! anh có thể tổng hợp tất cả nhưng tài liệu này thành một bộ tài liệu react và public đc không ạ
hi Huy, hiện a đã tổ chức playlist trên channel của anh rồi á, em có share public mấy cái playlist này nhen ❤️
tại sao lại phải clone ra 1 cái array mới ạ
à em ơi, mình clone ra mảng mới để array mới có ref khác vs array hiện tại, như vậy react mới biết là state array này thay đổi. Nếu ko clone thì react cứ ngỡ là mảng ko thay đổi em nhé 😉
Easy Frontend e rất cảm ơn ạ
anh ơi em mới học react, em có tìm hiểu rồi. nhưng chưa rõ lắm. anh có thể chỉ em cách add class, hay remove class trong react.js được k ạ.
cảm ơn anh nhiều
À phần này thì khá là đơn giản.
Nếu em muốn add/remove class theo một điều kiện nào đó thì làm như sau:
Ví dụ em có cái biến điều kiện là: const isActive = true/false;
Trong template của em: Your item
Ý nghĩa, nếu isActive = true --> add class active
Nếu isActive = false --> remove class active, lúc này class trở thành empty.
Hi vọng giải đáp được thắc mắc của em. 🙂
@@EasyFrontend cảm ơn anh ạ. mà anh ơi, Component với function mà anh đang dạy, có thể lồng ghép vào nhau được k anh.
Dung Duong à cái này thì hoàn toàn được nha Dũng. Em coi lại video đầu tiên của series này để hiểu rõ hơn nha Dũng hehe
@@EasyFrontend à dạ. anh nhiệt tình mà dạy rất hay ạ.
rất có tâm và tầm ở trên cao
chúc anh mạnh khỏe, ra nhiều video hay ạ
Dung Duong Cảm ơn e nhiều nhé Dũng. E cũng giữ sức khoẻ nha, gặp những bạn siêng học như e, a rất vui nè. Cố gắng học tập, nếu ko hiểu có thể trao đổi với anh nha! 🙂
Anh có làm nodejs ko anh
hi Bảo ơi, hiện thì a hk có làm NodeJS nè, chỉ có tập tành phá phá mấy cái đơn giản thôi à 🙂
em thắc mắc mãi ở phần ví dụ 4 của phần todolist cái chỗ key = {todo.id} với cả {todo.title}, id với title ở đâu ra nhỉ, hại não quá:)))
hi Hòa, chỗ này anh lấy ví dụ bị sai cái giá trị khởi tạo em nha, sr em nhiều
Danh sách nó phải là một mảng các objects mới đúng hen 😭
@@EasyFrontende đang xem mấy video sau của anh về useState mới hiểu chỗ đó ạ, video a giảng dễ hiểu quá, cảm ơn a nhiều:))) 😄
const [ person , setPerson ] = useState ({ name: 'Hau' , color: 'red' })
setPerson({...person, name:'Hello'})
thì không đươc nha Anh.
Nó vân ra {name: 'Hau', color:'red'}
Nhưng Nếu setPerson({...person, color:'black'})
thì được nha {name: 'Hau', color:'black'}
hi Tiến, hơi vô lý nè, em thử kiểm tra lại kĩ nhé 😉
@@EasyFrontend hihi ..... ok roi Anh
anh ơi state đọc là s tây hay s tết ạ =))
hay qua anh
hihi cảm ơn e nhiều nhé Kiên! Cho a xin hỏi tí, e có học được gì mới từ video hk Kiên? 🙂
@@EasyFrontend em có theo dõi fb anh , anh mở lớp dạy front-end ạ
Kiên Đàm à anh cảm ơn e nha Kiên, a thì có đang dạy khoá FE bên Nordic Coder nè 🙂