Cảm ơn các bạn đã xem video của mình 😍 Bạn nào hiểu component life cycle rồi thì LIKE 👍 Thấy video hãy thì ❤️cho mình nhé! Bạn học được gì sau video, bình luận bên dưới nhé!

@thanhtung1203

4 жыл бұрын

anh ơi anh nói thêm về mấy cái lẻ như getderivedStateFromProps và getsnapshotbeforeupdate được không

@EasyFrontend

4 жыл бұрын

Thanh Tùng hi Tùng ơi, hiện mình hk khuyến khích dùng những life cycle này nè, và rất hiếm use case sử dụng nó, ngay cả trang chính thống cũng khuyên hạn chế dùng nè. Nên không biết bạn có đang dùng mấy cycle này hk? 🙂

học react tốt nên học từ bản chất class đi lên thấy dễ tiếp cận vs functional hẳn. nắm rõ cấu trúc re-render các thứ. mấy bạn đừng bỏ qua class nha.

Anh chia sẻ về component life cycle của React dễ hiếu thật! Chúc kênh ngày càng thành công và phát triển

Anh dạy rất bình dân, dễ hiểu. Cảm giác như anh hiểu rõ người mới học có những thắc mắc ở điểm nào, thật là gãi đúng chỗ ngứa haha.

@EasyFrontend

2 жыл бұрын

hahaa cảm ơn em nhiều nhiều nhé Vỹ =))) tại mấy cái anh đã bị nên share lại thôi nè hehe

Triệu like cho video của a này...về mặt nghe nhìn thì khỏi phải bàn cãi..điểm 10 cho chất lượng...

@EasyFrontend

3 жыл бұрын

hehee cảm ơn em nhiều nhé Tài 😍

anh giảng dễ hiểu quá ạ ! thank youuu

Bất đồng bộ luôn anh ei

@EasyFrontend

4 жыл бұрын

haha okie a ghi nhận rồi nhé, cảm ơn Kiệt nha!

cảm ơn a, bài giảng hay quá, toàn lỗi mà mình hay mắc phải. Mong a ra nhiều video thêm

@EasyFrontend

3 жыл бұрын

hihi cảm ơn em nhiều nhé Tien ơi 😍

Lót dép hóng hihi

hay lắm a ơi ! hóng tiếp cái bất đồng bộ js

@EasyFrontend

4 жыл бұрын

hihi okie a ghi nhận rồi nhé, cảm ơn Tùng nhiều nha! 🙂

Trời đệt đi làm gần nữa năm rồi. Vô đây xem có mấy cái mình hiểu sai vãi lun. Cảm ơn anh nhiều nha.

@EasyFrontend

4 жыл бұрын

😅 cảm ơn Minh nha, nếu có gì còn chưa rõ thì trao đổi thêm với mình nha hehee

Cảm ơn tác giả !

video hay quá a ơi :33

rất thực tế và hay quá anh ơi!

@EasyFrontend

3 жыл бұрын

hihi cảm ơn em nhiều nhé Tín ơi 😍

Hi vọng anh có thêm video để em học hỏi. SUb anh ủng hộ.

@EasyFrontend

4 жыл бұрын

hihi cảm ơn em nhiều nhé ❤️Cho a xin hỏi thêm tí, em có học được gì mới từ video hk Shen?

e xem video từ lúc public mà lúc đấy chưa đụng đến life cycle nên chưa thấm. giờ mới đụng nên xem lại là thấm rồi a. video a đầu tư và nói dễ hiểu lắm a. Thanks a lot!

@EasyFrontend

4 жыл бұрын

yeahhh cuối cùng cũng thấm, ngon lành bauer ơi hehee 😉

series của anh giải thích dễ hiểu lắm ạ, chúc anh thành công

@EasyFrontend

4 жыл бұрын

Nguyễn Tùng hihi cảm ơn em nhiều nhé Tùng ơi! Nếu em quan tâm hãy làm theo anh series này để hiểu và thực hành đc hooks nhen 🙂

@TungNguyen-hu7ub

4 жыл бұрын

@@EasyFrontend anh ơi anh làm thêm vid về async await, hoisting cũng như xử lí bất đồng bộ đi ạ, cách giảng của anh dễ hiểu lắm ạ

@EasyFrontend

4 жыл бұрын

Nguyễn Tùng cảm ơn e nha Tùng 😍, a có dự định sẽ làm một vài videos về bất đồng bộ trong js nhé! Mà sau cái react hooks nha hêhhee

Cảm ơn anh Hậu nhiều ạ. Em đang học React mà cứ lung bung. Nghe xong vid của anh mới vỡ ra. Chúc anh sức khoẻ và ra thêm nhiều vid bổ ích nữa ạ!

@EasyFrontend

2 жыл бұрын

yeah cảm ơn em nhiều nhé, chúc em nhiều sức khỏe và học tốt nhen 😊

hay quá anh ơi.

@EasyFrontend

2 жыл бұрын

hehe thank you em 😍

Cám on tác giả

hóng video bất đồng bộ của anh :))

Anh này dạy dễ hiểu quá,

@EasyFrontend

2 жыл бұрын

hehe cảm ơn em nhiều nhé 😍

hóng từ chiều trên group rồi :D

@EasyFrontend

4 жыл бұрын

Elrics Edward hahaa cảm ơn bạn, cho mình xin hỏi tí, bạn xem xong có học được gì mới hk? 🙂 Có nắm được khi nào dùng life cycle nào hk?

@edwardelrics2138

4 жыл бұрын

@@EasyFrontend thật sự em chỉ dùng componentWillMount thôi ạ :D cảm ơn anh đã chia sẻ

Tuyệt quá a Hậu ơi

@EasyFrontend

2 жыл бұрын

hehe cảm ơn em nhiều nhiều nhé 😍

công nhận anh diễn đạt rất dễ hiểu

@EasyFrontend

4 жыл бұрын

hihi cảm ơn em nhiều nhé Nhân 😍

thanks a, bai giang rat hay!

@EasyFrontend

4 жыл бұрын

hihi cảm ơn Hùng nhiều nhé! ❤️

hay quá anh ơi :)

@EasyFrontend

2 жыл бұрын

hehe cảm ơn em nhé Hiếu 😉

video hay quá ạ

@EasyFrontend

3 жыл бұрын

Okie em nha Sáng ơi, anh đang măm me làm một series về bất đồng bộ hehe

@sangtruong9829

3 жыл бұрын

@@EasyFrontend vâng ạ ^^ Em chỉ mới đang học ReactJS nên nhiều chỗ khó hiểu ạ. Video anh giảng hay và dễ hiểu quá ạ.

Hay quá a

@EasyFrontend

4 жыл бұрын

hihi cảm ơn Trọng nhiều nha 😍

Thanks!

@EasyFrontend

Жыл бұрын

wow cảm ơn bạn WisenVN nhiều nhiều nhé ❤️

React update DOM and refs anh có thể giải thích rõ hơn về cách dùng của nó được không

bất đồng bộ với đồng bộ anh ơii, hay quá

@EasyFrontend

4 жыл бұрын

Hòa Nguyễn hehee cảm ơn em nhiều nha Hoà, hôm giờ nhiều bạn request cái bất đồng bộ này quá, chắc a sẽ sắp xếp làm quá 👍 Cảm ơn em đã phản hồi cho anh nha hehe

@HoaNguyen-eg1zh

4 жыл бұрын

Easy Frontend dứt liền a ơi

@kienang7850

4 жыл бұрын

@@EasyFrontend làm gấp cái bất đồng bộ nha a :D

Cảm ơn anh, nhưng e có 1 ý kiến, là nếu được a đặt tên các video của mình theo số thứ tự và có luôn tên channel a ở trên title. Để khi cần search lại ví dụ ( Easy Frontend bài 5 life cycle) là sẽ ra video của anh ngay mà ko trùng keyword với mấy kênh khác. Em rất cảm ơn với sự chia sẻ của a và chúc a thật nhiều sức khỏe ạ.

@EasyFrontend

4 жыл бұрын

Wow tips hữu ích, cảm ơn bạn Vinh nhiều nhé! Mình đã update lại title của tất cả videos có chữ Easy Frontend nhé. Còn stt cho bài, do mình đang làm video lẻ nên hk có cái này nè. Ít bữa mình làm theo từng dự án, sẽ add stt nha. Cảm ơn bạn nhiều nhé Vinh! 🙂

Anh nói về Double Mounting dùng useEffect trong React 18 đi ạ

@EasyFrontend

Жыл бұрын

hi em, hk biết có phải em đang muốn nói về cái này hk hen? stackoverflow.com/questions/72238175/why-useeffect-running-twice-and-how-to-handle-it-well-in-react

á há, thanks a nhe. Hổm giờ em bị Life Cycle dzật, sợ quá nên toàn né k dám nhìn mặt xD

@EasyFrontend

4 жыл бұрын

EleCtrO WizArD haha sau video này em có tự tin chạm mặt nó lại chưa? hehee

hóng vid bất đồng bộ của a

@EasyFrontend

4 жыл бұрын

hihi cảm ơn bạn nhiều nha, chắc phải 1, 2 tuần nữa mới tới nỗi bất đồng bộ nè, tại mình đang làm cái series react hooks 🙂 Nếu bạn quan tâm thì check trên channel tham khảo thêm nha hihi

Anh giới thiệu về redux đi anh ! Cảm ơn anh ❤

@EasyFrontend

4 жыл бұрын

Vi vu duc hihi mình ghi nhận ý kiến của bạn nhé, hiện mình đang làm cho react hooks, xong có gì sau đó mình xem xét và làm thêm phần này nhen 😉

làm thêm clip hướng dẫn về bất đồng bộ đi a.

@EasyFrontend

2 жыл бұрын

à cái này em tham khảo trong khoá javascript của anh nhé Quốc hihi

anh có thể làm video về bất đồng bộ trong React js được ko ạ, có thể là bất đồng bộ trong lúc connect vs api server ạ

@EasyFrontend

4 жыл бұрын

hi Nam, ý em là chỉ đơn giản là gọi API lên server và lấy dữ liệu trả về render lên UI thôi đúng hk Nam? 🙂 Nếu là vậy thì trong series về hooks, Nam sẽ thấy nhen 😉

like trc tính sau :))

@EasyFrontend

4 жыл бұрын

hahaaa cảm ơn bạn ơiiiiiii =))))

7:10 pureComponent

a ơi giờ e thấy ngta dùng Hooks nhiều, a có thể làm video về react Hooks đc ko a?

@EasyFrontend

4 жыл бұрын

Trung Duy Nguyễn À video về Hooks thì tuần sau có nha Duy 😉

Anh ơi nếu e chuyển component cũ là class component sang function component thì mình xử lý cái life circle như thế nào ạ. Em cảm ơn anh

@EasyFrontend

3 жыл бұрын

Em có thể tham khảo link bên dưới nhen Thái hehe Cơ mà anh khuyến khích em nên hiểu logic rồi viết lại theo hướng của hooks, thay vì map 1-1 cố định theo một quy tắc nào đó nhé Thái hehe blog.carbonfive.com/replacing-component-lifecycle-methods-with-react-hooks/ wavez.github.io/react-hooks-lifecycle/

Ví dụ em gọi dữ api từ redux và khi đó phải sử dụng ComponentDidUpdate để so sánh props cũ với props mới khi redux chờ lấy dữ liệu từ sever về. Khi đó thì mới có thể có dữ liệu để set vào state. Như anh nói hạn chế dùng ComponentDidUpdate thế còn cách nào khác không ạ?

@EasyFrontend

2 жыл бұрын

à khi em dùng redux, em có thể check bên reducer, nếu khác thì set state mới, ko thì return state cũ em nhen, đừng làm bên phía component em nhé 😉

anh cho em hỏi. khi gọi api lấy dữ liệu trong hàm componentDidMount() thì dữ liệu đó k được hiển thị trên trình duyệt hay như thế nào ạ. vì react nó render() trước xong mới đến componentDidMount(). tks anh!

@EasyFrontend

3 жыл бұрын

hi Hoàng, nó vẫn hiển thị dữ liệu lên được nhé. Vì khi em fetch xong dữ liệu ở CDM, em sẽ update state. Khi state thay đổi, component sẽ được re-render lại với state mới, từ đó mà dữ liệu mới sẽ được hiển thị lên nha 😉

cái compdidmount có lần dùng thư viện cdn bên nó chỉ dùng dom thôi nên phải dùng sau khi đã render ra dom ấy

@EasyFrontend

2 жыл бұрын

à cảm ơn bạn nhen, biết thêm vụ này hihi 😊

7:54 Đoạn này anh nói là ===, theo em nhớ shouldComponentUpdate sử dụng shallow comparison ==, còn deep compare mới là === đúng không anh.

@EasyFrontend

3 жыл бұрын

à ko em nhen Khánh, vụ so sánh 2 với 3 dấu, nó khác với shallow/deep compare em nhen. stackoverflow.com/questions/16633947/in-javascript-is-it-better-to-use-two-equal-signs-or-three-when-comparing-varia Em tham khảo cái thread này nhen 😉

@nguyennhatkhanh4610

3 жыл бұрын

@@EasyFrontend dạ em cảm ơn anh Hậu

Cám ơn anh nhiều, loạt video của anh rất thực tế ( vì hay đụng phải trong lúc làm dự án ) nên rất hữu ích ạ. Anh cho e hỏi ở [16:00] anh dùng giải pháp: B1: Khởi tạo biến isComponentMounted = false trong constructor(); B2: Set lại biến isComponentMounted = true trong componentDidMount để đủ điều kiện setState(); B3: Set lại biến isComponentMounted = false khi chuyển qua route khác. Vậy tại sao ở B1 mình không thiết lập giá trị ban đầu của isComponentMounted = true luôn , như thế sang B2 mình đỡ phải mắc công set lại giá trị = true cho nó ?

@EasyFrontend

4 жыл бұрын

cảm ơn câu hỏi của bạn nhé. Ở đây cái biến isComponentMounted mang ý nghĩa là component ready nên nếu set ngay từ đầu bằng true thì nó không có đúng với ý nghĩa của nó nè. Nên mình dùng ở componentDidMount để bật nó lên true thì sẽ đúng hơn nhé! 🙂 Cảm ơn vì đã phản hồi cho mình biết video hữu ích với bạn nha ❤️

@juhandvan

4 жыл бұрын

@@EasyFrontend nhưng mà dù sao e thấy nó đã chạy vào hàm constructor() rồi thì đồng nghĩa với việc component lúc đó chắc chắn đã được mounted rồi chứ anh. Cám ơn anh đã phản hồi lại comment của e ạ !

@EasyFrontend

4 жыл бұрын

Juhand Van. Chào bạn, bạn xem lại quá trình mounting trên cái diagram nhen. Nó sẽ chạy từ constructor() render() Mount vào DOM: ở đây nó mới mount nè bạn componentDidMount() Nên việc bạn bật nó true ngay từ đầu là chưa hợp lý nhen 😉

@juhandvan

4 жыл бұрын

@@EasyFrontend ok anh, e đã clear. Cám ơn anh nhiều nghen :))

@EasyFrontend

4 жыл бұрын

Juhand Van. Yeah cool em! Cảm ơn em đã đặt câu hỏi nhé 😉

Anh ơi, vậy trường hợp khi ta muốn props có sự thay đổi thì sẽ update lại component thì sao ạ? Ví dụ như em có chức năng sign up user (có dùng redux). Thì sau khi ấn nút submit form, em muốn hiện lên 1 popup, trong popup đó có 1 nút confirm. Nếu user ấn vào confirm thì mới call api để sign up user (component modal là 1 component riêng). Thì tức là khi ấn confirm thì sẽ thực thi 1 action để thay đổi 1 biến isConfirm trên store. Sao đó trong component Sign Up form em muốn kiểm tra khi nào biến isConfirm đó === true thì mới call api. Vậy TH này thì sẽ xử lý bằng các Lyfecycle method ntn ạ?

@EasyFrontend

4 жыл бұрын

hi Duy ơi, ca này bắt đầu phức tạp, a muốn biết thêm một vài thông tin. Em ping qua Facebook để trao đổi thêm nha Duy 🙂Thông thường những dạng logic thế này, em nên đặt vào chung một component để xử lý cho dễ, không nhất thiết phải đẩy lên redux nè. 🙂

@anhduy-ii9si

4 жыл бұрын

@@EasyFrontend dạ vâng. Thực ra em.muốn dùng cái alert ấy kiểu common ấy ạ, nên mới viết riêng ra 1 component, để lúc nào cần ở component nào thì gọi vào cho dễ. 😁. Vậy nếu thông thường xử lý luồng mà mình phải cập nhật biến trên store, dẫn đến props truyền về component thay đổi, thì trong component nhận props ấy mình sẽ xử lý như nào vậy anh? Nhất là mấy biến kiểu boolean ấy. Anh mô tảqua cho em quy trình chung chung cg dc ạ, chi tiết em có thể tự mò dc . Cảm ơn anh Trc kia em hay xử lý cái đó trong componentWillReceiveProps. Giờ cái đó k dc recommend nữa r. Em lại đưa nó vào trong componentDidUpdate , thì nó hay bị lỗi như trên clip anh có nói 😂

Anh cho em hỏi là ở trên thì hạn chế dùng componentDidUpdate nhưng em thấy khi dùng react hook thì phần did update lại được dùng nhiều v anh?

@EasyFrontend

2 жыл бұрын

hi Tân, anh chưa hiểu ý em lắm. cơ mà mình cần làm rõ chỗ componentDidUpdate một tí mình hạn chế sử dụng nó vì nó có khả năng xảy ra INF-LOOP kiểu did update --> set state mới --> did update --> set state mới --> .... lặp lại hoài luôn nếu em sử dụng mà control và chắc chắn nó ko xảy ra tình huống này thì okie em nhen cơ mà thật ra rất khó để kiểm soát tất cả trường hợp, đặc biệt là khi em dùng cái này tùm lum nơi, lúc đó kiểm soát mệt nghỉ luôn hihi

Em chào anh ạ.em có câu hỏi ạ.em chưa dùng setInterval trong componentDidMount bao giờ.theo em hiểu componentDidMount chỉ gọi một lần duy nhất khi hàm render được chạy.vậy anh cho em hỏi khi mà cứ trong 1s mình setState nhưng lúc đấy componentDidMount đã dừng lại thì có set lại state không và data trên trình duyệt có được cập nhật luôn sau 1s không ạ hay phải reload lại trình duyệt ạ.em không biết cách nói như nào cho dễ hiểu hơn.em đang đi làm thêm em không có máy tính để test.không hỏi thì lại ngứa ngáy trong người quá anh ạ.

@EasyFrontend

4 жыл бұрын

hi Dũng, cảm ơn em đã đặt anh câu hỏi cho anh nha. - Cái interval, em khai báo một lần là nó sẽ chạy hoài luôn nha, cho đến khi em clear interval. - Nên việc componentDidMount() kết thúc rồi thì cái interval() nó vẫn tiếp tục chạy nhé. - Trong interval, nó có setState(), nên nó sẽ trigger re-render luôn nha Dũng. - Em không cần phải reload browser nha. - Khi em reload browser thì đồng nghĩa với việc reload cả nguyên cái app, và nó sẽ phải chạy lại từ đầu nha Dũng. Hi vọng a trả lời được câu hỏi của em 🙂

@ongTrinh-mi6js

4 жыл бұрын

@@EasyFrontend dạ.em cám ơn anh nhé.hay quá anh ạ.cám ơn anh ạ.

mình mới học reactjs, đã có đọc qua tài liệu reactjs trên trang chủ (bản mới nhất - react function), ở react class thì mình thấy họ có rất nhiều function life cycle (có 1 vài cycle họ khuyên là không nên dùng), qua react function(hook) thì họ chỉ còn hỗ trợ và tóm gọn lại 3 cycle chính là (ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount), có 1 cycle phụ nữa là shouldComponentUpdate, cho mình hỏi là tại sao lại như vậy nhỉ ? mấy cycle kia ko cần thiết hay sao, mình tính theo react function(hook) thì với 4 life cycle này là đủ hay sao ?

@EasyFrontend

3 жыл бұрын

hi em, anh có một số ý cho em tham khảo nha. 1. Mình có thể code reactjs component bằng 2 cách: class component hoặc functional component (hooks) 2. Trong một dự án có thể có: - Chỉ toàn class component - Vừa class component + vừa functional component - Chỉ toàn functional component Nó đều tương thích và chạy đc với nhau, ko vấn đề gì nha. 3. Hiện nay, các dự án mới đều dùng react hooks bởi sự tiện nghi của nó, code gọn hơn, dễ quản lý hơn. Còn các dự án cũ, thì họ sẽ viết code mới bằng hooks, còn cũ thì vẫn giữ nguyên như vậy. 4. Còn về life cycles, do opensource nên họ open hết tất cả các life cycles họ có. Tuy nhiên trong ứng dụng chỉ có một vài cái mình dùng thôi, còn mấy cái kia hầu như ko cần thiết nè. Thực tế em chỉ cần dùng như trong video a nói là đủ rồi đó hehe Hi vọng giải đáp đc thắc mắc của em 😉

@meliodasriot5482

3 жыл бұрын

@@EasyFrontend e cảm ơn a nhé ko phải là e ko biết mà là có đọc qua rồi, có những life cycle họ open nhưng họ có thêm chữ UNSAFE thì hiểu là họ muốn bỏ trong tương lai nhưng có vài life cycle họ ko có chữ UNSAFE nên e thắc mắc thôi.

Anh cho em hỏi này với ạ Vd . Em có một state list (length =3) trong component cha, mỗi phần tử trong list tương ứng một component con. Khi setState tăng lên 1 phần tử (length = 4 ) thì ba phần tử cũ có tính là unmout hay chỉ render lại thôi ạ.

@EasyFrontend

Жыл бұрын

hi em, nó chỉ re-render lại thôi em nhen 😉 còn mà nó bị mount/unmount thì em check lại key set có đúng chưa nhen

@vanthienpham

Жыл бұрын

@@EasyFrontend em cảm ơn ạ. Cmt nào anh cũng rep thích ghê ❤️

Anh làm video về Javascript callstack, event loop, message queue, timer được ko a, e thấy nó lằng nhằng và khó hiểu quá :(( Thank a

@EasyFrontend

3 жыл бұрын

Yay cái phần này là kiến thức nền tảng của JS, a đã note lại, a sẽ làm 1 video về chủ đề này nhé Tú hihi

Chào bác lại là e, e cũng đang xài componentWIllRecieveProps trong REACT NATIVE cũng hay bị thông báo warning không biết bao giờ sẽ loại bỏ hẵn, do là mình có dispatch một action từ component con để thay đổi state của container component, nhưng mình chỉ muốn animation lại container component chứ không muốn render lại toàn bộ, phải chăng trường hợp này vứt hết mấy đoạn xử lí trong componentWIllRecieveProps vào shouldComponentUpdate ?

@EasyFrontend

4 жыл бұрын

Hi Vũ, bạn có thể share cụ thể hơn là chính xác bạn làm gì trong componentWill...Props hk? 1. Thường những thứ bạn làm trong will receive props có thể biến nó thành controlled component, đẩy các thay đổi đó lên thằng cha quản lý hết. 2. Mình cũng hạn chế dùng shoudComponentUpdate() nè, chỉ dùng nếu thực sự cần thiết. 3. Về re-render, bản chất ReactJS sẽ ko render lại DOM nếu ko có props hay state change, nên bạn inspect xem có render hay ko nha? Nếu ko bị render lại thì ko sao nha. Bên trên là một vài gợi ý cho Vũ, bạn tham khảo thử hen. Nếu Vũ có thể share cụ thể Vũ làm gì trong componentWIllRecieveProps() thì mình sẽ trao đổi thêm hen 🙂

@ImVuCms

4 жыл бұрын

@@EasyFrontend à trong componentWIllRecieveProps mình có nhận vài props từ redux, mình muốn control scroll từ ref của nó , và dĩ nhiên là mình có viết luôn shouldComponentUpdate để không nhận sự thay đổi của props trên, ý mình là componentWIllRecieveProps có vẻ hơi thừa, mà mình có thể gom cả 2 vào shouldComponentUpdate đúng không bác .

@EasyFrontend

4 жыл бұрын

I'm VuCms Hi Vũ, mình nghĩ trường hợp của Vũ có thể apply controlled component. Vũ tìm hiểu về cái này chưa?

@ImVuCms

4 жыл бұрын

@@EasyFrontend Giờ mình mới nghe, mình sẽ tìm hiểu thử. Cảm ơn bác đã chia sẻ. !!!

anh ơi anh làm clip giải thích giúp em bất đồng bộ và cách sử dụng cookies từ page login cho page home với ạ

@EasyFrontend

4 жыл бұрын

hi em, em có thể nói rõ hơn một tí hk? Cái em đang muốn làm là gì và đang gặp vấn đề gì nè? 🙂

@tungnguyenthanh1866

4 жыл бұрын

Em đang làm page login em muốn lưu lại data (email, password) khi đăng nhập bằng cookies. Sau khi đăng nhập xong thì page chuyển qua page trang chủ ( home ) ở home này em có 1 avatar user bên cạnh user này sẽ hiện email lấy từ cookies. ( rõ hơn là em đang muốn setCookies nhưng mà chưa biết cách làm đó anh) mà e đang học thằng react hook nên nhờ a làm clip hoặc đã thông não làm sao giúp em với ạ

@EasyFrontend

4 жыл бұрын

@@tungnguyenthanh1866 ý trời, em làm như vậy là sai nha. KO BAO GIỜ lưu tài khoản, mật khẩu người dùng nha, dính lỗi bảo mật nghiêm trọng em nha. Cái này là cái flow authorization, em nên trao đổi với team y nha, a giải thích ở đây hơi dài 😉

@tungnguyenthanh1866

4 жыл бұрын

Em nói nhầm sorry anh nha. Ý là đó đi theo cái flow của email để lên page home changedPassword á anh. Mà em đọc documents về cookies thì ko hiểu lắm mà thấy trong source cũ thì thấy có withCookies đồ tùm lum em ko hiểu lắm. Do em sinh viên mới ra trường mà trong trường không có dạy cookies á anh. Mong anh sớm ra clip về cookies trong react hook để em cày tiếp kkk. Do em đang học react hook của anh thấy hay lắm, do có chỉ rõ trong code. Nên em thấy hay vô cùng.

Ớ em dùng === để render ra điều kiều kiện đó nhưng nó toàn nhảy trang là sao vậy a

@EasyFrontend

3 жыл бұрын

Highlights Gaming LOL hi em, anh chưa hiểu ý em lắm nè? 🙂

8:40 cái super đó e cũng ko biết bỏ nó vào làm j nữa, chỉ biết bỏ vào là props nó mới dùng đc =)))

@EasyFrontend

3 жыл бұрын

hi em, cái này kiến thức bên OOP nhen, em đọc phần kế thừa bên OOP là sẽ hiểu nha 😉

A chia sẽ 1 vài cách để hạn chế render khi không cần thiết đi a

@EasyFrontend

4 жыл бұрын

Scotlrip B ồ một ý hay nè, okie bạn nhé, mình ghi nhận nha 😉

@EasyFrontend

4 жыл бұрын

Phước Khánh Nguyễn đúng rồi Khánh ơi, nhưng hạn chế dùng shouldCompnentUpdate() nhé. Thật ra tối ưu nhất là phải kiểm tra lại cái flow dữ liệu của app bạn đang dùng, việc tổ chức hk tốt sẽ dẫn tới nhiều lần re-render mà mình hk để ý. Khánh có thấy như vậy hk?

@scotlripb8731

4 жыл бұрын

@@EasyFrontend đúng r đó a. ý e là cách design component ntn để hạn chế việc render ă. còn trg hợp bất khả kháng thì dùng memo với Pure Component

@maibagiangson4100

4 жыл бұрын

@@scotlripb8731 mình dùng useEffect() cũng được phải không ạ ?

Anh ra chuỗi video về Redux đi anh ^^

@EasyFrontend

4 жыл бұрын

Thien Duc Hi Đức ơi, anh ghi nhận nhé, mà cho a hỏi em đang gặp khó khăn gì khi làm với redux nhỉ? 🙂

@thienduc637

4 жыл бұрын

@@EasyFrontend em đang muốn tìm hiểu về umijs và dvajs nhưng cần có kiến thức về redux và router anh ạ. Nên em mới có ý kiến vậy ạ

@tungnguyenthanh1866

4 жыл бұрын

đúng rồi redux củng giống life cycles vậy đọc document khó hiểu vô cùng

@EasyFrontend

4 жыл бұрын

Shaper VT hehe okie em, sắp tới sẽ có mấy videos về redux nè hehe 😉

function và class component đều có lifecycle đúng ko a?

@EasyFrontend

2 жыл бұрын

yeah đúng òi nhé Quốc, cái nào cũng có 3 giai đoạn chính - mount - update - unmount mỗi bên đều có cách để handle cho mỗi giai đoạn này em nhen 😉

Khi nào thì anh ra video bất đồng bộ trong javascript ạ

@EasyFrontend

4 жыл бұрын

VoDucThang hi Thắng, hiện thì a chưa biết sẽ khi nào ra nè, trước mắt a đang hoàn thành cái series redux project, xong cái đó a sẽ xem xét để làm cái này nhen Thắng 😉

@voducthang16

4 жыл бұрын

@@EasyFrontend dạ vâng anh

Chào anh, em mới học react , em đang dùng redux thunk để gọi sử lý bất đồng bộ , nếu không sử dụng componentWIllRecievePróp thì làm sao phát hiện được props thay đổi vậy anh

@EasyFrontend

4 жыл бұрын

Chào Huỳnh, để giải quyết cái này, mình cần biết cái code hiện tại xử lý trong phần componentWillReceiveProps nó làm gì nè, bạn có share cho mình cái link demo cho code đó hk? Và bạn cũng kiểm tra lại cách tổ chức component hiện tại của bạn luôn nha, mình có làm video gợi ý ở đây: kzread.info/dash/bejne/aa58w6RwhpjFoMY.html Bạn tham khảo xem sao hen. 🙂

@haihuynh3539

4 жыл бұрын

@@EasyFrontend ví dụ em muốn get danh sách sản phẩm từ api. Em sẽ dispatch 1 cái action call api rồi lưu kết quả,error,loading trong redux lun. Dùng redux thunk, rồi container mới lấy từ redux về dùng

@haihuynh3539

4 жыл бұрын

Trong component Will receive props sẽ kiểm tra xem prop đó có thay đổi hay không r xử lý

@manhcuong1788

4 жыл бұрын

@@haihuynh3539 Bạn có thể sử dụng shouldComponentUpdated(prevProp, nextProp) để check nhé

@anhduy-ii9si

4 жыл бұрын

@@manhcuong1788 Bạn ơi. Mình hỏi 1 chút. Nếu trong props trả về từ store ấy, mình có 1 biến dạng boolean , mình muốn kiểm tra nếu biến đó = false thì sẽ setState cho 1 biến khác để hiển thị alert message. Vậy thì sử dụng Lifecycle Method trong trường hợp này như nào ? Mình làm cái đó trong comoonentDidUpdate mà nó báo lỗi, kiểu dùng setState trong đó nên nó cứ gọi nhiều lần ấy

Khoảng gần cuối video tầm 16:00 trở đi cái lỗi đó anh, nếu mình sử dụng Hooks thì fix làm sao ạ?

@EasyFrontend

4 жыл бұрын

hi Kiên, cái này khi qua hooks mình sẽ dựa vào cái useEffect clean up để detect nha Kiên. Chắc video tiếp theo a có đề cập tới cái này. Có gì e đợi rồi tham khảo nha hehe

@kienang7850

4 жыл бұрын

@@EasyFrontend hehe tks a. Tiện a làm cái video về bất đồng bộ từ cơ bản tới nâng cao nha a. Dài xíu cũng được. ^^

@EasyFrontend

4 жыл бұрын

Kiên Đặng haha okie Kiên nhé, mình sẽ coi soạn tài liệu về phần này và làm videos trong tương lai nhen 😉

Anh làm video bất đồng bộ đi anh ơi.

@EasyFrontend

3 жыл бұрын

hehee okie em nha, mà sau series Redux Saga và NextJS em nhé hehe

@relaxmusicstudio

3 жыл бұрын

@@EasyFrontend dạ okii anh 😍

bất đồng bộ đi anh ơi

a có thể làm 1 video riêng để nó về lỗi khi dùng componentDidUpdate hk anh? anh nói là hạn chế dùng nhưng hk có ví dụ cụ thể tại sao hạn chế nên cũng hơi khó hình dung anh ạ? Thanks anh nhiều!

@EasyFrontend

2 жыл бұрын

à hình như anh có giải thích đâu đó thì phải. nó dễ gây ra inf loop em nhé. Ví dụ đơn giản: trong component did update em có setState() --> trigger update --> did update --> set state --> lặp lại hoài luôn nên nếu trong componentDidUpdate của em làm ko khéo thì rất dễ bị inf loop, là vòng lặp vô tận. nếu logic đơn giản thì may ra em còn control đc, nhưng nó mà phức tạp thì em sẽ mất kiểm soát, và thỉnh thoảng gây ra inf loop, ko biết đường nào mà lần. --> tốt nhất là ko dùng did update em hen. Với giờ mình chuyển sang hooks hết òi, ko dùng class nữa, nên em có thể nhẹ đầu hơn tí về vụ này hehee

@sometimesalways1259

2 жыл бұрын

@@EasyFrontend dạ thanks anh nhìu, có dịp làm thêm video về HOC nữa nha a, hihi

@EasyFrontend

2 жыл бұрын

@@sometimesalways1259 yeah mà tại giờ ít dùng nên a cũng hk có định làm á hehe

@sometimesalways1259

2 жыл бұрын

@@EasyFrontend năng nỉ a lun á, hihi, hk thì làm về react lazy và suspense cũng dx ạ, hihi

@EasyFrontend

2 жыл бұрын

@@sometimesalways1259 à mấy cái đó thì a sẽ làm trong khoá học reactjs em nhen. A chuẩn bị update thêm nội dung cho khoá đó đây hehe

e chưa học reactjs mà học react hooks lun ổn k a

@EasyFrontend

3 жыл бұрын

à hooks là một phần của reactjs nè, nên em cứ học ko sao nghen, nếu em chưa có cơ bản, có thể tham khảo khoá reactjs của anh trên udemy để hiểu về cách mình tổ chức và làm việc với dự án reactja nha Tiến 😉

đồng bộ và bất đồng bộ đi a ơi

@EasyFrontend

3 жыл бұрын

haha ngon lành, topic hót hòn họt là đây, mn yêu cầu hơi bị nhiều hihi, hi vọng sẽ ra sớm em nó cho mn tham khảo hihi 😉

@taivo7010

3 жыл бұрын

@@EasyFrontend yêu a nhiều

a giải thích redux dc ko ạ, e học chả hiểu gì ấy phần stateToProps() ấy a :))

@thuyvutrong6104

4 жыл бұрын

react-redux có hof connect() kết nối component với redux. connect(mapStateToProps,mapDispatchToProps)(Component); Hiểu đơn giản là mapStateToProps: chuyển đổi state của redux thành props cho components. mapDispatchToProps chuyển đổi dispatch của redux thành props.

@EasyFrontend

4 жыл бұрын

cảm ơn bạn Trọng đã giúp mình giải thích nhé. Bạn FREE SOFTWARE hiểu vấn đề chưa nè?

@freesoftware2529

4 жыл бұрын

e vẫn chưa hiểu lắm a ạ

@EasyFrontend

4 жыл бұрын

FREE SOFTWARE bạn chưa hiểu vấn đề gì vậy? Có thể hỏi thêm mình ở đây nha.

@freesoftware2529

4 жыл бұрын

e ko hiểu chỗ khi thực thiện 1 action thì payload: trong action nó lưa trữ gì ạ và lấy dữ liệu đó ở đâu ạ, e nghĩ vậy ko biết đúng ko ạ

em ms học nên ko bt analytics là gì ah ơi

@EasyFrontend

3 жыл бұрын

hi Hoàng, phần analytics là mấy cái tracking của Google Analytics nè, Facebook Pixel nè, nó thống kê lượt truy cập, truy cập trang nào, ở website bao lâu, ... đại loại là hành vi người dùng trên website của mình để mục đích cải thiện UI/UX cho nó tốt á Hoàng hehe

Hello sir, em bắt đầu học về React, đợt tới em thi lý thuyết lái xe đang có dự định làm cái app nho nhỏ để thực hành. Em có xem một vài tut làm Quiz sau đó có một vài vấn đề cần hỏi pro: - Giả sử bộ lý thuyết khoảng 600 câu, em muốn load ra 15 câu/ 1 quiz/ và có thể random() 15 câu đó. (Data là một file *json chứa 600 câu gồm câu hỏi và trả lời) - Trong file json có một url image, có cách nào lưu trong local và lấy ra được không anh? - Vì thời gian học còn lâu mà thi thì gần tới nơi rồi nên mới hỏi anh trước về giải pháp cho mấy vấn đề trên. Và đây là link tutorial: github.com/barman47/quiz-app

@EasyFrontend

4 жыл бұрын

hi Sơn, 1. Về vấn đề random 15 / 600 câu hỏi thì có nhiều cách làm lắm nè, ví dụ một cách sau: - Đầu tiên đọc 600 câu hỏi lên. - Chia ra thành 15 nhóm, tức mỗi nhóm 40 items. - Loop qua 15 nhóm đó, mỗi nhóm pick random một item. --> Cuối cùng có được 15 câu hỏi random 🙂 2. Về việc câu hỏi có hình ảnh: - Để hình ảnh trong project, rồi trong file json là đường dẫn tới cái hình là okie. - Tải hình ảnh lên CDN nào đó ví dụ cloudinary, rồi gán đường dẫn vào json file. Lúc render lên câu hỏi thì set cái đường dẫn vào src của thẻ img là xong. 🙂

@SonNguyen-ot9sf

4 жыл бұрын

@@EasyFrontend Cảm ơn vì đã phản hồi. Em cũng đã load được random 15/600 câu. nhưng lại dính vấn đề là khi previous step thì nó lại gọi random() chưa giải quyết được. (src image là em cho nó vào trong Json: ../asset/img/images) Về phần Image từ file Json đã load ra được dạng : localhost://3000/assets/img/image nhưng ảnh không thể hiển thị/nếu import một ảnh từ static file thì lại được nhưng nó lại dưới dạng /static/image.... chắc không thể vì kiếm trên mạng hoài không có giải pháp nên mới hỏi. hoặc vẫn còn kém chưa đủ trình chắc phải lưu trên sever nào đó rồi get về

@SonNguyen-ot9sf

4 жыл бұрын

@@EasyFrontend Xem về cấu trúc bài giảng thì rất thích. Việt nam cần những người như anh.Em bỏ code chục năm rồi giờ học lại nhiều cái mới quá. Nếu không biết gì xin phép hỏi anh.

@EasyFrontend

4 жыл бұрын

Sơn Nguyễn Yeah thoải mái nhé Sơn ơi, mình ngưỡng mộ bạn vì bỏ thời gian rồi mà vẫn còn quay lại đc vs code nè 😍

stackblitz.com/edit/clickeditoutside handle việc click outside để turn off dropdown . nhưng viết như vầy kiểu tác động đến DOM không biết nên khắc phục như nào ấy a. a có thể xem qua giúp em 1 lát với

@EasyFrontend

4 жыл бұрын

hi em, về vấn đề này, theo anh nên xử theo 1 trong 2 cách sau: 1. Em dùng built-in dropdown của thư viện UI, nó thường có làm sẵn việc này, mình không cần handle nữa. 2. Nếu em muốn tự làm thì không nên handle event click của windows như vậy, thay vào đó em nên làm dạng như modal. Có một overlay vô hình full màn hình. Add sự kiện click cho nó, nếu click lên thì sẽ ẩn dropdown. Okie hk Doshi?

@truongpham6397

4 жыл бұрын

@@EasyFrontend dạ e hiểu ý a . như kiểu lúc muốn ON thì click bth . còn khi ON rồi mình click outside thì chạm vào modal state off phải k a

@EasyFrontend

4 жыл бұрын

i'm Doshi Yesss, nó đó em heheee

HD 1 project thực tế cho người mới đi bạn

@EasyFrontend

3 жыл бұрын

hi bạn ơi, mình có đang làm rồi đó hihi, bạn check cái project photo app + redux nhé 😉

@ICOReviewtoken

3 жыл бұрын

@@EasyFrontend bạn đẩy code link git đi, để giành thời gian xem hiểu hết các concept của nó, tiết kiệm thời gian gõ code. course về reacjs nhiều nhưng toàn version cũ người mới sẽ khó học, nhiều bug, chưa rõ, hope bạn ra các nhanh nhiều bài về reacjs, nhanh thần tốc trong1 tháng. thank

lamf bat dong do di anh oi

@EasyFrontend

3 жыл бұрын

hihi hi Hùng ơi, hôm giờ a sml quá, để ít bữa có time a sẽ cố gắng sắp xếp để chia sẻ với mn về topic này nghen hehee 😉

vote bất đồng bộ a ơi

@EasyFrontend

4 жыл бұрын

hihi okie em Phúc 😉